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

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

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

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

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

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

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

Just in mind предлагает настройку стилей, набор бесплатных ui-китов (готовое решение пользовательского интерфейса) и доступен для интеграции со Sketch и Photoshop.

А теперь перейдем к более функциональным онлайн-сервисам для разработки интерфейсов:

Figma

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

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

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

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


Adobe XD

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

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


Adobe Illustrator

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

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


Sketch

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

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


Invision

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

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

И еще несколько инструментов для анимаций:

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

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

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

В конце хотели бы также дать пару полезных советов для совершенствования ваших знаний и развития насмотренности:

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