UX, UI, UX/UI, Web: текст-навигация в дизайнерах

В разнообразных дизайн-профессиях иногда путаются как заказчики, так и сами начинающие специалисты. Светлана Моторкина, Head of design в Friflex, рассказывает, в чем различия между UX-дизайнером, UI-дизайнером, UX/UI-дизайнером и web-дизайнером, и почему важно разбираться в терминологии как самим дизайнерам, так и их клиентам.

В марте 2021 года мы разместили вакансию UI/UX-дизайнера на HH. Тогда нам пришло 653 отклика. Конечно, не все кандидаты подходили. Я открывала резюме со строчкой UI/UX-дизайнер и видела портфолио с кейсами лендингов и сайтов-визиток. То есть типичное портфолио классического web-дизайнера. В резюме кандидата не было навыков, связанных с пользовательским опытом, при этом он позиционировал себя как UX/UI-дизайнер.

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

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

Набор инструментов UX-дизайнера:

• Miro;
• Creative Canvas (аналог Miro);
• Axure RP;
• Figma.

Хороший UX-дизайнер умеет:

• проводить исследования: глубинные интервью, наблюдения, опросы и т.д.;
• эффективно взаимодействовать с командой и доносить до них ценность UX;
• организовывать и проводить юзабилити-тестирования;
• создавать информационную архитектуру (IA) продукта;
• проектировать user journey map и user-flow;
• уметь собирать прототипы на основе вайрфреймов.

Артефакты UX-дизайнера:

• дизайн мышление – родитель фреймворков для генерации интерфейсов;
• прорывное мышление – последовательные шаги, позволяющие найти стереотипы и преодолеть убеждения;
• стратегический воркшоп – формат командной работы с заказчиком или без для эффективного способа извлечения данных;
• прототипирование – интерактивный показ взаимодействия всех собранных экранов, используется для проверки гипотез и тестирования пользовательских сценариев;
• сплит-тестинг – А/В тестирование, метод сравнения двух вариантов с целью оценки и улучшения показателей эффективности;
• персоны – метод исследования, его цель – создание выдуманных персонажей, обладающих чертами потенциальных клиентов, на основе реальных данных исследований;
• качественные исследования – интервью, юзабилити-тестирования, наблюдения;
• количественные исследования – опросы, А/B тесты, фокус группы, сбор метрик и т.д.;
• аналитика интерфейсов – инструменты для поведенческого анализа, без которых UX-дизайнер слеп (Яндекс.Метрика, Google analytics, Flurry, AppsFlyer).

UI (user interface) – это пользовательский интерфейс. Это направление разработки отвечает за то, как выглядит цифровой продукт. UI-дизайнер создает его визуальный образ. Он помогает передать эмоции бренда через цвета, шрифты, формы, иконки и другие визуальные компоненты интерфейса. А также отвечает за то, как будет выглядеть цифровой продукт на разных носителях: обеспечивает адаптивность.

Набор инструментов UI-дизайнера:

• Figma;
• Sketch;
• Adobe XD;
• ProtoPie;
• InVision;
• Adobe After Effects.

Хороший UI-дизайнер должен:

• знать теорию цвета и основы типографики;
• уметь рисовать иконки;
• понимать, как работает интерфейс и его элементы, какие кнопки за что отвечают, уметь проектировать компоненты так, чтобы пользователь отличал их друг от друга;
• знать особенности и ограничения платформ (iOS, Android, Web);
• иметь хороший вкус и насмотренность;
• уметь создавать анимацию;
• активно взаимодействовать с разработчиками и передавать им документацию по макетам.

В современном мире UI-дизайнер встречается редко и обычно существует в крупных компаниях, где четко прописаны роли и разделены полномочия. В феврале 2022 года по Центральному федеральному округу HH выдавал всего 39 таких вакансий. Среди работодателей в основном банки и дизайн-студии.

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

За счет широкого круга компетенций такие специалисты могут претендовать на высокий оклад: UX/UI-дизайнер уровня Middle в среднем по Москве получает от 120 000 рублей.

Хороший UX/UI-дизайнер должен:

• проводить исследования: глубинные интервью, наблюдения, опросы;
• активно взаимодействовать с командой и доносить до нее ценность UX;
• организовывать и проводить юзабилити-тестирования;
• проектировать user journey map и user-flow;
• уметь собирать прототипы на основе вайрфреймов;
• знать теорию цвета и основы типографики;
• уметь рисовать иконки;
• понимать, как работает интерфейс и его элементы, какие кнопки за что отвечают;
• уметь создавать анимацию;
• эффективно взаимодействовать с разработчиками и передавать им документацию по макетам.

Web-дизайнер занимается дизайном сайтов и лендингов. Web-дизайнеры очень востребованы в студиях и отделах маркетинга крупных компаний. В феврале на HH было опубликовано 158 вакансий по направлению только по Москве.

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

Набор инструментов web-дизайнера:

• Adobe: Illustrator, Photoshop, After Effects;
• Figma;
• 3D редактор: Сinema 4d, Blender 3D;
• Tilda, Readymag или Webflow. Опытный web-дизайнер может делать дизайн сразу в No-Code сервисах.

Хороший web-дизайнер должен:

• знать теорию цвета;
• искусно владеть типографикой, в идеале иметь практический опыт создания шрифта;
• уметь рисовать иконки и иллюстрации;
• базово владеть 3D;
• базово знать HTML‚ CSS и иметь начальные навыки верстки.

Подведем итоги:

• UX-дизайнер решает вопрос функциональности и удобства интерфейса. Он разрабатывает интуитивно понятный цифровой продукт.
• UI-дизайнер работает над эмоциональным аспектом и донесением смыслов до потребителя. Он занимается графической частью интерфейса: анимацией, иллюстрациями, кнопками, меню, слайдерами, фотографиями, шрифтами.
• UX/UI-дизайнера можно охарактеризовать как специалиста с системным мышлением.
• Wеb-дизайнер выстраивает баланс между внешним видом сайта и удобством его использования.