Чем отличается UX от UI: разбор на одном экране и что пишут в вакансиях

Чем отличается UX от UI простыми словами

UX — это про то, как устроен путь человека: сколько шагов он проходит, в каком порядке, что происходит, если он ошибётся. UI — про то, как этот путь выглядит: где кнопка, какого она размера, каким цветом показана ошибка.

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

Важно. Метафора про торт и глазурь, которую все повторяют, вводит в заблуждение. Из неё следует, что UI — украшение, без которого можно обойтись. На практике плохой интерфейс убивает продуманный путь так же надёжно, как плохой путь — красивый интерфейс.

Разбор на одном экране

Возьмём экран оплаты в приложении доставки еды. Один и тот же экран, но решения по нему принимаются разные.

Видно, что разделить полностью не получается. Решение «прятать поле промокода» — про путь, но реализуется оно визуально. Именно поэтому на практике эти роли так часто совмещают.

Что делает UX-дизайнер

Работа начинается задолго до того, как появляется первая картинка.

Изучает пользователей

Интервью, наблюдение, разбор обращений в поддержку. Задача — понять, как люди реально пользуются продуктом, а не как задумано.

Проектирует путь

Раскладывает задачу на шаги: что человек делает первым, что вторым, где может застрять. Результат — схема экранов и переходов между ними.

Рисует прототипы

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

Тестирует на людях

Даёт прототип пяти-восьми людям и смотрит, где они спотыкаются. Этот этап экономит больше всего денег и его же чаще всего пропускают.

Разбирает данные

Где отваливаются пользователи, на каком шаге бросают корзину. Цифры показывают проблему, а интервью объясняют причину.

Что делает UI-дизайнер

Берёт структуру и превращает её в то, что видит человек.

Выстраивает визуальную иерархию

Что человек замечает первым, вторым и третьим. Это не про красоту, а про то, чтобы главное действие было очевидным.

Работает с типографикой и цветом

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

Собирает дизайн-систему

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

Прорабатывает состояния

Кнопка обычная, нажатая, недоступная, в процессе загрузки. Начинающие рисуют только первое, а остальные всплывают уже в разработке.

Передаёт макеты в разработку

Так, чтобы разработчик не гадал: отступы, поведение при разной ширине экрана, что происходит с длинным текстом.

Почему в вакансиях пишут UX/UI через слэш

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

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

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

Какими инструментами работают

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

Редакторы интерфейсов

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

Инструменты для схем

Карты экранов и пути пользователя. Часто рисуют прямо в том же редакторе, отдельная программа не обязательна.

Сервисы для тестирования

Запись экрана и поведения людей на прототипе. Нужны на этапе проверки логики.

Аналитика продукта

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

Библиотеки и дизайн-системы

Готовые наборы элементов. Умение работать с чужой системой ценится выше, чем умение придумать свою с нуля.

Как понять, что ближе именно вам

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

Возьмите знакомое приложение

Любое, которым пользуетесь каждый день. Например, приложение банка или доставки.

Найдите место, где неудобно

Оно точно есть. Запишите, что именно раздражает и на каком шаге.

Сформулируйте, что бы вы поменяли

И посмотрите, каким получился ответ. «Убрал бы лишний шаг и спрашивал адрес после оплаты» — это UX. «Сделал бы кнопку заметнее и убрал мелкий серый текст» — это UI.

Повторите на трёх приложениях

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

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

Как войти в профессию

Освойте редактор интерфейсов

Первое требование в вакансиях. Базовый уровень набирается за несколько недель.

Соберите портфолио из переделок

Возьмите реальное приложение и переделайте в нём один экран, объяснив, почему. Это ценнее выдуманных проектов: видно ход мысли.

Научитесь объяснять решения

На собеседовании спросят не «почему красиво», а «почему так, а не иначе». Дизайнер, который не может объяснить, воспринимается как оформитель.

Разберитесь, как работает разработка

Не программировать, а понимать, что дорого в реализации, а что дёшево. Это отличает дизайнера, с которым удобно работать.

Начните с простых заказов

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

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

Частые вопросы

Что важнее: UX или UI?

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

Можно ли быть только UX-дизайнером?

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

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

По нашим подсчётам медиана около 95–100 тысяч ₽ на руки, половина вакансий укладывается в 70–160 тысяч. Разницы в деньгах между UX и UI рынок не делает.

Нужно ли уметь рисовать?

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

Нужно ли программировать?

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

С чего начать обучение?

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