курс английского для дизайнеров в подарок +1 навык для начинающих путь в дизайне

Кто такой UX/UI-дизайнер

Кто такой UX/UI-дизайнер
8 августа, 2023
14 мин

UX/UI-дизайнер — это специалист, который создает удобные пользовательские интерфейсы. В этой статье мы простыми словами объясняем, какие задачи у него есть и как зарабатывать в этой сфере. Деталями профессии поделилась Кристина Мартыновская, UX-researcher международного стартапа и эксперт курса «Профессия UX/UI-дизайнер с нуля до про».

UX/UI-дизайнер — кто это

UX/UI-дизайнер — это универсальный специалист, который одновременно может специализироваться на направлениях UX и UI. Но иногда эти задачи выполняют два разных человека: UI-дизайнер и UX-дизайнер .

Кто такой UI-дизайнер

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

Задачи UI-дизайнера включают:

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

Кто такой UX-дизайнер

UX-дизайнер (user experience) — это специалист по созданию пользовательского опыта на веб-сайтах, в приложениях и других цифровых продуктах. Для этого он проводит исследования, анализирует потребности пользователей, создает прототипы и тестирует их на нескольких аудиториях. Цель UX-дизайнера — создать продукт, который прост в использовании, понятен и решает их проблемы целевой аудитории.

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

В чем разница между UX- и UI-дизайном

UX-дизайн изучает поведенческие особенности человека. Специалисты исследуют пользователей, проводят с ними интервью, опросы и юзабилити-тестирования. Также они собирают документы, которые будут описывать User Flow, то есть пользовательский путь, и помогают менеджерам собирать Customer Journey Map (CJM) — карту клиентского пути.

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

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

UX-дизайнерUI-дизайнер
Описаниепроектирует пользовательский опытсоздает визуальную концепцию сервиса 
Навыкиизучение поведенческих особенностей пользователей, разработка прототипов, проведение тестов и исследований, анализ данных после тестирования и опросов пользователей, составление технических заданий для UI-дизайнеровумение работать с иллюстрациями, шрифтами и элементами взаимодействия — кнопками, иконками, анимацией
Инструментыаналитика, структуратипографика, иллюстрации, работа с цветом
Целирешить проблемы пользователейсделать удобный и приятный дизайн

Где используют UX и UI

В диджитал-направлении UX и UI используется везде:

  • Вы открываете смартфон и тут же встречаетесь с UX/UI-дизайном какого-нибудь мобильного приложения.
  • Открываете на ноутбуке браузер или социальную сеть — сталкиваетесь с UX/UI-дизайном веб-сайта или соцсети.
  • Снимаете деньги в банкомате или заказываете еду в сети фастфуда через терминал — его тоже кто-то проектировал. 
  • Бортовые компьютеры в автомобилях и медиасистемы в самолетах, на которых можно выбрать треки, фильмы или играть в игры — это тоже UX/UI. 
Интерфейс сенсорного экрана в машине
Концепт дисплея в салоне Jaguar. Источник
Интерфейс платежного терминала
Концепт интерфейса платежного терминала. Источник
UX и UI дизайн в терминале заказа макдональдс
Возможность редактировать состав бургера в терминале McDonald’s. Источник

Чем UX/UI-дизайн отличается от веб-дизайна

Человек с профессией UX/UI-дизайнер может проектировать любой цифровой продукт: мобильное приложение, интерфейсы бортовых компьютеров в автомобилях, Smart TV, интерфейсы игровых приставок PlayStation или XBox, «умную» бытовую технику, вроде чайников или холодильников. Даже смарт-часы в какой-то степени относится к UX/UI, так как вы управляете контентом на сенсорном экране: читаете сообщения, видите пропущенные звонки.

Так выглядят элементы дизайна в смарт часах, отвечающие за отображение информации об активности
Интерфейс экрана на смарт-часах. Источник
UI/UX в дизайне смарт тв
Пример UX/UI-дизайна в Smart TV. Источник

Веб-дизайнер, в отличие от UX/UI-дизайнера, рисует только сайты и их мобильные версии. Для создания мобильных приложений ему нужно будет расширять свой диапазон знаний. То есть UX/UI-дизайнер обладает более широким набором компетенций, в который входят навыки веб-дизайна.

Веб-дизайнер рисует только веб-сайты и их мобильные версии
Пример лендинга от дизайн-студии INSAIM. Источник

Кому подойдет работа UX/UI-дизайнера

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

Плюсы 

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

Минусы

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

Еще дизайнеру интерфейсов (UX/UI) придется постоянно учиться. Нужно держать руку на пульсе, следить за тем, как комбинируются и меняются методологии, модные течения и актуальные тренды. Здесь каждый сам для себя должен решить — плюс это или минус.

Чем занимается UX/UI-дизайнер

Чем занимаются UX/UI-дизайнеры? В самом начале работы над продуктом появляется идея, затем прорабатывается путь пользователя (User Flow), появляется эскиз, дизайн-концепция и компоненты UI, а потом создается прототип. Давайте разберем каждый этап по порядку и выясним, в чем на каждом из них обязанности UX/UI-дизайнера.

User Flow

У интерфейса может быть много сценариев. Любой из них может вписываться в User Flow — пользовательский путь: то, по какому маршруту пользователь идет по продукту, как в него заходит, с какими проблемами сталкивается и как выходит из продукта. Этот путь можно описать словами, блок-схемой или детализированными картинками в прототипе.  

Например, так выглядит User Flow пользователя, который хочет вызывать такси:

  1. На мобильном телефоне он находит иконку приложения такси и нажимает на нее.
  2. Затем выбирает, куда ему нужно поехать. 
  3. Вызывает такси.
  4. Выходит на улицу, садится в такси. В этот момент он не взаимодействует с приложением. 
  5. Когда пользователь доехал до нужного места, с него снимается оплата, он видит push-уведомление об этом.
  6. Потом, например, он может поставить оценку водителю (а может не поставить).
  7. Потом пользователь закрывает приложение до следующего случая, когда ему понадобится вызвать такси. 

User Flow также можно визуализировать. Например, так выглядит путь пользователя в сервисе с подпиской на лекции:

User Flow (путь пользователя) пример
Источник

Эскиз

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

Эскиз сайта, схематично указаны блоки, где будут расположены элементы
Эскиз сайта для фотографа ― блоки показаны схематично, но уже понятно, как будут расположены элементы. Источник

Дизайн-концепция 

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

  • Если сайт маленький, достаточно будет сделать UI Kit — набор готовых элементов для дизайна интерфейса: шрифтов, иконок, форм и других элементов сайта или приложения.
  • Если сайт большой, для него нужна дизайн-система. Она создается в отдельном пространстве в Figma и раскатывается на весь продукт — так все изменения, которые в ней есть, применяются ко всему продукту.
UI Kit
UI Kit сервиса для покупки билетов в кино. Источник

Компоненты UI

UI-дизайнеры работают с цветом, типографикой, иконками, картинками. Работы с типографикой в мобильном приложении немного, потому что есть конкретные шрифты, которые зашиты в операционную систему:

  • для сервисов на Android используют Roboto;
  • для iOS используется шрифт San Francisco.

Поэтому в приложении можно менять в основном размеры и начертания шрифтов. 

Шрифт San Francisco на официальном сайте Apple
Шрифт San Francisco от Apple. Источник

С цветовой палитрой удобнее работать с помощью специальных сервисов, например, ColorScheme или Material Design от Google: с их помощью можно подобрать основной и комплементарный цвета для приложения.

Главная страница сервиса ColorScheme
Главная страница сервиса ColorScheme

Иконки для прототипа можно выбрать в любом подходящем стиле: нарисованные от руки, плоские, объемные, абстрактные. Их можно найти на стоках и доработать или отрисовать с нуля.

Прототип

Анимированный Wireframe — это прототип. Для его разработки дизайнер собирает информацию с заказчиков и продакт-менеджера. После этого начинает проводить исследование: смотрит, какие наработки внутри продукта уже есть, какие статьи с похожими исследованиями выпущены на эту тему.

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

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

Прототип приложения в Figma
Прототип приложения в Figma

Требования к качественному UX/UI-дизайну в 2023 году

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

  • Ясность ― нет двусмысленности, все части продукта решают задачи пользователя или направляют его.
  • Лаконичность ― сервис не перегружен лишними элементами.
  • Узнаваемость элементов ― например, галочка для подтверждения будет зеленого цвета, а крестик для отмены — красного.
  • Отзывчивость ― быстрая реакция интерфейса на действия пользователя.
  • Постоянство ― элементы должны вести себя одинаково на каждой странице продукта.
  • Эстетика ― интерфейс должен быть привлекательным, но не отвлекать от решения задач.
  • Эффективность ― пользователь сделает минимум действий прежде, чем попадет в нужный раздел.
  • Забота ― вежливые сообщения в случае ошибки или сбоя повышают лояльность пользователя.

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

Приложение для учеников Хогвартса дизайн
Прототип приложения для учеников хогвартса иконки
Прототип приложения для Хогвартса. Источник

Тренды и перспективы UX/UI-дизайнеров в 2023 году и что с ними делать

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

Пока компании пытаются оптимизировать бюджет, они стараются нанимать UX/UI-дизайнера, который обладает большим набором скилов:

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

Сейчас ценятся дизайнеры, у которых есть навыки не только в UX/UI, но других областях: маркетинге или разработке, это большой плюс. Джунам я советую параллельно изучать несколько смежных специальностей: копирайтинг, иллюстрации, моушн и графический дизайн ― хотя бы поверхностно. Именно на таких T-shaped специалистов сейчас может быть высокий спрос.

Что почитать по UX/UI

«На крючке. Как создавать продукты, формирующие привычки», Нир Эяль

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

«100 главных принципов дизайна. Как удержать внимание», Сьюзан Уэйншенк

Еще одна книга про способы привлечения внимания. Автор собрала результаты исследований поведения пользователей и показала на множестве примеров.

«Refactoring UI», Adam Wathan, Steve Schoger

Книга дизайнера и разработчика рассказывает  с разных точек зрения о том, как создавать интерфейс. Книга полезна, если не хватает конкретики и примеров в теории дизайна.

«Дизайн привычных вещей», Дональд А. Норман

Автор книги, бывший вице-президент Apple, рассказывает об успешных кейсах и истории провалов создания вещей.

«UX-дизайн. Практическое руководство по проектированию опыта взаимодействия», Расс Унгер, Кэролайн Чендлер

Авторы описывают навыки UX-проектировщиков и дают пошаговые инструкции на каждом этапе работы.

«Эмоциональный веб-дизайн», Аарон Уолтер

Автор дает рекомендации и примеры, как завоевать сердца клиентов с помощью дизайна.

Сколько в 2023 году зарабатывают UX/UI-дизайнеры 

Все индивидуально: в агентствах, например, платят меньше, чем в компаниях, которые занимаются конкретным продуктом. Но средние зарплаты UX/UI-дизайнера на HeadHunter, Хабр.Карьере и Careerspace примерно такие:

  • джуниор-дизайнеры получают от 50 тыс. до 80 тыс. рублей в месяц;
  • мидл-специалисты могут рассчитывать на ставку от 70 тыс. до 120 тыс. рублей в месяц;
  • сеньоры получают от 150 тыс. до 180 тыс. рублей в месяц;
  • тимлиды получают до 260 тыс. рублей в месяц.

Есть лайфхак для тех, кто планирует работать на фрилансе. Предлагайте заказчикам почасовую оплату, потому что у сдельной работы есть минус ― это количество неоплачиваемых правок. Например, вы оцениваете стоимость разработки сайта в 50 тысяч рублей. За время работы над ним вам придет 50 000 правок. В итоге вы потратите на работу гораздо больше времени, чем планировали.

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

  • Услуги сеньор-дизайнера могут стоить от $70 в час
  • Услуги мидл-дизайнера ― от $40 в час
  • Джуниор-специалисты берут за работу от $10 в час.

Но такую ставку получают специалисты без глубокого погружения. Вы сможете набрать себе клиентскую базу и хорошие отзывы, и назначать цену выше.

Где искать клиентов начинающим UI/UX-дизайнерам

  • Соглашайтесь на стажировки — любые, даже бесплатные. За два-три месяца практики у вас появится коммерческий опыт работы в продукте, который вы смело сможете указывать в резюме. Если на стажировке вы хорошо поработаете, то сможете остаться в проекте и постепенно дорасти даже до уровня сеньор.
  • Первые заказы можно найти на биржах: Fiverr, Upwork, Freelance Job и FL.ru.
  • На «Хабр.Карьера» и hh.ru тоже можно найти вакансии с проектной занятостью или подработку.

Как развивать карьеру и куда расти UI/UX-дизайнеру в 2023 году

В дизайне стандартные грейды: джуниор, мидл, сеньор и тимлид. Если хочется занимать руководящую должность, можно развить навыки до подиций Design Lead, Head of Design или перейти на позицию проджект- или продакт-менеджера. 

Если изучите верстку, HTML, CSS и подтянете знание JavaScript, то можете уйти во фронтенд-разработку. Еще можно научиться рисовать и применять в дизайне иллюстраторские навыки. А можно занять узкую нишу и стать UX-исследователем. 

Медиа Contented

Читайте также

Подпишитесь сейчас на нашу рассылку

Мы присылаем отличные материалы и никогда не спамим. Отписаться можно в любой момент