Заказчик часто приходит к дизайнеру с фразой «сделайте красиво и современно». Через месяц у него есть красивые макеты, но сайт после запуска не продаёт: посетители не находят цену, путаются в каталоге и уходят с формы на втором шаге. Причина почти всегда одна: сделали UI, но пропустили UX.
Разберём, из чего на самом деле состоит UX/UI-дизайн сайта, какие документы и макеты вы должны получить на выходе и как понять, что дизайн хороший, ещё до того, как за него возьмутся разработчики.
UX и UI: в чём разница и почему их нельзя разделять
UX (user experience) отвечает на вопрос «как человек решит здесь свою задачу». Это логика: какие страницы нужны, в каком порядке идёт информация, сколько шагов до заявки, что пользователь видит, если ошибся в поле формы. Хороший UX незаметен: человек просто делает то, ради чего пришёл.
UI (user interface) отвечает на вопрос «как это выглядит и ощущается». Сетка, типографика, цвета, кнопки, иконки, состояния элементов, анимации. UI делает логику читаемой и задаёт характер бренда.
| UX | UI | |
|---|---|---|
| Главный вопрос | Как человек решит свою задачу | Как это выглядит и ощущается |
| Из чего состоит | Страницы, порядок информации, шаги до заявки, ошибки в формах | Сетка, типографика, цвета, кнопки, состояния, анимации |
| Что получаете | CJM, user flow, карта сайта, вайрфреймы | Концепция, UI-kit, дизайн-система, адаптивы |
Разделять их опасно. Если UX спроектировал один подрядчик, а UI «докрасил» другой, решения начинают спорить: дизайнер интерфейса убирает «некрасивую» плашку с условиями доставки, а именно она отвечала на главный вопрос покупателя. Поэтому дизайн интерфейса сайта мы ведём как одну работу: сначала логика и структура, потом визуальный код, и всё время сверяемся с задачей бизнеса.
Хороший UX незаметен: человек просто делает то, ради чего пришёл.
Что входит в UX: исследование и проектирование
UX-часть начинается не с экранов, а с вопросов. Кто приходит на сайт, откуда, с каким запросом, что его останавливает от покупки, с кем вы конкурируете за его внимание. Ответы собираются из разговоров с заказчиком и его отделом продаж, анализа конкурентов, данных аналитики, если сайт уже есть, и иногда из интервью с клиентами.
CJM — карта пути клиента
Customer Journey Map показывает, через какие этапы проходит человек от первого касания до покупки и повторного обращения: что он думает, где сомневается, по какому каналу приходит. Для интернет-магазина ёлок это один путь (сезонная покупка, важны сроки доставки и наличие), для B2B-производителя — совсем другой (долгое сравнение, несколько согласующих, запрос КП). CJM нужна, чтобы сайт закрывал сомнения на нужном этапе, а не вываливал всё на главную.
User flow — сценарии на сайте
User flow — схема конкретного сценария: «найти товар и оформить заказ», «подобрать услугу и оставить заявку», «зарегистрироваться в личном кабинете». На ней видно каждое ветвление: что если товара нет в наличии, что если пользователь не авторизован, куда он попадёт после отправки формы. Здесь же всплывают лишние шаги, которые потом стоили бы конверсии.
Структура и вайрфреймы
Из сценариев складывается карта сайта: список страниц и связи между ними. Затем каждую ключевую страницу раскладывают в вайрфрейм — чёрно-белую схему блоков без визуального стиля. На вайрфреймах дешевле всего спорить о содержании, потому что правка занимает минуты, а не дни.
Что входит в UI: визуальный код и система
Когда логика согласована, начинается работа над внешним видом. Здесь важно не путать «нарисовать главную» и «спроектировать интерфейс».
Концепция и стилевые варианты
Мы показываем несколько направлений в разных стилях на одном и том же ключевом экране, обычно на главной или самой важной посадочной. Так заказчик сравнивает характер, а не содержание: строгий и технологичный, тёплый и человечный, смелый и контрастный. Выбранное направление развивается дальше.
UI-kit
UI-kit — набор всех элементов интерфейса: кнопки во всех состояниях (обычное, наведение, нажатие, неактивное, загрузка), поля ввода с ошибками и подсказками, чекбоксы, переключатели, карточки, модальные окна, уведомления. Без UI-kit каждая новая страница рисуется заново, и через полгода на сайте шесть вариантов одной кнопки.
Дизайн-система
Дизайн-система — следующий уровень: не просто набор элементов, а правила. Сетка и отступы, шкала размеров шрифтов, цветовые токены, принципы использования иллюстраций и фото, правила для таблиц и форм. Для небольшого сайта достаточно аккуратного UI-kit, а вот для сервиса с личным кабинетом или для компании с несколькими продуктами дизайн-система окупается быстро: новые страницы собираются из готовых блоков, а разработчики переиспользуют компоненты.
Адаптивы
Адаптивные макеты — не «то же самое, только уже». На телефоне меняется порядок блоков, таблицы превращаются в карточки, фильтры каталога уходят в отдельный экран, кнопка заявки закрепляется внизу.
Какие артефакты вы должны получить на выходе
Хорошая проверка подрядчика — спросить, что конкретно будет передано по итогам. Для сайта среднего размера разумный комплект выглядит так:
- краткий отчёт по исследованию: аудитория, сценарии, выводы по конкурентам;
- CJM и user flow для ключевых сценариев;
- карта сайта и вайрфреймы основных страниц;
- макеты всех уникальных страниц и шаблонов (карточка товара, статья, страница услуги) в десктопной и мобильной версии;
- UI-kit или дизайн-система с состояниями элементов;
- описание интерактива: что происходит при наведении, открытии меню, отправке формы, ошибке;
- подготовленные для разработки макеты: с понятной структурой слоёв, компонентами и экспортируемой графикой.
Объём комплекта напрямую влияет на бюджет, поэтому сравнивать предложения подрядчиков имеет смысл только по одинаковому списку артефактов.
Как оценить дизайн до начала разработки
Самая дорогая ошибка — обнаружить проблему дизайна, когда сайт уже свёрстан. Вот что можно проверить на макетах.
- Тест пяти секунд. Покажите главный экран человеку, который не участвовал в проекте, и уберите через пять секунд. Он должен ответить: что это за компания, что она предлагает и что можно сделать дальше. Если не может — первый экран перегружен или говорит не о том.
- Проход по сценариям. Возьмите user flow и пройдите его по макетам, экран за экраном. Каждый переход должен существовать в макетах, включая ошибки и пустые состояния: пустая корзина, ничего не найдено, форма отправлена.
- Кликабельный прототип. Соберите из макетов интерактивный прототип и дайте его пройти трём-пяти людям из целевой аудитории с конкретной задачей. Этого обычно хватает, чтобы найти самые грубые проблемы.
- Реальный контент. Проверьте, что макеты нарисованы на настоящих текстах и фото, а не на «Lorem ipsum». Длинное название товара или заголовок из трёх строк ломают красивую карточку, и лучше узнать об этом сейчас.
- Мобильная версия отдельно. Откройте мобильные макеты на телефоне в реальном размере. Проверьте, что кнопки нажимаются пальцем, текст читается без увеличения, а важное не уехало в самый низ.
- Согласованность с разработкой. Попросите разработчика посмотреть макеты до финального согласования. Он быстро заметит решения, которые дорого реализовать или которые плохо работают с выбранной CMS.
Отдельно стоит проверить, как дизайн учитывает поиск: есть ли место под текстовые блоки, корректная иерархия заголовков, не спрятан ли контент во вкладках и слайдерах.
Уникальный дизайн сайта или шаблон
Шаблон кажется разумной экономией: купил тему, поменял логотип и цвета, через неделю запустился. Для лендинга под разовую акцию или для проверки гипотезы это действительно может работать. Для основного сайта компании у шаблона есть системные минусы.
- Структура под чужую задачу. Шаблон проектировали под абстрактного клиента. Ваш продукт приходится втискивать в готовые блоки: три преимущества с иконками, слайдер, отзывы. Если у вас сложное предложение, которое нужно объяснять, шаблон его не объяснит.
- Одинаковость. Популярные темы стоят на сотнях сайтов, в том числе у конкурентов. Посетитель, сравнивающий три вкладки, не запомнит, где был ваш сайт.
- Лишний код. Темы делают универсальными, поэтому они тянут за собой скрипты и стили для функций, которыми вы не пользуетесь. Это бьёт по скорости загрузки.
- Дорогие доработки. Первая же нестандартная задача — калькулятор, личный кабинет, фильтр по редким параметрам — упирается в ограничения темы, и её приходится переписывать.
Уникальный дизайн сайта — это не про «необычные картинки». Это интерфейс, спроектированный под ваших клиентов, ваш продукт и ваши каналы продаж. Мы делаем дизайн с нуля, без шаблонов, именно поэтому: только так сайт решает конкретную задачу бизнеса, а не задачу автора темы.
Уникальный дизайн — это интерфейс, спроектированный под ваших клиентов, ваш продукт и ваши каналы продаж.
Как выбрать подрядчика на разработку дизайна сайта в Москве
Когда вы решаете заказать дизайн сайта, смотрите не только на красоту портфолио. Несколько вопросов помогут отличить студию, которая проектирует, от студии, которая рисует:
- С чего начинается работа? Если ответ — «пришлите референсы, и мы нарисуем главную», UX-этапа не будет.
- Покажете ли вы вайрфреймы до визуала? Хороший подрядчик согласует структуру раньше, чем цвета.
- Сколько стилевых направлений будет на старте и что будет, если ни одно не подойдёт?
- Входят ли в работу мобильные макеты всех ключевых страниц и UI-kit?
- Кто будет верстать? Если дизайн и разработку делают разные команды, как будет устроена передача макетов?
- Как вы проверяете макеты на пользователях?
Если у вас уже есть сайт, который устарел, разговор с подрядчиком стоит начинать не с новых макетов, а с того, что текущий сайт даёт бизнесу и что при обновлении нельзя потерять.
Частые вопросы
Можно ли заказать только UI-дизайн, если структура уже есть?
Можно, если структура действительно проработана: есть сценарии, карта сайта и вайрфреймы, согласованные с бизнесом. Но мы всё равно начинаем с короткого аудита этих материалов. Часто «готовая структура» оказывается списком страниц без логики переходов, и ошибки в ней дизайн только закрепит.
Сколько времени занимает разработка дизайна сайта?
Зависит от числа уникальных страниц, глубины исследования и скорости согласований. Лендинг и сайт с личным кабинетом отличаются в разы. Реалистичный срок можно назвать после того, как понятна структура и количество шаблонов страниц.
Нужна ли дизайн-система для небольшого сайта?
Полноценная дизайн-система для сайта из десяти страниц избыточна. Достаточно аккуратного UI-kit с состояниями элементов и описанием сетки. Дизайн-система окупается, когда сайт растёт, появляется личный кабинет или несколько продуктов под одним брендом.
Чем вайрфрейм отличается от макета?
Вайрфрейм показывает, какие блоки стоят на странице и в каком порядке, без цвета, шрифтов и графики. Макет — финальный вид страницы со всеми визуальными решениями. Вайрфрейм согласуют первым, потому что менять в нём содержание быстро и дёшево.
