Дизайн интерфейсов UX UI Дизайнер интерфейсов. Дизайнер интерфейсов

В этом посте я расскажу о своих наблюдениях за тем, как рождается и взрослеет интерфейс продукта в Скетче. Эти идеи можно применять к интерфейсному проекту любого масштаба, будь то лендинг или операционная система.

Мыслить стратегически  - значит, смотреть на дизайн в перспективе. Значит, делать его оптимально, чтобы на длительной дистанции сэкономить рабочее время.

Уровни детализации в дизайне интерфейсов

Продуктовый дизайн интерфейсов никогда не заканчивается и постоянно развивается. Я выделяю четыре уровня:

• логический
• уровень проектирования
• визуально-эмоциональный
• уровень масштабирования

Правильно заложенный фундамент на логическом уровне помогает построить такой проект, как изначально хотелось. Интерфейсный делает дизайн понятным и удобным. Визуальный уровень радует глаз и даёт правильное ощущение. Затем, удачно написанные правила дизайна помогают масштабировать его до любого размера.

Дизайнеры используют Скетч не в полную силу

Дизайнеры, которых я встречал, пытаются использовать Скетч как Фотошоп или Иллюстратор. Но Скетч - не просто очередной модный векторный редактор. Это первый успешный инструмент, созданный специально для работы с интерфейсами. При помощи символов в умелых руках он позволяет создавать бесконечно масштабируемый дизайн-проект. Фотошоп и Иллюстратор нечестно сравнивать со Скетчем, поскольку они были созданы не для дизайна интерфейсов. Их величия никто не отменяет, однако глупо идти в бой, вооружившись микроскопом, если можно выбрать автомат Калашникова.

Дизайн крупного проекта плавно эволюционирует от серых схематичных блоков до проработанной системы, которая напоминает свёрстанный сайт. Скетч позволяет переходить из одного уровня детализации в другой.

Какой макет лучше организован?

Вот два внешне одинаковых макета:

Левый не использует символы, а правый только из них и состоит. Какой макет лучше организован? Напрашивается ответ, что правый. Но нет. Они заточены под разные цели.

Левый: легко менять, трудно масштабировать

Если этот дизайн станет основой для 100 других экранов, то с каждой новой копией в проекте будут появляться плохо управляемые дубликаты объектов. Они должны быть идентичными от экрана к экрану. Чем их больше, тем сложнее будет следить за порядком. Если поменяется единственная иконка или таббар, устареют все 100 макетов.

Правый: дорого создать, идеально масштабировать

Однако, не торопись всё подряд запихивать в символы. Если стиль только формируется и нужно кардинально переделать этот экран, то после отрисовки экрана заново все символы из правого варианта устареют. Время, потраченное на их создание, не окупится. Такой экран с его символами неудобно переставлять среди других экранов, он не лёгок на подъём.

Символы - клей интерфейса

Я понимаю, какой огромный потенциал скрыт в символах. Они напоминают маленькую цивилизацию, организмы в которой рождаются и умирают. При помощи символов и простых форм я выращиваю структуры. Отмершие ткани уничтожаются. Я создаю и посылаю их на войну, зная, что может быть ситуация, что придётся сделать им детач.

Жизненный цикл символа

После смерти символы превращаются в группы, а следующим же действием их можно разгруппировывать, вытаскивая на поверхность макета их содержимое: простые растровые, векторные и текстовые слои, или другие символы. Так через отдельные атомы меняются уровни детализации.

В зависимости от того, создаю ли я новые символы, или отстреливаю старые, можно понять, в какую сторону я двигаюсь стратегически: детализирую или разрушаю структуру дизайна.

И то и другое направление движения имеет свои плюсы:

Если мы детализируем

структура становится более формальной и сложной. Появляется стройность и логика, она стремится описать свои мельчайшие частицы и следует принципу программирования DRY (don’t repeat yourself). Формализация приводит к порядку и экономит объекты, но неизбежно бюрократизирует систему. Камни фундамента дороже двигать, чем камни на крыше. Формализация дружит с сеткой, заботится о том, чтобы все отступы одинаковы. Так мы цементируем интерфейс, делаем его менее гибким, но стройным.

Интересный пример: я встретил Sketch-проект, который весил 600 мб. В нём практически не использовались символы и было много экранов. Когда я вычистил и переверстал его на символах, вес файла сократился до 150 мб.

Если больше двух объектов в системе выглядят идентично, и в будущем их количество их только увеличится, возможно, пора создать им общий символ.

Если мы упрощаем

Если мы крошим символьную структуру детачем, это ведёт к разжижению дизайна и становится ближе к принципу KISS (keep it short and simple). Свежему цементу легче придать нужную форму. Частицы в нём не имеют сильных связей друг с другом и не сопротивляются.

Дизайн вдребезги

Нет ничего более раздражающего, чем символьные структуры, когда нужно быстро и кардинально изменить дизайн, сделать новую логику взаимодействия. В этом случае о них постоянно спотыкаешься. Если не отстреливать символы, придётся сформировать в голове все взаимосвязи, которые формируют конечный макет. Мы заходим в каждый символ и меняем его, чтобы повлиять на финальный дизайн. Если элементы мелкие и разношёрстные, это делать в рамках одного макета крайне сложно. Попытка играть по правилам формальной системы, когда нужна революция - бесполезный гемор, который замедляет работу. Словно пытаешься рисовать картину не целиком, а по фрагментам, не видя общий холст.

Когда интерфейс полон символов, он фрагментирован. Если нужно создать принципиально новый экран, это мешает.

Теперь поговорим об уровнях подробнее.

1. Логический уровень дизайна

Это высший уровень абстракции, стратосфера. Самый общий уровень интерфейса - это логика действий пользователя, . То, чем занимаются UX-дизайнеры: Какие каналы будут использоваться для взаимодействия с системой? В чём цель пользователя? Как помочь достичь её за минимум кликов? Скетч превращается в программу для создания логических диаграм:

На этом уровне символ только один - серая карточка, обозначающая действие. Вредно символизировать стрелочки и желательно даже не делать уточняющих подписей. Струкура только-только формируется. Некоторые дизайнеры вообще не работают на этом уровне, предпочитая визуализировать пути пользователя в виде экранов, а не логических действий. Этот уровень не содержит никакого визуального дизайна.

2. Уровень проектирования

Когда появляется больше деталей, мы переходим на уровень юзер-флоу. Какие кнопки нажимает пользователь, чтобы достичь своей цели? На этом этапе удобно использовать плагин User Flow , который позволяет показать, какие кнопки куда ведут.

В приложениях и сайтах это уровень взаимодействия с экраном. Рисуем общие формы, широкие мазки. Это тоже логический уровень, без рисования деталей. Где будет кнопка призыва к действию? На какой экран она будет вести? Что будем делать, если пользователь незрячий или имеет другие ограничения?

Мобил Фёрст

Шаги превращаются в экраны с определёнными размерами, для которых мы проектируем. Начинаем всегда с мобильной версии, поскольку в ней легче сконцентрироваться на смысле, а не на визуальном дизайне. Разворачивать мобильную версию на большой экран значительно легче, чем втиснуть десктоп в мобильный. Читайте Mobile First .

Первые символы

Здесь уже можно начинать делать самые общие символы, если мы уверены, что объекты будут типовыми. Могут родиться символы шапки, главного меню и подвала. Они выглядят как серые прямоугольники с текстовыми слоями. Поскольку нас не ограничивает сильная фрагментация, на этом уровне тоже легко можно вносить значительные изменения в дизайн.

Делай прототип максимально рано

Здесь уже полезно создавать первый прототип в Инвижне, который не очень красив, зато работает как придумали. На этом уровне можно тестировать идеи: понятна ли логика, или всё надо переделать с нуля? Обидно выбрасывать любовно прорисованный дизайн. Выбрасывать изрисованную салфетку - не обидно.

3. Уровень эмоций: отрисовка и контент

Когда логическая картина сложилась, можно прорабатывать дизайн в деталях. Эта территория вдохновения и художников. На нём концентрируются любители Дрибла и Биханса, подчас забывая об остальных. Серым квадратам приходят на смену настоящие UI-элементы, хорошая типографика, иконки и иллюстрации. Время тщательно проработать формулировки в текстах. Сюда же можно отнести анимацию. Когда она используется уместно, даже самый простой дизайн оживает.

Вместе контент и визуальный ряд формируют восприятие всего продукта.

4. Уровень масштабирования

Когда стиль продукта сформировался и появился набор правил, по которым формируется дизайн, приходит время взросления дизайн-системы. Также хочется назвать этот этап формализацией.

Те, кто организовал это, знают толк в масштабировании. Символы - идеальный инструмент масштабирования дизайна.

На этом уровне создаётся подавляющее большинство символов. Это время спуститься на землю и перестать устраивать революции. Время начать разглядывать детали и заниматься перфекционизмом. Цель рождения символов на этом этапе - разбить систему на мельчайшие части, чтобы можно было её безболезненно масштабировать.

Зачем масштабировать

Удачно формализованную систему легко поддерживать.

Даже крупный проект может так и остаться на уровне отрисовки. Поскольку рост числа макетов неизбежен, вместе с ним неизбежен рост сопутствующего бардака. Если дизайн меняется, дизайнеру приходится актуализировать все макеты вручную (а это невозможно), либо держать актуальными только последние макеты, игнорируя все остальные. Я бы сошёл с ума, если бы мне приходилось мириться с тем, что 90% моих новых макетов уже устарели.

Пример задачи масштабирования

Если встанет задача перекрасить все красные иконки в другой оттенок, это будет легко сделать, поскольку они сгруппированы в одном UI-ките, из которого транслируются во все макеты. Меняем один символ - меняются все его копии в 600 макетах. Этот дизайн уже пахнет вёрсткой.

Что масштабировать

Символами должны становиться не только иконки, а любые повторяющиеся элементы. Все поля ввода, меню, иллюстрации, кнопки, вкладки, попапы и некоторые текстовые блоки.

Все уровни противоречат друг другу. Чтобы проект развивался, постоянно необходимо лавировать между ними и в этом заключается мастерство дизайнера интерфейсов.

Это пост не о том, что нужно дробить интерфейс на кучу символов, как и не о том, что символы мешают рисовать дизайн как иллюстрацию. Это лишь следствия чего-то глубинного. Посмотри на свой интерфейс на всех четырёх уровнях и реши, что с ним нужно делать в данный момент, чтобы эффективнее всего решить поставленную задачу.

Об освоении рынка дизайна интерфейсов написаны километры однообразных и скучных советов, которые легко нагуглить, поэтому тут я постараюсь несколько иначе подойти к теме. Специально для Цифрового Брокколи.

Интерфейсы - крайне конкурентный рынок для дизайнеров, что хорошо, потому что в ваш парус всегда будет дуть ветер: работы всё больше и больше, и даже эволюция шаблонов и конструкторов ни капли не поколебала спрос на проектировку и дизайн интерфейсов всех мастей, от мобильных приложений до сложных десктопных систем.

На сайте hh более полутора тысяч вакансий для UI/UX-дизайнеров, из них 100 удаленных

Среди других высококонкурентных разновидностей дизайна вроде полиграфии и айдентики – интерфейсы еще и самые прибыльные, поэтому однозначно имеет смысл попробовать себя на этом поприще. Минимальная зарплата - 65 000 рублей против 30 000 у дизайнеров полиграфии (данные ).

Вкратце о работе дизайнером интерфейсов. Самое важное

В работе постоянно действует принцип easy to play, hard to master. Обучение не является подготовительным этапом, потому что это тупо часть работы – вообще всё время. Именно поэтому можно пропустить получение образования и выслушивание нудных курсов и сразу приступить к практике.

Да-да, предварительное образование некритично – это всё-таки не хирургия и не ракетная физика. Скажу больше – образование вредит дизайнеру в 90% случаев. Потому что в новичка впихиваются чужие идеи и мнения, выталкивая главное преимущество дизайнера – новые идеи. Новый взгляд на вещи. Другой взгляд на вещи. Способность думать вне рамок и под другим углом. Этой способности вас никто никогда и нигде не обучит, а вот отнять её очень легко.

Хотя одну книжку я посоветую. Она отнимет не больше часа времени в худшем случае (за что и любим) – Дизайн пользовательского интерфейса. Искусство мыть слона .

Сейчас может сложиться впечатление, что всё просто и легко. Нет, всё очень тяжело и сложно. И хороших интерфейсов – единицы, их не умеют делать опытные дизайнеры и даже IT-гиганты. Поэтому к любым гайдам, курсам и книгам нужно относится крайне скептически. Интерфейсы сейчас – Дикий Запад (в отличие от полиграфии, например), в котором царит беззаконие и хаос. И это играет на руку новичкам – индустрия до сих пор остро нуждается в свежей крови и мозгах, потому что старожилы плохо справляются с улучшением интерфейсов.

Немного подытожу.

1. Предварительно учиться – необязательно и даже вредно, но вообще учиться всяким вещам придётся постоянно – без этого ничего не выйдет 100%.
2. Новые идеи – на вес золота, и способность их генерировать нужно тщательно оберегать, потому что вашу самооценку будут постоянно сбивать.
3. В интерфейсах на данный момент царит бардак, поэтому ко всем полученным знаниям и услышанным мнениям нужно относится скептически.

Начинаем прямо сейчас. Серьёзно

Получается, чтобы реально начать – нужно просто соответствовать неким требованиям к характеру, и всё? Да, если вы любознательны, реально способны постоянно всасывать новую информацию, трудолюбивы и обладаете неординарным мышлением (в любой трактовке, даже собственной) – можно начать сразу после прочтения этой статьи. Или если вам тупо нужна была мотивация – прямо сейчас закрывайте эту статью и вперёд.

Я – за практику. Я залез в дизайн с нулём вместо знаний. Я просто врал, что всё знаю и умею, чтобы получить работу. А потом сутками мучал гугл своими запросами, чтобы освоить всё, что нужно для выполнения задачи. Кому-то такой подход может показаться бессистемным – в том плане, что не проще ли было сначала научиться, а потом лезть? Нет, не проще, потому что знания в айти устаревают каждые 3 месяца. Ну и помним про бесценную способность иметь собственный взгляд на вещи.

Ну так вот, самое простое, что можно сделать прямо сейчас – это тупо перерисовать что-либо. Например, Телеграм. Делаете скриншот и старательно, точь-в-точь до последнего пикселя перерисовываете.

Небольшое, но очень важное отступление. Я рекомендую Фигму – по счастливому стечению обстоятельств эта программа бесплатна и одновременно является лучшим выбором для проектировки и дизайна интерфейсов. Не верите мне – спросите интернет.

Ну так вот, перерисовываете всё, что угодно. Копирование и плагиат – чуть ли не самая быстрая и эффективная школа для освоения технической части дизайна, то есть вы научитесь работать в программах. Предыдущее слово во множественном числе не просто так: фигмой вы не обойдётесь, и скоро выясните это сами – помним про постоянное обучение.

Также вы научитесь формулировать свои мысли и вопросы, а потом научитесь гуглить – это, без шуток, невероятно нужный навык, который не так прост в получении, как кажется. Ну и если лень – есть Тостер.ру , на котором я, кстати, часто тусуюсь и помогаю новичкам. Если что – зовите меня в свой вопрос.

Где учиться дизайну интерфейсов и получать за это деньги

Что дальше? Дальше еще проще. Теперь нужно переделать что-нибудь. Вспомните сайт, программу, сервис, которые вы используете и что-то в них вас при этом раздражает. Далеко ходить не нужно, можно опять взять тот же Телеграм. Лично меня до белого каления бесит ужасная свалка из людей, ботов и каналов в одном списке без какой-либо рубрикации. Я не хочу пользоваться альтернативными клиентами – я хочу, чтобы в официальном приложении появились отдельные вкладки для разных сущностей, а в идеале – возможность группировать чаты как душе угодно.

Всё гениальное просто. Перерисуйте одно, переделайте другое – и вы войдете во вкус, проверите свои силы, получите вдохновение. Звучит просто, на деле – намучаетесь. Но это интересно и весело.

Разумеется, выполнять нелёгкую работу за просто так – значит быстро сжигать мотивацию. А мотивацию, как уже доказано наукой, лучше всего повышают деньги. И азарт. Нехилый буст можно получить в дизайн-конкурсах, которые особенно актуальны для новичков – не страшно ошибаться, а шанс получить деньги очень даже реальный. Это чуть ли не самый лучший способ получить море разнообразной практики, да еще и возможно оплачиваемой. Лично мне нравится 99designs – сотни и тысячи заданий ежедневно, в том числе на веб-дизайн, который - ожидаемо - там самый дорогой (одна-две тысячи долларов не редкость). Выбираешь, что по душе, и с удовольствием дизайнишь – чистый кайф.

Как я уже говорил, я пролез в индустрию исключительно на лжи. Конкурсами я баловался сильно позже, когда просто устал от работы: конкурсы – это отдых и разрядка. Я к тому, что если среди ваших черт характера присутствует еще храбрость или наглость, можно сразу лезть на и брать заказы.

Да, сразу к реальным заказам. Без опыта в реальных проектах. Без опыта. Без всего. Так – тоже можно. Главное – готовность рвать пятую точку. Если нужен мотивационный пинок под зад и открытие глаз – у меня целая заметка есть .

От себя я порекомендую Фрилансим - много заказов, хорошая аудитория, бесплатные заявки. С этой биржи я всегда уходил надолго с долгосрочными заказами и клиентами. Ну и пять халявных откликов в день – очень удобно.

TL;DR и почему всё это было вообще написано

Снова подытожу.

1. Чтобы войти в интерфейсы – необязательно учиться заранее, но обязательно потом, и вообще – постоянно; нужно иметь неординарное мышление и уметь его защищать; а также следует скептически относиться к чужим знаниям и советам.
2. Оптимальный инструмент – Фигма: она бесплатна и вообще оптимальна на данный момент, однако придётся осваивать и другие программы; какие и как – поможет крайне необходимый навык гугления.
3. Практика – лучшая школа: сначала копируем-перерисовываем что-либо, а потом переделываем то, что не нравится; а еще можно получать деньги за практику, если участвовать в дизайн-конкурсах или – если хватает наглости – в реальных проектах, которые можно получить на фриланс-биржах.

Если вы дочитали аж досюда, а это – на минутку – уже четвёртая страница в ворде, то, наверное, заметили, что бо́льшая часть текста посвящена каким-то наставлениям и нравоучениям. На то есть хорошая причина – в дизайне в первую очередь требуется правильная конфигурация мозга, а не что либо еще. А также яйца. Последние отрастить тяжеловато, но всё равно придётся, если вы хотите задержаться в любимой профессии. За мотивацией милости прошу в мой канал , и не стесняйтесь писать в личку с любой чушью.

Подписывайтесь на канал о фрилансе и удаленной работе Remote&Freelance и узнайте, как монетизировать любимое дело, работать удаленно и путешествовать.

Дизайнер Эрик Кеннеди в своём блоге на Medium опубликовал 7 простых правил по созданию привлекательных интерфейсов - по его мнению, в основе качественной работы лежит работа со светом, величина белого пространства, прототипирование.

Обратите внимание на меню слева.

Или посмотрите на заголовки списков. Между словом «Playlist» и его подчёркиванием расстояние в 15px. Это больше, чем высота заглавной буквы шрифта! Я уже молчу о 25 пикселах между самим списками.

В верхнем правом углу тоже достаточно пространства. Текст «Search all music» занимает 20% высоты панели навигации. У иконок похожие пропорции.

Даже такие интерфейсы, как форумы, могут выглядеть красивыми и простыми благодаря белому пространству.

Или «Википедия»:

Конечно, можно поспорить, что такому редизайну не хватает функциональности. Но это хорошее место для старта.

• Добавьте белое пространство между линиями.
• Добавьте белое пространство между элементами.
• Добавьте белое пространство между группами элементов.
• Анализируйте, что работает, а что нет.

В этой статье я привожу примеры основных принципов или концепций, которыми руководствуюсь при проектировании десктопных интерфейсов. Не планирую выступать новатором или поучителем, но с радостью поделюсь набором установок, который помогает мне в работе.

Кстати, если вы используете Figma , я рекомендую обратить внимания на наши готовые дизайн-системы . Они помогают фрилансерам завершать больше заказов в месяц, программистам позволяют создавать красивые приложения самостоятельно, а тимлиды «пробегают» спринты быстрее, используя готовые дизайн-системы для командной работы.

А усли у вас серьезный проект, то наша команда готова развернуть дизайн-систему внутри организации на базе наших наработок и подогнать под конкретные задачи, используя Figma. Web / desktop, так и любой мобайл. С React / React Native мы тоже знакомы. Пишите в Т: @kamushken

Акценты и приоритеты

Каждый раз, проектируя интерфейс я задаю себе или клиенту вопрос: “Какая информация сейчас важна для конечного пользователя? Как мы распределим его внимание в конкретном случае?” Для этого в нашем вооружении есть цвет и его оттенки, размер шрифта, его интенсивность. В совокупности, правильно используя эти инструменты, мы “оставляем послание” пользователю, ведём его по нужному нам пути, концентрируя его внимание на самом важном.

Хороший пример, когда дизайнер дал пользователю понимание, что важно видеть отправителя, затем тему, а уже потом содержание или его @ник в системе:

Плохой пример, где дизайнер “утверждает”: важнее всего - аватарки, а с остальным как-нибудь разберётесь:

Отступы и их пропорциональность

Современный дизайн лёгок, прост и “насыщен воздухом”. Он наполнен дыханием. И не самую последнюю роль в формировании этих ощущений играют отступы. Значительные отступы помогают упростить подачу материала. Но они должны быть подчинены некоторой закономерности и пропорциональности. Я определяю для себя N пикселей в качестве базисного отступа, когда начинаю новый проект. Затем я использую 2N, 3N и так далее пропорциональность для создания визуального баланса, если где-то требуется бОльший отступ.

Хороший пример, когда дизайнер более менее соблюдает пропорциональность отступов:

Плохой пример, когда отступы практически базируются на генераторе случайных чисел:

Текст кнопки всегда первичнее иконки

Не забывайте, что именно текст является определяющим фактором того, какое ожидание или реакция предварительно сформируется у пользователя при виде кнопки. И лишь изображение иконки вторичным образом дополняет смысл. Изображение колокольчика с надписью “notifications” даёт нам некоторое представление о назначении этого функциона до того, как мы сделали клик. Аналогичный колокольчик без подписи в другом приложении приведёт нас к будильнику, хотя мы скорее всего будем ожидать появление экрана с уведомлениями. Я советую всегда наделять надпись бОльшим “весом” нежели иконки. Их я вообще считаю надувательством. Многие современные интерфейсы вполне способны обходиться и без них. Просто это было бы слишком скучно!

В целом хорошо:

Но можно сделать лучше:

Тоже выглядит неплохо:

И тут есть, где улучшить:

Не пытайтесь быть слишком понятными

Не все проектируемые интерфейсы обязаны быть интуитивно понятными. Существует множество сложных систем, с которыми мы обучались (!) взаимодействовать какое-то время. Возможно сейчас они кажутся нам простыми, но мы не отдаём отчёт, что были исследователями-первооткрывателями первые минуты, часы или более. И коль мы продолжаем работу внутри некоторой изначально сложной системы, видимо ничего не препятствовало нашему пути первых исследований. Скорее всего, дизайнер сделал свою работу настолько хорошо, что мы без труда освоили новую среду. Яркий пример из жизни: попытайтесь на миг представить, что вы не знаете значение математического знака “равно”. Согласитесь, эти две чёрточки - одна над другой, они совсем не кажутся интуитивно понятными. Просто когда-то в школе учитель математики обучил нас этому. Я призываю не пытаться быть понятнее, чем это требуется на минимально необходимом уровне.

В этом примере дизайнер был чрезмерно понятен с кнопкой закрытия:

А в этом примере дизайнер оказался чрезмерно понятен с возможностью добавления:

Перемещение курсора забирает силы

Мы не должны обязывать пользователя тянуться в другую часть экрана, чтобы получить расширенный функционал. Если пользователь работает со списком, то кнопка создания нового элемента должна быть поблизости. Или если мы порождаем новый попап кликом по кнопке слева внизу, то абсурдно заставлять пользователя тянуть курсор по диагонали направо вверх, чтобы окно закрыть.

Хороший пример, когда дизайнер предлагает закрыть попап в той же области, которая вызвала его порождение:

Плохой пример, когда дизайнер отдаляет функционал добавления элемента в список от самого списка:

Взаимосвязи расположений или единая плоскость

Это очередной приём балансировки интерфейса. Подобие сетки, если хотите. Например, вы используете трёхколонник. Находятся ли его заголовки в одной плоскости по оси X? Или расположение иконок с кнопками. Можно ли провести мнимую ось Y и обнаружить, что и те и другие аккуратно прилегают к ней? Если ответы утвердительны, дела идут хорошо. Это обусловлено тем, что зрительно человеку легче воспринимать табличный вид из-за структурированности данных. И мы при разработке интерфейса должны располагать элементы с некоторой табличной логикой.

Плохой пример с несостыковками:

Хороший пример с гармонией и соответствием:

Цвет имеет смысл

Избитое напоследок. Красное - тревога, зелёный - всё хорошо. Испокон веков для человека самое лучше восприятие текстовой информации, это чёрным по белому. Если вы используете много цветов без аргументации, вы создаёте хаос. Если вы окрашиваете элементы по смыслу, вы создаёте еще больше порядка.

Пример хаоса: (172 votes зеленым означает ли позитивное состояние? если, да то 280 visitors оранжевым - означает негативное по логике? отнюдь! дизайнер цветом лишь разделил цифры между собой)

Пример создания порядка и обоснование цвета (я просто добавил графики поверх чужого творчества)

Хороший пример незлоупотребления цветами:

В качестве эпилога....

Выражаю благодарность членам сообщества dribbble, за неформальное согласие предоставить свои работы для данного обзора. Хочу напомнить, что вышеизложенные принципы в дизайне интерфейса являются основными для меня. Я всегда держу их в уме при проектировании интерфейсов. Определитесь на чьей вы стороне… Вы хотите создавать интерфейсы для дизайнеров и работать на лайки (пример - 98% работ с behance) или вы стремитесь решать проблемы пользователя (dribbble)? Кстати, по-моему отличный пример того, как закрытость сообщества позволяет сохранять фокусировку на главном предназначении интерфейсов!

Сбербанк - Москва

...Обязанности: разработка графических интерфейсов и элементов; разработка пользовательских сценариев создание видео/анимаций оформление презентаций продукта создание быстрых прототипов (без кода) для тестирования на фокус группах участие в фокус ...

25 дней назад

Social Discovery Ventures - метро Динамо, Москва

...будут задавать тренды в ближайшие 10 лет? Тогда вам к нам, в SDV! В роли продуктового дизайнера вы будете выполнять сложные задачи и превращать их в интуитивно понятные интерфейсы, доступные и простые в использовании, для миллионов людей по всему миру. А команда ...

25 дней назад

ЭЛЕКТРОННЫЕ ОФИСНЫЕ СИСТЕМЫ - метро Сокольники, Москва

...руководителя отдела проектирования. Вместе с дизайнерами и исследователями, вам предстоит работать над веб- интерфейсом системы “ДЕЛО”, сложным продуктом для ... ...задаче; взаимодействовать с исследователем пользовательского опыта, если вы поймете, что для выполнения поставленной ...

26 дней назад

Электронное издательство ЮРАЙТ - метро Шоссе Энтузиастов, Москва

130 000 руб.

...Проект biblio-online.ru в связи с развитием ищет дизайнера- проектировщика интерфейсов. Мы создали и развиваем новаторский сервис для обучения ... ...-online, сайта компании Urait. Развитие, улучшение пользовательского опыта. Дизайн удобных интерфейсов для новых ...

14 дней назад

ПРОКАТТ - Москва

80 000 - 150 000 руб.

...Задачи: Разработка концепций различных автоматизированных систем; В рамках сформированной концепции пользовательского взаимодействия разработка интерфейсов корпоративных систем и приложений; Проектировка и дизайн интерфейсов, разрабатываемых АС. На первом ...

13 дней назад

1С - Москва

...Чем заниматься: Активное участие в развитии направления проектирования пользовательских интерфейсов системы программ «1С:Предприятие 8». Данный комплекс программного обеспечения предназначен для автоматизации управления и учета на предприятиях различных отраслей и ...

Быстрый отклик более 2 месяцев назад

X5 RETAIL GROUP - метро Добрынинская, Москва

2 017 руб./год

...требований к продукту в интуитивно понятные пользовательские рабочие процессы, концепции и дизайн- ... ...персонажей, сценариев, требований к интерфейсам; Разработка информационной ... ...обязанностей и контроль работы группы дизайнеров на аутсорсинге. Требования: Готовы ...

8 дней назад

СИБУР, Группа компаний - метро Профсоюзная, Москва

...Обязанности: Исследование пользовательского опыта и перевод исследовательской информации ... ...в качестве графического/визуального дизайнера с использованием инструментов Adobe, OmniGraffle ... ...SAP UI5 или Open UI5, опыт создания интерфейсов приложений по User Story Map, ...

10 часов назад

Безопасная информационная зона - метро Бауманская, Москва

130 000 руб.

...киберразведке и постоянном мониторинге информационных потоков в публичных и теневых сегментах киберпространства ищет Проектировщика пользовательских интерфейсов. Участие в проекте: ~ Разработка аналитических продуктов и сервисов в области информационной безопасности ...

25 дней назад

Дефенс Групп - Москва

...Обязанности: Сбор информации о проекте и его аудитории Проектирование интерфейсов Разработка пользовательских интерфейсов с нуля Проработка сценариев пользовательских интерфейсов Анализ пользовательских интерфейсов с целью оптимизации и повышения ...

8 дней назад

MANGO OFFICE - метро Калужская, Москва

...Обязанности: Проектирование пользовательских сценариев Создание макетов и прототипов Тестирование прототипов пользовательских интерфейсов на сотрудниках компании и приглашенных клиентах Отрисовка интерфейса в графических редакторах Приемка задач разработки ...

25 дней назад

Арарэль - Москва

...Кого мы ищем? Ищем профессионального и опытного дизайнера пользовательских интерфейсов. Что предстоит делать: Проектирование и прототипирование пользовательского интерфейса; Создание адаптивных web-интерфейсов; Разработка и внедрение UI стандартов ...

16 дней назад

Р-Вижн - Москва

150 000 руб.

...именно вас. Требования: Опыт проектирования интерфейсов информационных бизнес-систем от 2х лет (не сайты) Аналитический ... ...фреймворка Ext JS Обязанности: Анализ пользовательских интерфейсов с целью оптимизации и повышения юзабилити ...

17 дней назад

Гарант - Ломоносовский р-н, Москва

130 000 руб.

...Компании-разработчику ИПО "ГАРАНТ" (28 лет на рынке) требуется дизайнер интерфейсов . Задачи: - Участие в концептуальном и ... ...проектировании веб-сервисов системы ГАРАНТ. - Анализ документации, пользовательских сценариев, бизнес- и функциональных требований. - ...

25 дней назад

Ашманов и партнеры - метро Кунцевская, Москва

70 000 - 100 000 руб.

...наше юзабилити-подразделение приглашаем Проектировщика интерфейсов / UX-дизайнера. Задачи: Создание и описание персонажей ... ...Разработка информационной архитектуры; Проектирование пользовательских интерфейсов в виде вайфреймов и интерактивных прототипов ...

26 дней назад

ГБУ МосТрансПроект - метро Чистые пруды, Москва

90 000 руб.