UX/UI дизайн для создания идеального продукта. Полный и исчерпывающий гид

Библиотеки готовых пиктограмм стремительно множатся, и создать уникальный по стилю набор становится очень сложно. Уникальные наборы разрабатываются, как правило, для продуктов с большим MAU (Monthly Active Users, количество активных пользователей в месяц).

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

• https://materialdesignicons.com/

• https://thenounproject.com/

• https://www.flaticon.com/

• https://www.iconfinder.com/

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

Пиктограммы Tilda – часть открытой дизайн-системы, на основе которой любой желающий может создать собственный адаптивный сайт, используя не только готовые «атомы» и «молекулы», но даже целые «организмы» и «шаблоны»

Иллюстрации

В мире, где интерфейсы стремительно унифицируются, ничто так не придает характер продукту, как интерфейсные иллюстрации. Иллюстрации создают первое впечатление на посадочных страницах продукта, украшают пустые страницы tabula rasa[62] и добавляют жизни рутинным операциям.

Tabula Rasa – страница отображения списка, в котором ноль элементов. Пример эмоциональных иллюстраций для состояния tabula rasa в «Ак Барс Онлайн».

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

В дизайн-системе Atlassian (известный производитель цифровых продуктов для автоматизации разработки) описана роль иллюстраций и цель их применения

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

Если вы или член вашей команды имеете художественное образование, знаете теорию композиции, владеете техникой светотени и т. д., для быстрого погружения в визуальную культуру можно прибегнуть к агрегаторам, например Pinterest, введя запрос «interface illustrations».

Анимация элементов

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

Раздел Easing («Замедление») в дизайн-системе Google Material Design содержит прекрасный дидактический материал. В жизни мы практически не сталкиваемся с равномерным движением; объекты материального мира, имеющие инерцию, ускоряющиеся в начале пути и замедляющиеся в конце, преодолевающие силы притяжения, гораздо комфортнее для восприятия

• Анимация – эффективный инструмент управления точкой фокуса. Мы можем привлечь внимание пользователя при помощи движущегося объекта.

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

• Анимация придает характер и вызывает восторг. Поведение элементов отражает особые моменты в путешествии пользователя и «оживляет» бренд.

Код

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

DesignOps (калька с DevOps) – совокупность инженерных практик и инструментов, призванных оптимизировать процессы производства программного обеспечения.

Практики DesignOps направлены на сокращение перечисленных ниже издержек, которые так хорошо были сформулированы в концепции бережливого производства.

• Потери из-за перепроизводства – вид потерь в разработке ПО, связанный с производством избыточных артефактов. Есть французская пословица – натирайте пармезан перед обедом. Каждый лишний макет, интеллектуальная карта или вайрфрейм, который не был «утилизирован» в релизе, представляет собой законсервированные затраты рабочего времени. Ретроспективно оценив суммарные затраты на артефакты, которые были произведены, но до сих пор не пригодились, можно представить, сколько времени освободилось бы для правильных дел.

• Потери времени из-за ожидания – в производственном процессе образуются «бутылочные горлышки», часто связанные с избыточными согласованиями артефактов. Некоторые люди боятся брать на себя ответственность за результат и запускают «механизм комитета», что отдаляет время поставки и отвлекает участников от работы.