Лучшие инструменты и сервисы для UX/UI-дизайнера

Инструменты для создания прототипов

FigJam

Инструмент представляет собой интерактивную доску, предназначенную для нужд дизайнеров. Здесь можно кооперативно (со всей командой) обсуждать дизайн того или иного проекта. Такой инструмент будет полезен на начальных этапах работы: то есть, именно в тот момент, когда нужно определить общую концепцию. Также этот инструмент позволяет составить карту пути пользователя (Customer Journey Map). FigJam активно используют в больших компаниях, поскольку данный инструмент идеален для командной работы.  

XMind

XMind предназначен для составления структуры сайта. Этот инструмент также будет полезен на начальном этапе во время проведения брифа (как и FigJam), поскольку он позволяет определить функциональность создаваемого сервиса или сайта. Инструмент позволяет создать своеобразный «каркас» будущего сайта ещё до проработки его визуальной составляющей. Здесь схематично обозначаются блоки (в том числе информационные), из которых будет состоять ресурс. XMind – весьма полезна вещь для профессионалов из разных областей.

ProtoPie

Этот инструмент представляет собой плагин для популярного редактора Figma (он хорошо знаком профессиональным дизайнерам). ProtoPie позволяет создавать полноценные интерактивные прототипы для мобильных приложений, а также для десктопных программ. Создание прототипа – это один из важнейших этапов в работе UX/UI-дизайнера. Ведь именно его он демонстрирует заказчику или команде, предварительно проверив его работоспособность в браузерах или на самых распространённых моделях смартфонов.

Инструменты для поиска компонентов интерфейса

Набор компонентов для iOS 17

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

Набор компонентов для Android

Сет включает в себя элементы для создания интерфейса приложений, соответствующие стилю Material Design (который по умолчанию используется в актуальных версиях ОС Android). В этом комплекте можно найти иконки, значки, разнообразные стили, актуальные цвета, иконки меню и другие элементы. Набор может быть использован для создания самого разного контента. Профессиональные дизайнеры по большей части используют этот сет для экономии собственного времени, потраченного на разработку стиля.   

Инструменты для работы со стилями

Style Organizer

Данный инструмент существует для того, чтобы облегчить дизайнерам работу со стилями в Figma. Style Organizer позволяет задать стили по умолчанию для разных элементов: например, для всех вариантов текста, для навигационной панели и так далее. Благодаря этому инструменту, можно единожды настроить стили для текстов и затем использовать их повсеместно. Это существенно экономит время во время работы, так как не нужно постоянно искать подходящий стиль среди тех, что предоставляются программой.

Automate Control Styles

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

Инструменты для создания анимации

Adobe After Effects

Вероятно, самый популярный редактор, предназначенный для создания эффектов и анимаций. Обычно он используется для создания эффектных видео. UX/UI-дизайнеры же используют After Effects для добавления 3D-эффектов к элементам, а также для создания переходов, анимации иллюстраций и прочих подобных задач. К тому же, After Effects позволяет создавать крутые презентации для сайтов, которые впоследствии можно будет продемонстрировать заказчику (для того, чтобы впечатлить его).

InVision Studio

Это продвинутый редактор, который позволяет создать крутые интерактивные прототипы и дизайн-макеты сайтов или приложений. InVision Studio удобен тем, что с его помощью можно создать незаметные переходы между экранами, а также впечатляющие анимированные объекты. Этот редактор намного проще того же After Effects и поэтому пользуется популярностью в среде UX/UI-дизайнеров. Особенно любят этот редактор новички, так как он не требует каких-то особых навыков для работы с ним.

Инструменты для UX-исследований

Poe

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

Pollfish

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

Ресурсы для вдохновения и развития насмотренности

• Godly. Платформа представляет собой огромную галерею, включающую в себя примеры превосходного веб-дизайна. Просмотр подобного контента позволит дизайнеру найти свежие идеи для своих проектов.
• Land-book. Из этой галереи можно почерпнуть весьма интересные идеи для дизайна некоторых элементов. Хотя по большей части здесь размещены примеры веб-дизайна. Впрочем, дизайнеры из любого направления найдут здесь много интересного.
• Uijar. Галерея, построенная из реальных кейсов. Здесь нет места концептам – только то, что реально использовалось дизайнерами для решения той или иной задачи. Здесь можно не только просмотреть чьи-то работы, но и задать вопрос автору.
• Savee. Некая альтернатива Pinterest, рассчитанная на профессионалов, а не на праздную публику. Специалист в области UX/UI-дизайна может подсмотреть здесь интересные идеи для использования в своей работе. 
• Uplabs. Сервис представляет собой внушительную коллекцию интерактивных прототипов. Многие профессионалы делятся здесь своими анимациями, переходами и 3D-объектами, которые были использованы в их проектах.

Обучение

• Eddu – большой выбор онлайн курсов UX/UI-дизайна

Что читать для того, чтобы быть в тренде

• Дизайн-переводчик. Это ТГ-канал, который содержит в себе достаточно много переводов статей (в том числе лонгридов) от зарубежных дизайнеров. Здесь можно узнать о новых трендах в области дизайна в целом.
• UX Notes. Канал с подборкой полезных материалов, ориентированных исключительно на UX/UI-дизайн. Здесь можно найти лайфхаки, уникальные методики, примеры готового дизайна и другие вещи, которые будут полезны профессионалам.
• Figma Design. На этом канале размещена огромная коллекция плагинов для редактора Figma. Профессионалы самой разной направленности смогут найти здесь то, что позволит существенно облегчить работу над конкретным проектом. 

CMD. В этом Telegram-канале собраны разные IT-сервисы, которые будут полезны как в профессиональной деятельности, так и в повседневной жизни. В том числе, здесь можно найти полезные платформы для тренировки насмотренности.