UX/UI-дизайнер проектирует удобные, понятные и эстетичные пользовательские интерфейсы. Банковские приложения, маркетплейсы, социальные сети — все эти продукты во многом мы любим благодаря его работе. Для этого специалисту нужны различные программы по работе с интерфейсами, прототипированием, тестированием и общению с командой.
В этой статье мы расскажем об основных программах, которые нужны как начинающим, так и опытным UX/UI-дизайнерам.
Работа над цифровым продуктом начинается с исследований, анализа конкурентов и общения с пользователями. Иногда это большие объемы текста, расшифровки интервью и просто идеи о разработке продукта.
Notion
Логотип Notion
Notion — приложение, которое позволяет систематизировать информацию и хранить ее в одном месте. В этом году инструмент открыл доступ к набору функций искусственного интеллекта. Чтобы включить ИИ-помощника, достаточно нажать пробел на новой строчке и написать запрос в появившемся окне.
Miro — интерактивная доска для совместной работы в команде. Здесь же можно проводить мозговые штурмы и придумывать новые пути решения. Удобна для построения интерактивной карты путей клиента и выявления пробелов в пользовательском опыте.
Доступный функционал:
размещение файлов;
создание стикеров и пометок;
обмен комментариями.
💰
Базовый функционал — бесплатно. Тариф с неограниченным количеством досок — $8 с иностранной карты.
FigJam — интерактивная доска для UX-дизайнеров от Figma, главного инструмента продуктового дизайнера, о котором мы еще расскажем. Она была создана специально для дизайнеров, чтобы они придумывали идеи и проводили мозговые штурмы со всей командой. Главное преимущество сервиса: в отличие от похожих приложений, FigJam без проблем работает с Figma, поэтому можно хранить весь проект в одном месте — от первоначальной концепции до готового прототипа.
Доступный функционал:
фигуры и стрелки для проектирования юзерфлоу и построения новых процессов;
стикеры и смайлики для мозгового штурма с командой;
инструменты для скетчей и быстрого прототипирования;
обмен комментариями и общение голосом.
💰
Базовый функционал — бесплатно. Тариф с неограниченным количеством файлов — $3 с иностранной карты.
Воплощаем креативные идеи, проявляем творческую состоятельность, повышаем производительность и улучшаем качество работы.
Figma
Логотип Figma
Figma — онлайн-сервис для создания прототипов сайтов и приложений с доступным интерфейсом и возможностью совместно работать над проектом. Сейчас это один из самых популярных инструментов у UX-дизайнеров, поэтому уверенного знания интерфейса и навыков в Figma будет достаточно для полноценной работы.
Доступный функционал:
рисование макетов;
сборка интерактивных компонентов;
анимирование переходов;
проектирование CJM;
создание векторных иконок, баннеров и презентаций.
💰
Базовый функционал — бесплатно. Тариф с неограниченным количеством файлов — $12 с иностранной карты.
Adobe Illustrator — программа для создания и редактирования векторной графики, то есть изображений, состоящих из точек, линий и кривых. Главное преимущество векторной графики в том, что как ни растягивай готовое изображение — оно сохранится четким в любом масштабе. В Adobe Illustrator можно сделать векторным текст и редактировать дальше как графический объект. Создавать иконки и иллюстрации здесь удобнее, чем в Figma, благодаря комфортной работе с кривыми Безье.
💰
Первые 30 дней — бесплатно. Далее — $20.99 с иностранной карты.
Photoshop — редактор растровых, то есть пиксельных изображений. Он имеет широкий набор функций для работы с цветом и изображениями и может быть полезен UX/UI-дизайнерам цветокоррекцией картинок или вырезанием объектов с фона.
💰
Первые 30 дней — бесплатно. Далее — $20.99 с иностранной карты.
Превращаем абстрактные идеи в визуальные концепции, чтобы понять, как будет взаимодействовать пользователь с продуктом или сервисом.
Principle
Логотип Principle
Principle — инструмент для прототипирования мобильных приложений и веб-сайтов, который позволяет создать анимацию элементов пользовательского интерфейса и генерировать интерактивный прототип. В программу входит iOS-приложение для тестирования прототипа на вашем девайсе. Единственный минус — работает только на macOS.
Программа ProtoPie также подходит для создания интерактивных прототипов и анимаций для мобильных приложений и сайтов. В ней можно показать дизайн-макет интерфейса сразу команде проекта и клиенту. Программа имеет инструменты для тестирования прототипов в браузерах, а также на популярных мобильных устройствах. Особенность ProtoPie в использовании в прототипе большинства функций смартфона: микрофон, камера, распознавание силы нажатия на экран, гироскоп и акселерометр. Это дает больше возможностей для проработки прототипов.
Adobe After Effects — еще один хороший инструмент для прототипирования, с помощью которого можно создать шоурил, то есть показать, как будет выглядеть взаимодействие пользователя с интерфейсом. В этой программе больше возможностей для сложной анимации. Например, можно добавить вращающийся 3D-объект или оживить анимацию и логотип.
Доступный функционал:
создание анимации кнопок, переходов между экранами, появления и исчезновения элементов;
Цвета влияют на эмоции и поведение пользователей, поэтому работа с цветом — один из главных инструментов в дизайне. Чтобы работа проходила быстрее и качественнее, можно обратиться к специальным сервисам с готовыми палитрами и функцией подбора. Такие генераторы работают на основе 12 цветов на цветовом круге и помогают создавать гармоничное сочетание.
Color HuntЛоготип Color Hunt
Инструмент Color Hunt предлагает огромную библиотеку уже готовых палитр, что поможет дизайнеру вдохновиться или понять, какие цветовые схемы в принципе бывают.
А в веб-инструменте Adobe Color CC можно сразу выбрать основной цвет на круге или ввести его код вручную. Также можно применить правило гармонии цветов и выбрать из нескольких вариантов: последовательное, монохромное, комплементарное и многие другие сочетания. Особенностью сервиса является возможность проверки контрастности и сочетания фона, текста и графики, что очень важно для доступного дизайна интерфейсов.
Самое интересное в сервисе POLINE кроется в механике взаимодействия с ним. Палитра создается путем рисования линии между опорными точками. Чем больше точек вы выбираете, тем больше цветов генерируется. POLINE предлагает немного «поколдовать», шаг за шагом настраивая количество опорных точек, дуги, оттенки и математические функции линии прямо на цветовом круге.
Tilda — онлайн-конструктор, с помощью которого можно создать сайт компании, промостраницу мероприятия, интернет-магазин, личное портфолио или блог. Платформа уже предлагает готовые модульные системы блоков, с которых вы можете начать собирать сайты, а также функцию Zero Block, чтобы спроектировать все самостоятельно. Интеграция с другими CMS помогает быстрее удовлетворить запросы бизнеса.
💰
Базовый функционал — бесплатно. Расширенный тариф — 750 рублей при ежемесячной оплате.
Webflow — конструктор, который позволяет создавать веб-сайты без участия разработчика. Его активно используют многие зарубежные компании — от DHL до Netflix — из-за гибкой верстки и возможности решать задачи быстрее и проще. В Webflow дизайнер может работать напрямую с CSS/HTML, создавать компоненты и легко масштабировать количество лендингов, страниц с сохранением преемственности стилей.
💰
Базовый тариф — бесплатно. Расширенные тарифы — от $14 при ежемесячной оплате.
Readymag — еще один инструмент, который позволяет создавать мультимедийные проекты в вебе без участия разработчиков. В Readymag можно проектировать лендинги, сайты, презентации, онлайн-портфолио. Он также подходит для экспериментальных проектов, когда времени мало, а акцент поставлен на дизайне.
💰
Базовый тариф — бесплатно. Расширенные тарифы — от $13.5 при ежемесячной оплате.
После того как готов сайт или мобильное приложение, его необходимо протестировать на пользователях. Чем раньше вы это сделаете, тем лучше, ведь как раз на этапе MVP можно понять, что нужно улучшить.
Maze
Логотип Maze
Maze — хороший инструмент для быстрого тестирования прототипов, A/B-тестирования и проверки концепций и идей. А еще он помогает рассчитывать количественные показатели. Например, коэффициенты ошибок при нажатии, коэффициенты успеха и тепловые карты страниц.
💰
Базовый тариф — бесплатно. Расширенные тарифы — от $99 при ежемесячной оплате.
UsabilityHub — еще один интуитивно понятный инструмент для UX-тестирования прототипов. Можно выбрать из шести типов тестирования и получить результаты с помощью тепловых карт, теста первого клика, карточного теста, посмотреть путь пользователей и временные шкалы.
💰
Базовый тариф — бесплатно. Расширенные тарифы — от $89 при ежемесячной оплате.
Инструмент Useberry помогает принимать проверенные пользователями решения на протяжении всего жизненного цикла разработки продукта. У него есть девятнадцать типов тестирования: тепловые карты кликов, пути пользователей, временные шкалы, временные метки кликов и многое другое. Таким образом, на разных этапах продукта можно протестировать разные функции.
💰
Базовый тариф — бесплатно. Расширенный тариф — $67 в месяц.
UserReport — еще один веб-сервис, который помогает узнавать больше о ваших пользователях и общаться с ними. Он работает как часть вашего веб-сайта или приложения и основан на двух простых функциях — опросах и отзывах. Большое преимущество инструмента в том, что у него есть интеграция с Google Analytics.
Повышаем производительность благодаря эффективной коммуникации, координации и слаженности.
Slack
Логотип Slack
Slack — корпоративный мессенджер с понятным интерфейсом, который чаще всего используется для общения внутри команды. В нем можно создавать каналы для разных задач, обмениваться файлами, текстовыми и голосовыми сообщениями.
💰
Базовый тариф — бесплатно. Расширенные тарифы — от $6.75 при ежемесячной оплате.
Discord — бесплатный мессенджер, который позволяет общаться с командой в голосовом, видео или текстовом чате. Он также дает возможность делиться экраном.
💰
Базовый тариф — бесплатно. Расширенный тариф — от $4.99 при ежемесячной оплате.
Jira — таск-трекер, который помогает следить за работой над проектом сразу всей команде. В нем можно планировать спринты, формировать бэклог продукта и присваивать задачам разную степень важности. А еще можно поставить напоминание о дедлайне на электронную почту.
💰
Базовый тариф — бесплатно. Расширенные тарифы — от $7.75 при ежемесячной оплате.
Trello — еще один хороший инструмент для управления проектами и командной работы. Его главное преимущество — очень простой и понятный интерфейс, который построен на основе канбан-досок, разделенных на маленькие карточки с задачами.
💰
Базовый тариф — бесплатно. Расширенные тарифы — от $5 при ежемесячной оплате.
Google Meet — инструмент для видеоконференций с командой. Он позволяет проводить онлайн-встречи с командой в режиме реального времени. А еще он интегрирован с другими инструментами Google, например Google Calendar. Это поможет не пропустить встречу и существенно облегчает организацию.
💰
Базовый тариф — бесплатно. Расширенные тарифы — от $6 при ежемесячной оплате.
Zoom — популярный инструмент для общения с командой и заказчиками. У сервиса есть базовый тариф — можно организовать видеоконференцию до 100 человек, но ее длительность будет всего 40 минут. Если этого мало, то лучше перейти на платный тариф, либо перезапускать конференцию через каждые 40 минут.
💰
Базовый тариф — бесплатно. Расширенные тарифы — от $15.99 при ежемесячной оплате.
Функционал многих программ практически идентичный, поэтому для начала лучше освоить те, что закроют актуальные для вас задачи. Как мы уже писали ранее, у большинства программ понятный интерфейс, но если у вас останутся вопросы, то вы всегда можете посмотреть туториалы.
⚫
В школе Bang Bang Education можно научиться пользоваться всеми необходимыми программами и стать UX/UI-дизайнером за год. На курсе «UX/UI-дизайнер» вы научитесь проектировать удобные интерфейсы для сайтов и мобильных приложений и подготовите портфолио из 5 проектов, а на расширенной программе «UX/UI-дизайнер Plus» пройдете онлайн-стажировку в IT-компании и увеличите шансы найти работу сразу после обучения.
Курс «UX/UI-дизайнер»
Научитесь проектировать удобные интерфейсы для сайтов и мобильных приложений. Освоите Figma, Tilda, Webflow и подготовите портфолио из 5 проектов.