Топ-25 инструментов для UX/UI-дизайнеров и исследователей

Содержание

• Программы для исследований и анализа
• Программы для создания дизайна
• Программы для анимации и прототипирования
• Программы для подбора цветов и палитры
• Программы для проектирования сайтов
• Программы для тестирования
• Программы для работы в команде
• Как разобраться в программах

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

‌В этой статье мы расскажем об основных программах, которые нужны как начинающим, так и опытным UX/UI-дизайнерам.

Программы для исследований и анализа

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

Notion

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

Доступный функционал:

• создание таблиц и канбан-досок;
• загрузка файлов;
• хранение ссылок и документов;
• создание портфолио;
• структурирование информации с помощью ИИ.

Miro

Miro — интерактивная доска для совместной работы в команде. Здесь же можно проводить мозговые штурмы и придумывать новые пути решения. Удобна для построения интерактивной карты путей клиента и выявления пробелов в пользовательском опыте.

Доступный функционал:

• размещение файлов;
• создание стикеров и пометок;
• обмен комментариями.

FigJam

FigJam — интерактивная доска для UX-дизайнеров от Figma, главного инструмента продуктового дизайнера, о котором мы еще расскажем. Она была создана специально для дизайнеров, чтобы они придумывали идеи и проводили мозговые штурмы со всей командой. Главное преимущество сервиса: в отличие от похожих приложений, FigJam без проблем работает с Figma, поэтому можно хранить весь проект в одном месте — от первоначальной концепции до готового прототипа.

Доступный функционал:

• фигуры и стрелки для проектирования юзерфлоу и построения новых процессов;
• стикеры и смайлики для мозгового штурма с командой;
• инструменты для скетчей и быстрого прототипирования;
• обмен комментариями и общение голосом.

Программы для создания дизайна

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

Figma

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

Доступный функционал:

• рисование макетов;
• сборка интерактивных компонентов;
• анимирование переходов;
• проектирование CJM;
• создание векторных иконок, баннеров и презентаций.

Adobe Illustrator

‌‌Adobe Illustrator — программа для создания и редактирования векторной графики, то есть изображений, состоящих из точек, линий и кривых. Главное преимущество векторной графики в том, что как ни растягивай готовое изображение — оно сохранится четким в любом масштабе. В Adobe Illustrator можно сделать векторным текст и редактировать дальше как графический объект. Создавать иконки и иллюстрации здесь удобнее, чем в Figma, благодаря комфортной работе с кривыми Безье.

Photoshop

Photoshop‌‌‌‌ — редактор растровых, то есть пиксельных изображений. Он имеет широкий набор функций для работы с цветом и изображениями и может быть полезен UX/UI-дизайнерам цветокоррекцией картинок или вырезанием объектов с фона.

Курс «Дизайнер: старт в профессии»

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

Попробовать бесплатно 💥

Программы для анимации и прототипирования

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

Principle

Principle — инструмент для прототипирования мобильных приложений и веб-сайтов, который позволяет создать анимацию элементов пользовательского интерфейса и генерировать интерактивный прототип. В программу входит iOS-приложение для тестирования прототипа на вашем девайсе. Единственный минус — работает только на macOS.‌‌‌‌

ProtoPie

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

Adobe After Effects

Adobe After Effects — еще один хороший инструмент для прототипирования, с помощью которого можно создать шоурил, то есть показать, как будет выглядеть взаимодействие пользователя с интерфейсом. В этой программе больше возможностей для сложной анимации. Например, можно добавить вращающийся 3D-объект или оживить анимацию и логотип.

Доступный функционал:

• создание анимации кнопок, переходов между экранами, появления и исчезновения элементов;
• цветокоррекция, смешение, масштабирование, искажение;
• интеграция с другими инструментами Adobe;
• добавление трехмерных объектов, освещения и теней;
• создание гладких переходов и эффектов.

Программы для подбора цветов и палитры

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

Color Hunt

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

Adobe Color CC

А в веб-инструменте Adobe Color CC‌‌ можно сразу выбрать основной цвет на круге или ввести его код вручную. Также можно применить правило гармонии цветов и выбрать из нескольких вариантов: последовательное, монохромное, комплементарное и многие другие сочетания. Особенностью сервиса является возможность проверки контрастности и сочетания фона, текста и графики, что очень важно для доступного дизайна интерфейсов.

POLINE

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

Профессия «UX/UI-дизайнер Plus»

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

Освоить профессию!

Программы для проектирования сайтов

Tilda

Tilda — онлайн-конструктор, с помощью которого можно создать сайт компании, промостраницу мероприятия, интернет-магазин, личное портфолио или блог. Платформа уже предлагает готовые модульные системы блоков, с которых вы можете начать собирать сайты, а также функцию Zero Block, чтобы спроектировать все самостоятельно. Интеграция с другими CMS помогает быстрее удовлетворить запросы бизнеса.

Webflow

‌‌Webflow — конструктор, который позволяет создавать веб-сайты без участия разработчика. Его активно используют многие зарубежные компании — от DHL до Netflix — из-за гибкой верстки и возможности решать задачи быстрее и проще. В Webflow дизайнер может работать напрямую с CSS/HTML, создавать компоненты и легко масштабировать количество лендингов, страниц с сохранением преемственности стилей.

Readymag

Readymag‌‌‌‌ — еще один инструмент, который позволяет создавать мультимедийные проекты в вебе без участия разработчиков. В Readymag можно проектировать лендинги, сайты, презентации, онлайн-портфолио. Он также подходит для экспериментальных проектов, когда времени мало, а акцент поставлен на дизайне.

Программы для тестирования

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

Maze

Maze — хороший инструмент для быстрого тестирования прототипов, A/B-тестирования и проверки концепций и идей. А еще он помогает рассчитывать количественные показатели. Например, коэффициенты ошибок при нажатии, коэффициенты успеха и тепловые карты страниц.

UsabilityHub

UsabilityHub — еще один интуитивно понятный инструмент для UX-тестирования прототипов. Можно выбрать из шести типов тестирования и получить результаты с помощью тепловых карт, теста первого клика, карточного теста, посмотреть путь пользователей и временные шкалы.

Useberry

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

UserReport

UserReport — еще один веб-сервис, который помогает узнавать больше о ваших пользователях и общаться с ними. Он работает как часть вашего веб-сайта или приложения и основан на двух простых функциях — опросах и отзывах. Большое преимущество инструмента в том, что у него есть интеграция с Google Analytics.

Программы для работы в команде

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

Slack

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

Discord

‌‌Discord — бесплатный мессенджер, который позволяет общаться с командой в голосовом, видео или текстовом чате. Он также дает возможность делиться экраном.

Jira

‌‌Jira — таск-трекер, который помогает следить за работой над проектом сразу всей команде. В нем можно планировать спринты, формировать бэклог продукта и присваивать задачам разную степень важности. А еще можно поставить напоминание о дедлайне на электронную почту.

Trello

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

Google Meet

Google Meet — инструмент для видеоконференций с командой. Он позволяет проводить онлайн-встречи с командой в режиме реального времени. А еще он интегрирован с другими инструментами Google, например Google Calendar. Это поможет не пропустить встречу и существенно облегчает организацию. ‌

Zoom

Zoom — популярный инструмент для общения с командой и заказчиками. У сервиса есть базовый тариф — можно организовать видеоконференцию до 100 человек, но ее длительность будет всего 40 минут. Если этого мало, то лучше перейти на платный тариф, либо перезапускать конференцию через каждые 40 минут.‌‌‌‌

Гайд по созданию детских цифровых продуктов

Вместе с экспертом по детским приложениям Людой Сеньшовой собрали главные принципы детского UX

Точка зренияАнна Ибрагимова

Как разобраться в программах

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

Анна Ибрагимова

Редакторка направлений «UX/UI-дизайн» и «Менеджмент»