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

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

UX/UI-дизайнер с нуля до ПРО

профессия | 16 месяцев

UX/UI-дизайнер с нуля до ПРО

Для тех, кто хочет попасть в IT без навыков программирования

5 493 ₽/мес.

8 450 ₽/мес.

пройти курс

Один человек может специализироваться сразу на двух направлениях, но иногда их разделяют.

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

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

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

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

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

Так что UX/UI-дизайнер — это универсальный специалист.

UX/UI-дизайнер с нуля до ПРО

профессия | 16 месяцев

UX/UI-дизайнер с нуля до ПРО

Для тех, кто хочет попасть в IT без навыков программирования

5 493 ₽/мес.

8 450 ₽/мес.

пройти курс

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

Что такое UX/UI? Это пользовательский опыт и пользовательский интерфейс.

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

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

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

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

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

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

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

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

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

Кому подойдет работа 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 также можно визуализировать. Например, так выглядит путь пользователя в сервисе с подпиской на лекции:

Эскиз

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

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

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

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

Компоненты UI

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

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

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

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

Иконки в приложении могут быть в самых разных стилях: рисованные, абстрактные, 3D и какие угодно еще. Можно найти их на стоках и доработать или отрисовать с нуля.

Прототип

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

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

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

UX/UI-дизайнер с нуля до ПРО

профессия

UX/UI-дизайнер с нуля до ПРО

Делайте мир удобнее. Создавайте продуманные интерфейсы сайтов и приложений без навыков программирования. IT-компании ждут вас.

научиться

Требования к качественному 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 000 до 80 000 рублей в месяц;

• мидл-специалисты могут рассчитывать на ставку от 70 000 до 120 000 рублей в месяц;

• сеньоры получают от 150 000 до 180 000 рублей в месяц;

• тимлиды получают до 260 000 рублей в месяц.

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

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

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

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

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

Во-первых, нужно захотеть им стать. Во-вторых, стоит изучить бесплатные инструменты: статьи на Medium, Хабре и vc.ru, посмотреть видео на YouTube-каналах на эту тему. Узнавать про изменения и тренды можно в Telegram, например, читать дайджесты Юрия Ветрова. 

Если действительно появился интерес к профессии, можно пройти курсы. Например, на курсе «UX/UI-дизайнер с нуля до PRO» в Contented очень широкая специализация. Мы учим всему: от работы с Figma до рисовки мобильных приложений. Я веду модуль про UX-исследования — о том, как проводить исследования, опросы, интервьюировать пользователей и сделать продукт таким, чтобы он был интересен и полезен для пользователя.

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

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

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

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

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

профессия UX/UI-дизайнер
с нуля до ПРО

16 месяцев

профессия UX/UI-дизайнер
с нуля до ПРО

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

Научиться

8 450 ₽/мес.

5 493 ₽/мес.