22 ноября

Обзор инструментов для UX/UI дизайнера

Да кто такой этот ваш UX/UI дизайнер?

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

Несмотря на то, что UX (User Experience или пользовательский опыт) и UI (User Interface или пользовательский интерфейс) — это разные направления, они взаимосвязаны. И одно не сможет полноценно функционировать без другого.

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

Начнем с вайрфреймов. Среди дизайнеров есть четкое распределение по ролям, и вайрфрейм будет выполнять роль схематической разметки экрана. Традиционно состоящий из белых, серых, черных блоков, он демонстрируют структуру контента, основные блоки:

  • Balsamiq станет хорошим инструментом для прототипирования с упором на структуру и содержание дизайна. Он оперативный и поддерживает командную работу.
  • Mockflow будет более функциональным за счет арсенала плагинов, но при этом он не уступает в простоте Balsamiq.
Just in mind предлагает настройку стилей, набор бесплатных ui-китов (готовое решение пользовательского интерфейса) и доступен для интеграции со Sketch и Photoshop.
В первую очередь это инструмент для презентации логики работы интерфейса команде. Потому не стоит излишне детализировать здесь, дизайнер должен быть всегда готов к тому, что вайрфрейм можно быстро изменить.

Юрий Комаровский, UX / UI дизайнер в компании Artox
А теперь перейдем к более функциональным онлайн-сервисам для разработки интерфейсов:

Figma

Отличный инструмент для совместной работы в команде. Вы можете использовать веб-версию или скачать приложение на свой компьютер, вне зависимости от платформы (Windows, Mac, Linux).

Ко всему, она бесплатная. Во всяком случае большая часть инструментов будет в свободном доступе, и этого достаточно для комфортной работы.

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

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


Adobe XD

Делает процесс прототипирования быстрым, доступным, с возможностями тестирования на мобильных устройствах и созданием анимации. Разработчики отмечают его интуитивно понятный интерфейс, что не могло не привлечь внимание UX/UI-специалистов.

Также можно отметить: удобство работы как в онлайне, так и в офлайне, 3D-преобразования, повторяющуюся сетку, интеграцию с Creative Cloud и голосовое прототипирование.


Adobe Illustrator

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

Ключевым преимуществом также станет единая среда компании Adobe, т.е. ваш файл может свободно функционировать в других программах (Фотошоп, Флэш) без лишней конвертации.


Sketch

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

Данный редактор часто ставят в сравнение с Figma, и мы советуем вам попробовать оба для лучшего понимания. Но учитывайте, что Sketch доступен только под macOS.


Invision

Здесь подняты проблемы интерактивного прототипирования и анимации, объединяются множество полезных функций для создания веб-интерфейсов (UX/UI). В систему можно подключать внешние графические файлы (возможность импорта из Sketch), и множество базовых вещей создается за пару кликов.

Конечно, ключевое преимущество — это работа с анимацией. Разные типы взаимодействий и редактирования дают большой простор для вашего творчества. А хорошим дополнением станут расширенные возможности InVision Cloud.
Исходя из моего опыта, основным графическим редактором у большинства дизайнеров на данный момент является Figma. Также интересный графический редактор, который могу порекомендовать от себя, — это Framer X.

Юрий Комаровский, UX / UI дизайнер в компании Artox
И еще несколько инструментов для анимаций:

  • Principle отлично подойдет для создания приятных анимаций и переходов. Хоть и работает только на Mac, инструмент дружит с Figma и Sketch — с ними мы познакомились выше.

  • UXPin поможет добавить анимаций в ваш интерфейс и также создать реалистичные прототипы. Огромная библиотека компонентов, многопользовательский режим, быстрый способ разработки веб-приложений.
  • Adobe After Effects станет вашим другом не только при создании анимированной графики, но и для обработки видеоконтента (если и это вам интересно). Но учтите, что здесь придется поучиться — как и какой инструмент работает — для качественной реализации своих идей.
Также простую анимацию можно делать и в Figma, а для более прокаченных вещей можно использовать плагины, — Figmotion.

Юрий Комаровский, UX / UI дизайнер в компании Artox
Очевидно, выбор платформ для создания крутых интерфейсов, их прототипов и анимаций достаточно большой. У всех есть свои преимущества и недостатки. И так как за рекламу нам никто не платит, выделить какой-то один мы не сможем :)

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

  • Регулярно читайте новейшие исследования в области пользовательского опыта — например, здесь Nielsen Norman Group. Компания является мировым лидером в исследовании UX-дизайна. Статьи на английском, потому еще и крутая практика для нужных soft-skills.

  • Вдохновляемся работами талантливых ребят, искать которые можно на международных конкурсах: CSS Design Awards и Awwwards. И берем на заметку, чтобы в будущем делиться своими лучшими проектами :)
Если вы новичок в проектировании, очень важно, во-первых, четко для себя понять разницу между UX и UI. Многие считают, что дизайн — это приятное графическое решение. Это не совсем так. Работа над визуальной составляющей начинается значительно позже. Для начала точно разберитесь, что именно относится к лучшим практикам UX и попробуйте на практике. Эффективнее будет, если изучить и проработать эту часть с ментором.

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

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

Анна Лубневская, Experience Designer в EPAM Systems
Над материалом работала Карина Старкова

Стань востребованным IT специалистом

Наша цель — дать тебе знания и опыт, достаточные для трудоустройства в крупнейшие IT компании.