UX/UI-дизайн: что это и как устроен процесс — взгляд агентства

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

Начну с наблюдения, которое звучит странно для брендингового агентства. Логотип вашей компании клиент видит, может быть, несколько раз в год: на вывеске, на счёте, на подарочной ручке. А интерфейс — личный кабинет, приложение, сайт — он открывает каждую неделю, иногда каждый день. Самый частый носитель бренда сегодня — не логотип, а интерфейс. Поэтому мы, брендинговое агентство Kuznets, занимаемся UX/UI-дизайном как продолжением бренда, наравне с айдентикой. Об этом и статья: что такое UX/UI простыми словами, чем UX отличается от UI, как устроен процесс проектирования, что вы получаете на выходе и как принять работу, не будучи дизайнером.

Статья для тех, кто заказывает интерфейсы: собственников, маркетологов, продуктовых и HR-директоров. Как стать UX/UI-дизайнером, здесь не будет, об этом хорошо пишут школы.

Что такое UX/UI-дизайн простыми словами

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

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

UX-дизайн: логика и путь пользователя

UX-дизайнер отвечает на вопрос «сможет ли человек сделать то, зачем пришёл». Его материал — не пиксели, а сценарии:

• пользовательские сценарии (user flow): регистрация, заявка, оплата, поиск курса на корпоративном портале;
• информационная архитектура: какие разделы есть, как они вложены, как называются пункты меню;
• навигация: как перейти из любой точки в нужную и вернуться обратно;
• состояния: что видит человек, когда список пуст, данные грузятся, связь пропала, форма заполнена с ошибкой;
• роли: чем отличается интерфейс для сотрудника, руководителя и администратора.

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

UI-дизайн: визуальный слой интерфейса

UI-дизайнер отвечает на вопрос «как этот путь выглядит, звучит и ощущается». Его материал:

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

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

Идея главной картинки. Человеческая фигура из двух слоёв: внутри скелет и стрелка маршрута от двери к цели (это UX), снаружи кожа, мимика и одежда (это UI). Подпись: «UX — скелет и маршрут, UI — кожа и мимика. Нельзя вырастить одно без другого».

Чем UX отличается от UI: таблица

Термины часто пишут через косую черту, как одно слово. На деле это два разных вопроса к одному интерфейсу. Сведём разницу в таблицу.

Сегодня UX и UI часто делает один человек или одна команда, и это нормально. Но вопросы остаются разными, и принимать их нужно по-разному. Прототип проверяют сценарием: дойдёт или не дойдёт. Макет проверяют брендбуком и глазами: читается ли, узнаётся ли, одинаково ли выглядят одинаковые вещи. Если на встрече по прототипу спорят о цвете кнопки, а на встрече по макетам о порядке шагов, значит, этапы перепутаны.

Где начинается UX/UI: с бренда, а не с wireframe

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

Интерфейс — это носитель бренда, такой же, как вывеска, упаковка или форма сотрудников. Только самый частый. Если сайт, приложение и личный кабинет рисовали разные подрядчики «в современном стиле», клиент видит три разные компании. Если UI собран из нейтрального набора компонентов, продукт выглядит как десятки конкурентов, собранных из того же набора. А если тексты интерфейса написаны языком юриста, а реклама говорит с клиентом на «ты», бренд раздваивается в самом важном месте, там, где человек платит.

Поэтому наша цепочка выглядит так:

1. ДНК бренда. Мы работаем по методу Kuznets DNA, который я разработал для создания и внедрения ДНК брендов: через интервью и анализ рынка из «облаков смыслов» выявляются 7–8 принципов бренда, его рациональная суть и креативный образ, а затем они зашифровываются во все атрибуты бренда. Интерфейс — один из этих атрибутов. Подробнее — на странице ДНК бренда.
2. Платформа бренда: позиционирование, ценности, характер, тон. См. платформа бренда.
3. Айдентика: логотип, цвета, шрифты, графика. См. разработка фирменного стиля.
4. Брендбук: правила, по которым айдентику применяют все. См. разработка брендбука.
5. UI-kit и дизайн-токены: те же правила, переведённые на язык экрана.
6. Экраны: сценарии и макеты, собранные из этих компонентов.

Это не значит, что без брендбука нельзя начинать UX. Сценарии и архитектуру можно и нужно проектировать параллельно. Но визуальная часть без бренда почти всегда превращается во вкусовщину: «сделайте посовременнее», «давайте как у банка». Вкусовщину не защитишь на совете директоров, а систему, выросшую из ДНК, защитить можно: каждое решение объясняется смыслом бренда.

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

У Северстали был действующий брендбук, и задачей по мобильному приложению (2021) было не придумать новый визуальный язык, а перенести существующий в интерфейс. Мы разработали дизайн-систему приложения на основе существующего брендбука: фирменные цвета, типографика и графика стали основой токенов и компонентов приложения.

Кейс: ИТЦ МЧС — ребрендинг, который дошёл до сайта

ООО «ИТЦ МЧС» — инженерно-технический центр мониторинга чрезвычайных ситуаций и спецработ: обследует территории и акватории на предмет взрывоопасных предметов времён войны, проводит разминирование, выполняет проектные и строительные работы. В 2024 году, в рамках стратегического ребрендинга, компании нужно было обновить сайт: показать современный имидж, поддержать продажи и укрепить позиции на рынке. Экраны мы рисовали не первыми. Сначала разобрали структуру главных страниц и меню сайтов ключевых конкурентов (подробнее об этом — в разделе про исследование ниже), затем сделали дизайн нового сайта. Цвета интерфейса подобрали так, чтобы визуальная айдентика несла ключевые ассоциации и сообщения бренда (кейс ИТЦ МЧС). Так выглядит цепочка «бренд → интерфейс» на практике: сайт говорит тем же языком, что и обновлённый бренд. Если вам нужен не только дизайн интерфейса, но и мобильное приложение целиком, смотрите разработку мобильных приложений.

Кейс: Школа экспорта РЭЦ — когда ребрендинг обгоняет интерфейс

Обратная ситуация тоже частая. В 2021 году Школа экспорта Российского экспортного центра прошла ребрендинг, а сайт остался прежним и начал выбиваться из нового бренда: у части аудитории ослабла связь между сайтом и брендом. Значительная часть учеников — люди старше 50 лет, консервативные в привычках. Поэтому мы не стали ломать механику: основные элементы взаимодействия с сайтом и учебными материалами остались на местах, но получили новый внешний вид в стиле ребрендинга. Портал разделили на две части с разными задачами: внешнюю с системой мини-лендингов программ и внутренний личный кабинет, где идёт обучение. Для внешней части нарисовали отдельные вайрфреймы, вручную спроектировали только нетиповые страницы, а остальные собираются по дизайн-системе, включая отдельную систему анимации. Итог — макеты для десктопа, планшета и смартфона для 20 разделов (кейс РЭЦ). Урок: UX и UI можно менять с разной скоростью. Бренд обновился целиком, привычный путь пользователя — нет, и это было осознанное решение.

Этапы UX/UI-дизайна: процесс от задачи до передачи в разработку

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

1. Брифинг и бизнес-цели

Что делаем. Договариваемся, что считать успехом: больше заявок, меньше звонков в поддержку, вовлечённость сотрудников в обучение. Фиксируем аудиторию, платформы, интеграции, ограничения и того, кто принимает работу. Артефакт. Согласованный бриф и список ключевых сценариев. Частая ошибка. Цель «сделать современный интерфейс». Современность не измеряется, и через месяц проект начинают принимать по вкусу.

2. Исследование: аудитория, конкуренты, текущий продукт

Что делаем. Интервью с пользователями и заказчиком, разбор аналитики, если продукт уже работает, анализ конкурентов. Например, перед дизайном сайта ИТЦ МЧС мы разобрали структуру главных страниц и меню сайтов ключевых конкурентов: что они показывают первым, как называют разделы, где прячут контакты. Артефакт. Портрет аудитории, CJM (customer journey map, карта пути клиента), список проблем и гипотез. Частая ошибка. Пропустить этап ради сроков. Исследование обычно занимает небольшую часть проекта и экономит больше всего времени на переделках: одна найденная до прототипа ложная гипотеза избавляет от переделки десятков экранов.

3. Информационная архитектура и роли пользователей

Что делаем. Строим структуру разделов, описываем роли и их права, рисуем user flow по ключевым сценариям. Лучший пример из нашей практики — HR-портал QIWI. Мы продумали роли пользователей и функционал для каждой: Сотрудник, Руководитель, HR. Весь функционал и его логические связи продумали ещё на этапе проектирования. Первая страница огромного портала сделана по принципу максимальной простоты: в акценте три главных раздела. Тот же принцип лежит в основе остальных 127 страниц. Артефакт. Карта продукта, схемы сценариев по ролям. Частая ошибка. Структура, повторяющая оргструктуру компании. Пользователю неважно, какой отдел отвечает за раздел, ему важно найти нужное.

4. Прототипы (wireframe) и пользовательские сценарии

Что делаем. Рисуем чёрно-белые схемы экранов (вайрфреймы, Lo-Fi), связываем их в кликабельный прототип и проходим сценарии, как будто продукт уже есть. Артефакт. Прототип в Figma, по которому можно пройти путь от входа до цели. Частая ошибка. Раскрашивать прототип. Как только появляется цвет, обсуждение уходит в визуал, а логика остаётся непроверенной.

5. Визуальная концепция: UI на основе айдентики

Что делаем. Переводим фирменный стиль на язык экрана: сетку, экранную типографику, палитру с проверкой контраста, иконки, характер движения. Отрисовываем 2–3 ключевых экрана в финальном качестве. Артефакт. UI-концепция, согласованная до отрисовки остальных экранов. Частая ошибка. Брать цвета из брендбука один в один. Цвет, который хорош на полиграфии, на экране может не пройти по контрасту для текста. Бренд на экране нужно адаптировать: проверить контраст и добавить оттенки для состояний элементов.

6. Макеты всех экранов и состояний

Что делаем. Отрисовываем все экраны в высоком качестве (Hi-Fi) и, что важно, все состояния: пустой список, загрузка, ошибка, успешное действие, отсутствие прав, длинные тексты, адаптив под мобильные устройства. Артефакт. Полный комплект макетов в Figma. Частая ошибка. Нарисовать только «счастливый путь». Потом разработчики сами придумывают, как выглядит ошибка, и интерфейс расползается.

7. UI-kit и дизайн-система

Что делаем. Собираем повторяющиеся элементы в библиотеку компонентов с токенами (цвета, размеры, отступы) и правилами применения. Для нескольких продуктов или большой команды это полноценная дизайн-система. Артефакт. UI-kit или дизайн-система в Figma с документацией. Частая ошибка. Отложить систему «на потом». Потом наступает, когда в продукте уже двенадцать видов кнопок.

8. Юзабилити-тестирование и итерации

Что делаем. Даём прототип или макеты реальным людям из целевой аудитории, просим выполнить задачи, наблюдаем, где они ошибаются, и правим. Для работающего продукта тот же подход называется UX-аудит и юзабилити-тестирование. Артефакт. Отчёт с найденными проблемами, приоритетами и решениями. Частая ошибка. Тестировать на коллегах. Сотрудники знают продукт изнутри и не видят того, во что упирается новичок.

9. Передача в разработку и авторский надзор

Что делаем. Готовим спецификацию: отступы, поведение элементов, анимации, адаптив. Отвечаем на вопросы разработчиков и проверяем вёрстку на соответствие макетам. Артефакт. Спецификация и протоколы проверки вёрстки. Так было, например, на сайте Nauka: аудит, структура, прототипирование страниц, контент, дизайн, техническое задание на разработку и авторский надзор, с адаптацией под любые браузеры и устройства. Частая ошибка. Отдать разработчикам «картинки» и исчезнуть. Интерфейс, собранный без авторского надзора, редко совпадает с макетами.

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

Принципы хорошего интерфейса: чек-лист из 12 пунктов

Этот чек-лист — для заказчика. Пройдитесь по нему, когда принимаете прототип или макеты. Каждый пункт проверяется без специального образования.

1. Ясен главный сценарий. На ключевом экране понятно, что здесь можно сделать и что делать первым.
2. Один главный призыв к действию на экран. Если на экране пять одинаково ярких кнопок, главной нет ни одной.
3. Одинаковое выглядит одинаково. Кнопки, поля и карточки с одной функцией везде одного вида.
4. На каждое действие есть ответ. Нажал — что-то изменилось: кнопка отреагировала, появилось подтверждение, пошла загрузка.
5. Ошибки понятны и исправимы. Не «ошибка 403», а «у вас нет доступа к разделу, напишите администратору». И подсказка, как исправить.
6. Текст читается. Достаточный размер шрифта и контраст с фоном, короткие абзацы.
7. Интерфейсом могут пользоваться все. Учтены люди со слабым зрением, с дальтонизмом, те, кто пользуется только клавиатурой.
8. Адаптив продуман, а не сжат. На телефоне не уменьшенная копия десктопа, а экран под большой палец и одну руку.
9. Нарисованы все состояния. Пусто, загрузка, ошибка, успех, нет прав.
10. Интерфейс быстрый. Тяжёлые картинки и анимации не мешают сделать дело.
11. Язык интерфейса звучит как бренд. Тексты кнопок, подсказок и ошибок написаны тем же тоном, что и реклама.
12. Визуал соответствует брендбуку. Цвета, шрифты, графика узнаются без логотипа.

Для тех, кто хочет глубже, три классических ориентира, на которые опираются дизайнеры:

• Эвристики Нильсена. Десять принципов юзабилити, которые Якоб Нильсен сформулировал в 1990-х: видимость состояния системы, соответствие языку пользователя, свобода отменить действие, единообразие, предотвращение ошибок и другие. На них построена экспертная оценка интерфейса.
• Закон Фиттса. Чем крупнее и ближе цель, тем быстрее в неё попасть. Отсюда большие кнопки главных действий и их место под пальцем.
• Закон Хика. Чем больше вариантов выбора, тем дольше человек решает. Отсюда короткие меню и пошаговые формы.

Что заказчик получает на выходе UX/UI-проекта

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

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

Как поставить задачу на UX/UI и не переплатить

Большая часть переплат в UX/UI рождается из размытой задачи. Её переписывают по ходу, и каждое изменение стоит итерации.

Что написать в брифе

Восемь вопросов, на которые стоит ответить до первой встречи с подрядчиком:

1. Цель в измеримой форме. Не «удобный личный кабинет», а «клиент продлевает договор сам, без звонка менеджеру».
2. Аудитория. Кто пользуется, насколько опытны, с каких устройств.
3. Ключевые сценарии. Три–пять главных действий, ради которых существует продукт.
4. Платформы. Веб, адаптив, iOS, Android, внутренние системы.
5. Бренд. Есть ли брендбук или фирменный стиль и насколько строго его нужно соблюдать.
6. Интеграции и ограничения. CRM, 1С, платёжные системы, требования безопасности, готовые модули.
7. Сроки и точки контроля. Когда нужен запуск и что должно быть готово к нему.
8. Кто принимает работу. Один человек с правом решения, а не комитет из семи согласующих.

Студия, фрилансер или брендинговое агентство: кому что отдавать

Честно: для разных задач нужны разные подрядчики. Вот как я бы выбирал.

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

Что влияет на объём работ

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

• число сценариев и уникальных экранов (не страниц: сто одинаковых карточек товара — это один экран);
• платформы: веб, адаптив, iOS, Android;
• глубина исследования: сколько интервью, нужна ли аналитика, нужен ли анализ конкурентов;
• наличие брендбука: если бренда нет, его придётся создать или хотя бы собрать минимальные правила;
• дизайн-система: UI-kit для одного продукта или система для нескольких;
• тестирование и авторский надзор.

Стоимость и форматы работы (аудит, UX/UI под ключ, дизайн-система) описаны на странице стоимость UX/UI-дизайна. Ориентиры по брендингу, айдентике и брендбуку — на странице цен агентства.

Частые ошибки в UX/UI

Список — из нашего опыта проектирования.

1. Рисовать экраны до сценариев. Красивые макеты, в которых непонятно, как оформить заказ. Логику приходится переделывать уже в цвете, а каждая такая правка затрагивает десятки готовых макетов.
2. Красиво, но не по брендбуку. Интерфейс сделан «в трендах», а бренд компании остался в презентации. Клиент видит двух разных производителей.
3. Нет состояний ошибок. Всё прекрасно, пока интернет стабилен, а поля заполнены правильно. В жизни так не бывает.
4. Дизайн-система «потом». Через год в продукте десяток оттенков синего и пять видов полей ввода, а каждое изменение приходится вносить руками на всех экранах.
5. Нет тестирования. Команда уверена, что всё понятно, потому что сама придумала. Первые пользователи думают иначе.
6. Разработчики получают картинки вместо спецификации. Отступы, поведение и анимации угадываются, и в релиз уходит примерно похожий интерфейс.
7. Приёмка по вкусу. «Мне не нравится этот синий» на этапе прототипа, «а давайте поменяем порядок шагов» на этапе макетов. Каждый этап принимают по своим критериям, о которых договорились в брифе.

Частые вопросы о UX/UI-дизайне

Как расшифровываются UX и UI?

UX — user experience, пользовательский опыт: то, как человек проходит путь к цели в продукте. UI — user interface, пользовательский интерфейс: всё, что человек видит и нажимает на экране. Вместе UX/UI-дизайн означает проектирование интерфейса от логики до внешнего вида.

Можно ли заказать только UI, если UX уже есть?

Можно, если есть проверенные прототипы или работающий продукт с понятными сценариями. Хороший подрядчик всё равно начнёт с короткой проверки логики: красить неработающий сценарий бессмысленно. Если прототипов нет, а есть только список функций, UX всё-таки придётся сделать.

Нужен ли UX/UI небольшому сайту или лендингу?

Нужен, но в масштабе задачи. У лендинга один сценарий: понять предложение и оставить заявку. UX здесь — порядок блоков и форма, UI — визуал в стиле бренда. Для таких задач есть отдельная услуга разработки лендинга, для многостраничного сайта — разработка корпоративного сайта.

Что сначала: брендбук или дизайн интерфейса?

Логичнее сначала бренд: айдентика и брендбук задают цвета, шрифты, графику и тон, из которых собирается UI. При этом UX-часть (сценарии, архитектура, прототипы) можно вести параллельно с разработкой бренда. Если брендбука нет, начните с брендбука или минимального набора правил для digital.

Что такое дизайн-система и когда она окупается?

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

Как проверить качество UX/UI до разработки?

Пройти кликабельный прототип самому по ключевым сценариям, провести юзабилити-тестирование на 5–8 людях из целевой аудитории и сверить макеты с брендбуком и чек-листом из этой статьи. Если продукт уже работает, начните с UX-аудита.

Сколько длится UX/UI-проект?

Срок зависит от числа сценариев и уникальных экранов, платформ, глубины исследования и скорости согласований. Лендинг проходится значительно быстрее, чем корпоративный портал с ролями и сотней страниц. Точный календарный план имеет смысл обсуждать после брифа, когда понятен объём.

Вместо заключения: пять рекомендаций

1. Начинайте с цели, которую можно измерить, а не с «современного дизайна».
2. Проверяйте логику на прототипе, пока правка обходится дёшево.
3. Требуйте все состояния экранов, а не только счастливый путь.
4. Стройте интерфейс из бренда: ДНК, брендбук, UI-kit, экраны. Тогда продукт узнают без логотипа.
5. Принимайте работу по артефактам, а не по впечатлению.

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

Проектируем интерфейсы, которые выглядят и звучат как ваш бренд. Посмотрите, как мы делали HR-портал QIWI, сайт Nauka и дизайн-систему Северстали, а условия работы — на странице UX/UI-дизайн для бизнеса.

Алексей Кузнецов, основатель брендингового агентства Kuznets. Агентство работает с 2009 года, за плечами более 300 проектов, офисы в Санкт-Петербурге и Москве.