UX UI дизайнер: кто это и как им стать

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

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

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

UX расшифровывается как User Experience – пользовательский опыт. В англоязычных вакансиях встречаются формулировки UX UI design и UI UX designer.

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

UI означает User Interface – пользовательский интерфейс.

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

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

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

Один UX/UI-дизайнер может совмещать обе части работы.

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

Чем занимается дизайнер UX и что входит в UX UI дизайн

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

1. Изучает проблему. Дизайнер обсуждает задачу с заказчиком, исследователем и менеджером продукта. Он выясняет, кому нужен интерфейс и какого результата ожидает бизнес.
2. Исследует пользователей. Специалист проводит интервью, наблюдает за выполнением задач, анализирует обращения в поддержку. Исследования помогают отделить реальные затруднения от предположений команды.
3. Проектирует структуру. Дизайнер распределяет информацию по разделам и продумывает навигацию. Схема пользовательского пути показывает действия от входа до результата.
4. Собирает прототип. Черновые экраны помогают проверить расположение информации и последовательность переходов. Интерактивный прототип имитирует действия пользователя без полноценной разработки продукта.
5. Создает визуальный дизайн. Специалист оформляет экраны с учетом бренда и доступности. Для повторяющихся элементов он использует компоненты дизайн-системы.
6. Проводит юзабилити-тестирование. Дизайнер предлагает человеку выполнить задачу и наблюдает за затруднениями. По результатам он меняет тексты, структуру или поведение интерфейса.
7. Передает макеты разработчикам. Дизайнер описывает размеры, состояния, переходы и поведение элементов. Затем он сравнивает готовый интерфейс с согласованным решением.
8. Оценивает результат. После запуска специалист изучает обратную связь и продуктовые показатели. Например, команда отслеживает завершение регистрации и ошибки заполнения формы.

Эти этапы могут повторяться: тестирование нередко возвращает команду к прототипу.

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

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

Веб-дизайнер проектирует сайты и веб-интерфейсы, учитывая удобство и визуальное оформление. UX/UI-дизайнер может работать и с другими платформами: приложениями, терминалами, устройствами. Граница между профессиями зависит от конкретной вакансии.

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

При выборе работы смотрите на задачи и состав команды.

Одинаковое название должности может скрывать разную глубину исследований и ответственности.

Уровень зарплаты UI/UX-дизайнера

На момент обновления статьи медиана зарплаты UI/UX-дизайнера по России составляет около 110 тыс. ₽. Источник – вакансии hh.ru с указанной зарплатой. Все суммы приведены на руки в месяц.

Медиана делит предложения пополам: половина зарплат выше нее, половина ниже. Диапазон 90–160 тыс. ₽ охватывает центральную половину предложений, а не весь рынок.

Российская выборка включает 47 вакансий, московская – 25. Для кандидатов без опыта учтены 5 вакансий, поэтому диапазон особенно приблизительный.

Стаж из вакансии не равен грейду: требования к самостоятельности компании определяют по-разному.

Как растут Junior, Middle, Senior и Lead

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

Рост возможен и через специализацию.

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

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

Плюсы и минусы профессии

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

Если вам нравится только рисовать отдельные красивые экраны, исследовательская часть может утомлять.

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

Какие знания и навыки нужны в профессии

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

• Исследования. Учитесь задавать нейтральные вопросы и отделять наблюдения от интерпретаций. Разбирайтесь, когда полезны интервью, тестирование и анализ поведения.
• Информационная архитектура. Освойте группировку контента, названия разделов и построение навигации.
• Прототипирование. Показывайте основной путь, альтернативные действия и ситуации с ошибками.
• Визуальный дизайн. Изучите композицию, типографику, цвет, иерархию и работу с отступами. Для расположения элементов используйте колоночные и модульные сетки.
• Доступность. Учитывайте читаемость текста, контраст и управление с клавиатуры. Не передавайте важный смысл только цветом.
• Аналитика. Связывайте изменения интерфейса с конкретными показателями и ограничениями измерения.
• Коммуникация. Объясняйте решения, фиксируйте договоренности и принимайте предметную обратную связь.
• Техническая база. Разберитесь в адаптивности, ограничениях платформ и принципах работы компонентов. Основы HTML и CSS помогают обсуждать реализацию веб-интерфейсов.

Для учебной работы возьмите Figma как основной инструмент проектирования.

Начните с фреймов, текста, автоматической компоновки Auto Layout и компонентов. Затем освоите варианты компонентов, стили и интерактивные переходы.

Photoshop пригодится для обработки изображений, Illustrator – для векторной графики. Эти редакторы дополняют работу над интерфейсом. Изучать все инструменты одновременно новичку не нужно.

В каких сферах может работать UX/UI дизайнер

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

• Банки и финансовые сервисы. Дизайнер делает понятными переводы, платежи и подтверждение операций. Особенно важны предупреждения, статусы и защита от случайных действий.
• Электронная коммерция. Специалист проектирует поиск, каталог, корзину и оформление заказа. Ему приходится учитывать варианты доставки, оплаты и возврата.
• Корпоративные и промышленные системы. Интерфейс помогает сотрудникам работать с таблицами, оборудованием и повторяющимися операциями. Здесь важны роли доступа и предотвращение ошибок.
• Образование и здравоохранение. Дизайнер упрощает запись, обучение и работу с личной информацией. Он учитывает разный уровень цифровых навыков пользователей.
• Государственные сервисы. Специалист проектирует заявления, документы и отслеживание статусов. Интерфейс должен объяснять требования и помогать исправлять ошибки.

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

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

План старта должен соединять теорию, практику и обратную связь. Подготовьте 2–3 законченных кейса, чтобы показать ход работы над задачами.

Выберите подходящий путь обучения

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

Для теоретической базы прочитайте Дональда Нормана «Дизайн привычных вещей». Затем возьмите книгу Стива Круга «Не заставляйте меня думать». Применяйте идеи к своему проекту: находите непонятные действия и проверяйте варианты исправления.

Как освоить базу Figma на небольшой форме

Создайте учебный макет записи на занятие. Ограничьте первый сценарий выбором времени, вводом контакта и подтверждением записи.

Поля в этом прототипе будут изображениями: настоящий ввод и отправка контактов не нужны.

1. В открытом файле дизайна нажмите F и растяните рамку на холсте. Это фрейм – контейнер для одного экрана. Создайте рядом еще 2 фрейма таким же способом. В списке слоев переименуйте их двойным щелчком по названию: «Выбор времени», «Контакты», «Запись подтверждена».
2. Внутри экрана «Контакты» нажмите T, щелкните и напишите «Ваш контакт». Для поля нажмите R и нарисуйте прямоугольник под заголовком. Добавьте инструментом текста подпись «Электронная почта». Получится статичный макет поля с подсказкой.
3. Для кнопки создайте текст «Записаться» ниже поля. Завершите редактирование текста клавишей Escape и выделите текстовый слой. Нажмите Shift+A: вокруг надписи появится контейнер Auto Layout. В его свойствах задайте внутренние отступы, например 16 пикселей, и цвет заливки. Надпись должна оказаться внутри цветной кнопки.
4. Выделите контейнер кнопки в списке слоев. Нажмите Ctrl+Alt+K в Windows или Option+Command+K в macOS. Кнопка станет основным компонентом. Для повторного использования скопируйте компонент и вставьте его в другой фрейм. Измените заливку основного компонента: связанный экземпляр должен обновиться.
5. В списке слоев выделите заголовок, прямоугольник поля, его подпись и кнопку, удерживая Shift. Нажмите Shift+A, чтобы объединить элементы автоматической компоновкой. В свойствах Auto Layout выберите вертикальное направление со стрелкой вниз. Задайте промежуток между элементами, например 16 пикселей. Измените текст заголовка: элементы должны сохранять заданные промежутки.
6. На экране «Выбор времени» добавьте текст «Выберите время» и кнопку «10:00». На последнем экране напишите «Запись подтверждена». Текст кнопки меняйте внутри экземпляра, чтобы сохранить связь с компонентом.
7. Для показа ошибки продублируйте фрейм «Контакты» копированием и вставкой. Назовите копию «Ошибка контакта». Измените обводку поля и добавьте рядом пояснение «Введите адрес в формате name@example.com». Ошибка должна объясняться словами, даже если убрать цветовую подсветку.
8. Выделите кнопку «10:00» и переключитесь в режим прототипирования. Потяните связь от кнопки к фрейму «Контакты». В параметрах связи выберите нажатие и переход на другой экран. Укажите фрейм «Контакты» как место назначения. Между кнопкой и экраном появится линия со стрелкой.
9. Таким же перетаскиванием свяжите кнопку «Записаться» с фреймом подтверждения. Выделите первый экран и запустите просмотр прототипа кнопкой с треугольником. Нажатия на «10:00» и «Записаться» должны последовательно открыть контакты и подтверждение.

Если действие дало неожиданный результат, отмените его через Ctrl+Z в Windows или Command+Z в macOS.

Попросите человека пройти сценарий без ваших подсказок. Если он не понимает следующий шаг, запишите затруднение и доработайте макет.

Какие учебные проекты подготовить для портфолио

Первым кейсом сделайте сервис записи с исследованием и интерактивным прототипом. Поговорите с 3–5 людьми, которые недавно записывались на похожие занятия. Спросите об их последнем опыте, затруднениях и способах выбора времени. Такой объем подойдет для учебной практики, но не описывает всю аудиторию.

Запишите наблюдения, выберите проблему и соберите сценарий ее решения. После тестирования покажите в кейсе хотя бы одно обоснованное изменение.

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

Третьим проектом можно сделать адаптацию одного сценария для мобильного экрана. Покажите, как меняются навигация, расположение элементов и объем видимого контента.

Как оформить портфолио и подготовиться к откликам

Каждый кейс должен объяснять проблему, вашу роль и причины принятых решений.

Отделяйте учебные проекты от коммерческих, а личный вклад от командного.

1. Опишите аудиторию, задачу и ограничения проекта. Читатель должен понять исходную проблему без устного рассказа.
2. Добавьте материалы исследования, схему сценария и ключевые экраны. Укажите, какие наблюдения повлияли на решения.
3. Покажите прототип и изменения после тестирования. Не приписывайте учебному проекту рост продаж или конверсии без измерений.
4. Разместите развернутый кейс на Behance. Добавьте последовательный рассказ и изображения с читаемыми подписями. На Dribbble можно опубликовать визуальный фрагмент со ссылкой на полный кейс.
5. Откройте опубликованный материал без входа в свой аккаунт. Убедитесь, что изображения читаются, а ссылка на прототип доступна.
6. Добавьте ссылки на кейсы и контакты в резюме. В отклике на стажировку или Junior-позицию укажите проект, близкий задачам работодателя.

С чего начать знакомство с профессией

Возьмите один небольшой сценарий и доведите его от наблюдений до прототипа. Такая практика поможет оценить интерес к исследованиям, визуальному дизайну и обсуждению решений.

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