Содержание
UX-дизайнер проектирует путь пользователя, UI-специалист создаёт удобный интерфейс, веб-дизайнер объединяет оба направления. Разбираемся, в чём разница и кто какие задачи решает.
В чем разница между веб-, UX- и UI‑дизайном
Основная разница между веб, UX- и UI-дизайнерами — в зоне ответственности и специализации. UX-дизайнер отвечает за User Experience (с англ. «пользовательский опыт») и юзабилити, UI-дизайнер — за User Interface (с англ. «пользовательский интерфейс»), то есть визуальное представление. А веб-дизайнер создаёт веб-приложения, учитывая оба эти направления.
Можно сказать, что веб-дизайнер — это универсальный специалист, который разбирается в нескольких областях, а UX- и UI-дизайнеры — специалисты более узкого профиля. Если обобщить, UI — это визуал, а UX — удобство использования продукта.
Рассматривать веб-, UX- и UI-дизайн в отрыве друг от друга некорректно: каждая область притягивает части другой и использует их результаты, чтобы в итоге создать удобный сайтЕсли представить, что продукт — это коттедж, то UX-дизайнер будет проектировать количество и расположение комнат, UI-дизайнер — решать, из каких материалов, какого цвета и формы будут стены, потолок, крыша и крыльцо, а веб-дизайнер будет главным архитектором, который отвечает за проект в целом.
В отличие от UX- и UI-дизайнеров, веб-дизайнер должен разбираться в нескольких сферах. Не только проектировать пользовательский опыт и знать основы юзабилити, композиции, типографики и колористики, но и уметь ставить задачи верстальщикам, знать, как провести тестирование и улучшить конверсию сайта. По сравнению с веб-дизайнером, UX- и UI-дизайнеры — более молодые специальности, отделившиеся от изначально единого направления.
Чтобы сделать качественный сайт для производителя рабочих перчаток, нужно разобраться, какие проблемы волнуют его клиентов. Источник: bronitex
Сегодня различия между тремя областями стираются: каждому из рассматриваемых специалистов приходится продумывать взаимодействие пользователя с продуктом. Разница остаётся в плане творчества: веб-дизайнер более креативная специальность, чем UI/UX-дизайнер.
Часто UX и UI-задачи на небольших проектах выполняет один специалист, его называют UX/UI-дизайнер. Он исследует продукт с точки зрения пользовательского опыта, создаёт прототипы и отрисовывает детали интерфейса.
На популярном сайте поиска работы сейчас ищут 635 UX/UI-дизайнеров. Источник: hh
В вакансиях можно встретить варианты «Web-дизайнер UX/UI» или «продуктовый дизайнер» — работодатели не всегда разделяют смежные области дизайна, поэтому при поиске работы стоит пробовать разные сочетания и смотреть на описания конкретных задач.
Научиться создавать макеты для сайтов и сервисов любой сложности можно на курсе «Веб-дизайнер». За девять месяцев обучения студенты осваивают нюансы работы с Figma, Adobe Photoshop, Tilda, учаться разбираться в вёрстке сайтов и веб-приложений.
Станьте веб-дизайнером с нуля за 9 месяцев
Освоите Figma, Adobe Photoshop и Tilda, сделаете 6 проектов для портфолио и найдете первых заказчиков сразу после курса.Начать учиться бесплатно
Принципы веб‑дизайна
Любое рисование продукта включает в себя исследовательскую и интерфейсно-ориентированную части, поэтому разделять принципы веб-, UX- и UI-дизайна — то же самое, что отдельно описывать передние и задние ноги скаковой лошади.
Хороший дизайн решает проблемы бизнеса и его клиентов. Красивый сайт вызывает интерес в первые несколько секунд, но, если пользователь не понимает, как ему купить билеты, записаться к врачу или отправить заявление, пользы от красоты немного.
Использование масок в полях ввода упрощает задачу пользователя. Источник: pochta
Чтобы создать качественный, красивый и удобный дизайн, достаточно помнить про десять эвристик юзабилити Якоба Нильсена — это правила, которые помогают создать понятный и отзывчивый продукт
Фундамент, на котором базируется веб-дизайн
Принципы UI/UX-дизайна
Принципы UI/UX-дизайна подробно разобрал Стив Круг в бестселлере «Не заставляйте меня думать. Веб-юзабилити и здравый смысл». Кратко сформулируем основные:
● Подстраивать дизайн под человека, а не человека под дизайн. Например, расположенную над строкой ввода подсказку пользователь при наборе не будет закрывать рукой.
● Использовать память системы, а не пользователя. Большие объемы информации, даты и сложные вычисления делегируем машине.
● Ценить усилия и данные пользователя — интерфейс должен сохранять данные, а не заставлять пользователя каждый раз вводить их заново. Например, при заказе пиццы автоматически сохранять адрес и предлагать его использовать при следующем заказе.
● Заботиться о смысле каждого экрана — каждая страница должна быть понятна сама по себе, без привязки к предыдущим и последующим.
● Давать непрерывную обратную связь — пользователь должен всегда понимать, что происходит и на каком этапе процесса он находится.
● Избегать лишних сущностей — вместо того, чтобы вводить для функции новый элемент, стоит подумать, как наделить ей уже существующий.
При передаче показаний система напоминает о важных данных: пользователю не нужно запоминать детали или искать прошлые записи для сверки. Источник: erc
Чем занимается веб-дизайнер
Веб-дизайнер — универсальный специалист, который создает дизайн веб-приложений и других визуальных представлений бренда или продукта. Стандартные задачи веб-дизайнера объединяют UX и UI. Он просматривает референсы и выясняет предпочтения целевой аудитории, прототипирует поведение пользователей и разрабатывает макеты будущего сайта. Результат работы такого специалиста может быть разным: от лендинга или баннера на главной странице до полноценного сайта.
Вот чем занимается веб-дизайнер:
● продумывает путь пользователя;
● придумывает подходящее под задачу визуальное решение;
● разрабатывает прототипы и макеты;
● создаёт анимацию, логотипы и айдентику бренда;
● адаптирует дизайн лендингов, сайтов и приложений для разных мобильных устройств.
Рекламный баннер на сайте outdoor-магазина визуализирует заманчивую картину похода. Источник: sport-marafon
Чем занимается UI-дизайнер
Главная задача UI-дизайнера — нарисовать удобный и понятный для пользователя интерфейс сайта или приложения на основе разработанных UX-дизайнером прототипов. UI-дизайнер отвечает за взаимодействие пользователя с интерфейсом: как быстро клиент сможет сориентироваться на новом для него сайте или в приложении, чтобы решить свою задачу и совершить целевое действие.
Другая важная задача — выразить эмоции бренда через визуальные составляющие продукта: шрифты, цвета, иконки и т.д.
Синий цвет ассоциируется с надёжностью и безопасностью, поэтому его часто используют в интерфейсах банки и страховые компании. Источник: vtb
Вот чем занимается UI-дизайнер:
● решает, как будет выглядеть сайт и отдельные блоки;
● отрисовывает каждый элемент интерфейса от формы регистрации или заказа до каждой кнопки и буллита;
● составляет UI-Kit — документ, который описывает все графические элементы интерфейса, типографику и цвета;
● следит за консистентностью продукта ― его стилистическим единообразием;
● заботится об адаптивности дизайна, чтобы с сайтом было одинаково удобно взаимодействовать с ноутбука и со смартфонов с разным разрешением экрана.
UI-Kit — это дизайнерская база знаний, которая помогает экономить время при работе над проектом: элементы не создаются с нуля, а копируются. Источник: designmodo
Чем занимается UX-дизайнер
Главная задача UX-дизайнера — спроектировать удачный пользовательский опыт. Интерфейс должен помогать пользователю решить его задачи: купить товар, оформить доставку, подобрать отель или страховку по нужным параметрам. Чтобы создать понятный интерфейс, нужно исследовать опыт пользователей и модели их поведения. Другая важная часть подготовки — анализ существующих на рынке продуктов, их удачных и проблемных решений, и всестороннее изучение процесса взаимодействия пользователя с продуктом.
Если в форме поиска поменять местами поля «когда» и «обратно», пользователям будет сложнее найти нужный билет. Источник: aviasales
Вот чем занимается UX-дизайнер:
● проводит UX-исследования и тестирования продукта;
● выясняет потребности целевой аудитории;
● составляет варфреймы и мокапы — макеты будущего продукта;
● составляет User Flow и User Journey Map (UJM) — карты пути пользователя внутри продукта;
● выявляет барьеры и драйверы при взаимодействии с продуктом;
● оценивает метрики и даёт рекомендации по улучшению пользовательского пути и минимизации барьеров;
● создает прототип сайта или приложения.
User Flow, или карты пользовательского пути, помогают понять, какие препятствия встретит клиент на сайте или в приложении, и устранить их до релиза продукта. Источник: figma
Совет эксперта
Александр Старинский
Если начинающему дизайнеру интереснее исследования и процесс взаимодействия пользователя с интерфейсом, стоит присмотреться к UX-дизайну. Тем, кому нравится рисовать макеты, больше подойдет UI-дизайн. Если дизайнер получает удовольствие от всего процесса, начиная с просмотра референсов и заканчивая работой в Figma, стоит попробовать себя в веб-дизайне.