UX/UI дизайн сайта: процесс от исследования до передачи

UX и UI: в чём разница и почему она стоит денег

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

Формально пользовательский опыт (user experience) — это весь путь человека: как он попал на сайт, что искал, что нашёл, сколько шагов сделал, где споткнулся, что почувствовал в конце. UI (user interface) — визуальный слой этого пути: типографика, цвет, сетка, состояния кнопок, иконки, отступы. Слои связаны, но решают разные задачи.

Почему разница коммерческая, а не теоретическая

Представьте два интернет-магазина. Первый выглядит скромно, но фильтр работает мгновенно, цена видна сразу, оформление заказа занимает три поля. Второй — с эффектной анимацией, крупными фото и корзиной, которая просит зарегистрироваться до того, как покажет стоимость доставки. Продавать будет первый. Не потому что «красота не важна», а потому что деньги приносит завершённое действие, а не впечатление.

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

Что дизайн НЕ делает

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

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

Шаг 1. Исследование, цели и разбор конкурентов

Дизайн начинается с вопроса «что должно произойти на этом сайте», а не «какой цвет вам нравится». Пока нет ответа, любая правка обсуждается вкусом, а вкус — это спор без победителя.

Что выясняем на старте

• Бизнес-цель. Заявки? Заказы? Записи на приём? Резюме на вакансию? Цель одна главная, остальные — вторичные.
• Целевое действие. Конкретная кнопка, которую человек должен нажать. Если их пять и все «главные» — не нажмут ни одну.
• Аудитория. Кто эти люди, насколько они разбираются в теме, с какого устройства заходят, что уже знают о вас.
• Возражения. Почему человек сомневается: дорого, долго, непонятно, «а вдруг обманут», «а сделают ли под мою задачу».
• Ограничения. Сроки, бюджет, существующая CRM, айдентика, требования юристов.

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

Разбор конкурентов — не для копирования

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

Эвристический аудит

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

Шаг 2. Сценарии пользователей вместо «страниц»

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

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

Сколько сценариев нужно

Для сайта услуг обычно три–пять. Больше — распыление, меньше — вы что-то упускаете. Типичный набор: «первый раз слышу о компании, изучаю», «сравниваю с конкурентом, ищу аргумент», «уже решил, хочу быстро связаться», «действующий клиент, ищу контакты или документ».

Разные состояния — разные экраны

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

• Пустое — фильтр ничего не нашёл, корзина пуста, заказов ещё нет. Что человек здесь видит и куда идёт дальше?
• Загрузка — что показываем, пока данные едут.
• Ошибка — сервер упал, оплата не прошла, поле заполнено неверно.
• Переполнение — название в три строки, 40 товаров, отзыв на 2000 знаков.
• Успех — заявка отправлена. Что дальше? «Спасибо» — это не ответ, человек хочет знать, когда ему позвонят.

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

Шаг 3. Информационная архитектура

Информационная архитектура — это то, где что лежит и как названо. Она решает половину проблем с навигацией ещё до первого пикселя.

Работа простая на словах и муторная на деле: собрать весь контент, сгруппировать по смыслу, назвать группы словами клиента, выстроить приоритет. Ключевое — словами клиента. Раздел «Решения» понятен вам, но человек ищет «ремонт холодильников». Внутренняя структура компании не должна протекать в меню.

Правила, которые экономят время

• Меню — не свалка. Пять–семь пунктов верхнего уровня. Если не влезает — значит, группировка неверная.
• Глубина ≤ 3 кликов до любой важной страницы. Дальше начинаются потери.
• Один смысл — одна страница. Две похожие страницы конкурируют друг с другом и в навигации, и в поиске.
• Имя = запрос. Название пункта меню должно совпадать с тем, как об этом думает и говорит человек.

Приоритет на странице

Внутри страницы работает та же логика: сначала ответ, потом подробности, потом доказательства, потом действие. Посетитель решает за секунды, туда ли он попал, и решает по первому экрану. Если сверху «Добро пожаловать на наш сайт», вы потратили самое дорогое место на страницу-заглушку.

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

Проверка архитектуры без макета

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

Шаг 4. Wireframes: скелет без косметики

Wireframe — это чёрно-белая схема экрана: что за чем идёт, что важнее, где действие. Никаких шрифтовых изысков, теней и фото. Специально.

Смысл серости — убрать из обсуждения всё, что отвлекает от структуры. На цветном макете заказчик неизбежно скажет «давайте кнопку поярче», и разговор о том, что кнопка вообще не в том месте, уже не состоится. Прототип в оттенках серого возвращает разговор к сути: понятно ли, что за компания, что она предлагает, почему ей верить и что делать дальше.

Что должно быть в вайрфрейме

• Реальные заголовки и подписи, а не «Lorem ipsum». Текст-рыба врёт о длине и о смысле.
• Настоящее количество элементов: если в каталоге 12 позиций, не рисуйте три.
• Все ключевые состояния из предыдущего шага.
• Мобильная и десктопная версии ключевых экранов — сразу, а не «потом адаптируем».

Сколько экранов рисовать

Не все. Рисуют типы страниц: главная, страница услуги, каталог, карточка, форма, статья, контакты, служебные (404, «спасибо»). Остальное собирается из тех же блоков. Если для каждой новой страницы нужен новый макет — у вас нет системы, у вас набор картинок.

Согласование на этом этапе — самое дешёвое

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

Шаг 5. UI-концепция: как выглядит доверие

Когда структура согласована, появляется визуальный слой. Его задача — не «украсить», а сделать структуру очевидной и вызвать доверие.

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

Из чего собирается UI-концепция

• Типографика. Шрифтовая пара, размеры, интерлиньяж, длина строки. Это 80% ощущения от сайта, потому что сайт — это в основном текст.
• Цвет. Нейтральная база, один акцент под целевое действие, служебные цвета для ошибок и успеха. Акцентный цвет тратится только на главное — иначе он перестаёт работать.
• Сетка и ритм. Единый шаг отступов (например, кратный 4 или 8) вместо «на глаз».
• Фото и графика. Свои снимки процесса и людей работают лучше идеальных стоков, потому что стокам никто не верит.
• Тон. Интерфейс говорит: строго, дружелюбно, технично. Это тоже решение, а не случайность.

Концепция — это один экран, а не весь сайт

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

И главное: концепция оценивается не «нравится/не нравится», а «работает ли на задачу». Об этом — в разделе про обратную связь.

Шаг 6. Дизайн-система и компоненты

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

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

Что входит в систему

• Токены. Цвета, шрифтовые размеры, радиусы, тени, шаг сетки — как именованные переменные, а не как значения «по месту».
• Компоненты. Кнопка со всеми состояниями (обычная, наведение, фокус, нажатие, загрузка, отключена), поле ввода с ошибкой и подсказкой, карточка, модалка, таблица, пагинация.
• Правила композиции. Когда какой заголовок, сколько воздуха между блоками, как ведут себя элементы при переполнении.
• Паттерны. Форма, фильтр, оформление заказа — типовые сборки из компонентов.

Зачем это клиенту, а не только дизайнеру

Система — это ваша экономия на будущем. Запуск новой услуги, лендинг под акцию, новый раздел — всё это собирается из существующего и не требует нового дизайн-проекта. Плюс сайт не «расползается» со временем, когда правки вносят разные люди.

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

Шаг 7. Прототип, передача в разработку и дизайн-QA

Прототип — это кликабельный макет, в котором можно пройти сценарий целиком, до единой строчки кода. Он отвечает на вопрос, который статичная картинка не закрывает: «а что происходит, когда я нажимаю?»

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

Что входит в передачу разработчику

• Макеты в двух-трёх ключевых ширинах: мобильная, планшет/промежуточная, десктоп.
• Все состояния компонентов и экранов.
• Токены и правила: цвета, шрифты, шаг сетки, поведение при переполнении.
• Поведение: что кликабельно, что открывается, что анимируется и сколько миллисекунд.
• Тексты — финальные, а не примерные. Ассеты — иконки, изображения, логотипы в нужных форматах.
• Крайние случаи: очень длинное название, отсутствие фото, ноль результатов.

Хорошая передача — это не «вот ссылка на файл». Это встреча, где дизайнер и разработчик проходят по макету и вслух проговаривают неочевидное. Полчаса разговора экономят неделю переписки.

Дизайн-QA: проверка после сборки

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

Мобильные устройства и доступность простыми словами

Проектировать начинают с мобильного экрана — не потому что это модно, а потому что там жёстче ограничения. Если содержимое умещается и работает на 360 пикселях в ширину, на десктопе оно разложится без боли. Наоборот — почти никогда.

Mobile-first — это дисциплина приоритетов. На маленьком экране нельзя показать всё сразу, поэтому приходится честно ответить, что важнее. Ответ на этот вопрос потом улучшает и десктопную версию.

Что проверяют в мобильной версии

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

Доступность: четыре вещи, которые дают 80% результата

• Контраст. Светло-серый текст на белом красив на макете и нечитаем на улице при солнце. Контраст нужен и людям со слабым зрением, и вам — на дешёвом экране в дороге.
• Фокус. При навигации с клавиатуры видно, на каком элементе вы находитесь. Убирать обводку фокуса «ради красоты» — распространённая и грубая ошибка.
• Клавиатура. Всю форму можно заполнить и отправить, не трогая мышь. Модалку можно закрыть, из меню можно выйти.
• Alt-тексты. Короткое описание смысла изображения. Помогает незрячим пользователям и заодно поиску.

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

Текст — это тоже дизайн

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

Отсюда правило: дизайн без готового контента — это гадание. Дизайнер придумывает заголовок в три слова, а у клиента он в двенадцать. Придумывает три преимущества, а реальных два и они другие. Макет разваливается на этапе наполнения, и все удивляются.

Слова, которые чинят интерфейс

• Кнопка описывает результат. «Получить расчёт» лучше, чем «Отправить». Человек должен понимать, что произойдёт после нажатия.
• Заголовок отвечает, а не интригует. «Разработка сайтов для медицинских центров» работает; «Мы создаём будущее» — нет.
• Ошибка объясняет, что делать. «Неверный формат» — плохо. «Введите телефон в формате +380…» — хорошо.
• Подписи вместо догадок. Если поле требует специфических данных, скажите это до ошибки, а не после.
• Меньше слов на том же смысле. Каждое лишнее предложение снижает шанс, что прочтут нужное.

Практика, которая экономит недели: собрать текст ключевых экранов до отрисовки — хотя бы черновиком, в таблице. Тогда дизайнер работает с реальной длиной и реальными смыслами, а не подгоняет жизнь под макет.

Как давать полезную обратную связь и сколько правок нормально

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

Формула рабочего комментария

Говорите о задаче, а не о решении. Схема: что я вижу → что меня смущает → чем это грозит. Например: «На первом экране не сказано, что мы работаем по всей стране. Клиенты постоянно спрашивают об этом в первом же звонке — боюсь, часть просто не дойдёт до формы». Это комментарий, с которым дизайнер может работать. А «сделайте кнопку красной» — это уже готовое решение, и оно, скорее всего, не про кнопку.

Правила, которые ускоряют согласование

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

Сколько итераций — нормально

Обычная практика: два круга правок на каждом этапе (структура, концепция, макеты) и один финальный полировочный. Это не жадность студии, а защита проекта: бесконечные круги почти всегда означают, что не согласована цель, а не пиксели. Если на третьем круге спор идёт о том же самом — проблема на шаге исследования, и туда надо вернуться.

Типичные ошибки, которые дорого стоят

• Дизайн без контента. Макет по «рыбе» разваливается при наполнении. Всегда.
• Копирование конкурента. Вы копируете картинку, не зная, работает ли она у него.
• Украшательство вместо ясности. Анимации, параллакс и слайдеры вместо ответа на вопрос «что вы продаёте».
• Много целей на одном экране. Пять равнозначных кнопок = ноль нажатий.
• Дизайн ради жюри. Макет для конкурса и макет для продаж — разные жанры.
• Никто не отвечает за приёмку. Проект без владельца решений тянется месяцами.

Чек-лист: как оценить дизайн до передачи в разработку

Перед тем как отдавать макеты в вёрстку, пройдите список. Каждый пункт — это правка ценой в минуты сейчас и в дни потом.

Смысл

• За 5 секунд на первом экране понятно: что за компания, что предлагает, кому, что делать дальше.
• На каждом экране одно главное действие, и оно визуально главное.
• Есть ответ на ключевые возражения: цена или её вилка, сроки, гарантии, кто вы такие.
• Все обещания подкреплены: кейсы, отзывы с именами, цифры, которые вы можете подтвердить.

Структура

• Блоки идут в логике «ответ → подробности → доказательства → действие».
• Навигация: 5–7 пунктов, названия — словами клиента, важное в ≤3 кликах.
• Нет двух страниц про одно и то же.

Полнота макетов

• Есть мобильная версия каждого типа страницы, а не только десктоп.
• Нарисованы состояния: пусто, загрузка, ошибка, успех, длинный текст, много элементов.
• Тексты финальные, изображения реальные, «Lorem ipsum» отсутствует.
• Есть служебные страницы: 404, «спасибо», страница ошибки оплаты, если она нужна.

Система и доступность

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

Готовность к сборке

• Разработчик посмотрел макеты до утверждения и сказал, что это реализуемо в срок.
• Описано поведение: клики, открытия, анимации, поведение форм.
• Понятно, что редактируется через админку, а что зашито намертво.
• Назначен человек, который принимает дизайн-QA после сборки.

Если по каждому пункту у вас «да» — макет можно отдавать в работу спокойно. Если больше трёх «нет» — вы не готовы, и вёрстка эти дыры не залатает, а зафиксирует. Нужен взгляд со стороны на ваш текущий сайт или на макет, который вам нарисовали? Напишите нам — посмотрим по этому же списку и честно скажем, что чинить в первую очередь.

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