UX/UI-дизайнер (дизайнер интерфейсов), или Чем отличается UX-дизайнер от UI-дизайнера

У любых технических устройств, которые управляются программами, есть интерфейсы. Через них пользователь получает доступ к функциям и самого сложного цифрового оборудования, и простенького приложения на смартфоне. Эту «панель» взаимодействия с компьютерной системой проектируют UX и UI дизайнеры, но все чаще роль «творца» пользовательского интерфейса исполняет универсал – UX/UI-дизайнер. Кстати, недавно центр профориентации ПрофГид разработал точный тест на профориентацию, который сам расскажет, какие профессии вам подходят, даст заключение о вашем типе личности и интеллекте.

Дизайн интерфейсов: что это? 

Тест: Кем стать: UX или UI дизайнером?
UX/UI-дизайн (от англоязычных терминов user experience – «пользовательский опыт» и user interface – «пользовательский интерфейс») – это создание интерфейсов приложений и сайтов. UX/UI-дизайнеры отвечают за юзабилити (простоту и удобство использования) любого цифрового продукта. Они продумывают и проектируют, как пользователь будет взаимодействовать с приложением, сайтом, интернет-сервисом, и решают, каким будет внешний вид продукта.

UX ≠ UI

UX («юикс») и UI («юай») – это разные направления:

• UX-дизайнер разрабатывает логику действий пользователя так, чтобы он достиг цели самым простым и быстрым способом (то, что называется «в один клик»). Говоря профессиональным языком, он проектирует информационную архитектуру продукта: планирует, куда попадет пользователь, нажав на кнопку на интерфейсе. Фактически UX-дизайнер создает каркас (или «фундамент с несущими стенами») продукта. В отличие от frontend-разработчика, UX-дизайнеру не надо знать код, потому что он не программирует интерфейс – его задача состоит в том, чтобы продумать, как будут связаны между собой разные части приложения или сайта.

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

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

Гармония UX и UI нужна любому интерфейсу, но на разных типах проектов значимость структуры (UX) и внешней оболочки (UI) не одинакова:

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

UX + UI = UX/UI, или дизайн интерфейса

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

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

UX-дизайнер:

• делает прототип продукта с учетом полученных от заказчика сведений о целевой аудитории (продумывает архитектуру, создает вайрфрейм – отрисовывает схему структуры в целом и каждой страницы, визуализирует идею).

UI-дизайнер:

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

На этапе тестирования прототипа UX- и UI-дизайнер работают вместе, чтобы устранить недочеты, если они обнаружатся. По сути, UI – это инструмент визуального оформления идей UX-дизайнера, поэтому все чаще эти две специализации объединяются, и «юиксеру» нужны навыки «юайера».

UX – это логика, UI – визуал.

Рабочие задачи UX- и UI-дизайнера

Критерии сравнения	UX-дизайнер	UI-дизайнер
Что делает	·         Изучает бизнес-задачу, которую должен решить продукт. ·         Вникает в предметную область, для которой он создается. ·         Анализирует целевую аудиторию, которая будет им пользоваться. ·         Создает прототип. ·         Тестирует его (коридорное и AB-тестирование, юзабилити-исследования)	·         Оформляет прототип пользовательского интерфейса – доводит его до полной готовности. ·         Создает руководство по стилю (библиотеки шаблонов и элементов с описанием, каким должен быть каждый компонент дизайна (цвет, шрифт и т. д.). ·         Адаптирует макет к разным устройствам и платформам. ·         Разрабатывает интерактивные элементы
С чем работает	Структура цифрового продукта (как он работает)	Оболочка цифрового продукта (как он выглядит)
Инструменты	·         XMind, FlowMapp и аналоги – для визуализации результатов аналитики, создания портрета пользователя. ·         Wireframe, Miro, Canvanizer и др. – для моделирования пользовательских путей. ·         Figma, InVision Studio, Axure, Balsamiq, Sketch, Lunacy, Adobe XD и др. – для создания прототипа. ·         Framer, Marvel, Proto.io – для прототипирования и тестирования	·         Adobe Photoshop, Photoshop Lightroom, After Effects, Sketch – для отрисовки изображений, обработки фото, визуализации анимации. ·         ColorHexa, Flat UI Color, Paletton – для работы с цветом. ·         Google fonts, Fontjoy, Typekit – для подбора шрифтов. ·         Flaticon.com, Icons8, Free Icon Maker и др. – создание и редактирование иконок

 

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