Путь от задачи до готовых экранов состоит из нескольких шагов, и пропуск любого из них почти всегда оборачивается переделками на поздних этапах. Мы проходим их в одном и том же порядке: сначала разбираемся, кто и зачем придёт на страницу, затем собираем структуру, потом схемы экранов и только после этого оформление. Ниже разбираем, что происходит на каждом шаге, какой результат считается принятым и что мы проверяем, прежде чем идти дальше.
Этапы работы и результат каждого
Таблица описывает полный цикл. На небольших проектах шаги идут быстрее, часть из них укладывается в одну встречу, но ни один не исчезает совсем: иначе решение, которое не приняли явно, всё равно принимается позже и обычно случайно.
| Этап | Результат | Что проверяем |
|---|---|---|
| Постановка задачи | Описание пользователя и его сценариев | Понимание бизнес-цели и того, чем меряется результат |
| Структура | Карта страниц и разделов | Полноту разделов, отсутствие дублей, глубину переходов |
| Каркасы экранов | Схемы без оформления | Сценарии, состав и порядок блоков |
| Оформление | Макеты ключевых страниц | Иерархию, читаемость, единство компонентов |
| Состояния и крайние случаи | Пустые списки, ошибки, длинные тексты | Устойчивость макета к реальным данным |
| Передача в разработку | Макеты, параметры, ассеты | Полноту передачи и однозначность решений |
Постановка задачи: что выясняем до первого экрана
Дизайн начинается не с подбора картинок, а с разговора. На этом шаге мы выясняем, кто приходит на сайт, с какой задачей и что мешает ему её решить сегодня. Ответы берём не из головы: из разговоров с менеджерами, из типовых вопросов клиентов, из аналитики действующего сайта, если он есть.
- Кто пользователь: специалист, руководитель, частный покупатель, подрядчик.
- Что он делает на сайте: сравнивает, ищет конкретную позицию, проверяет надёжность компании, оставляет заявку.
- Что он должен узнать, чтобы принять решение: цена, сроки, состав работ, доказательства опыта.
- Чем измеряется результат для бизнеса: заявки, звонки, регистрации, снижение нагрузки на поддержку.
- Какие ограничения уже есть: CMS, фирменный стиль, сроки, существующая база контента.
Записанные ответы становятся критерием приёмки. Когда через месяц возникает спор о том, нужен ли на странице ещё один блок, мы возвращаемся к этому списку, а не к личным предпочтениям участников обсуждения.
Структура: карта страниц вместо списка пожеланий
Второй шаг превращает набор хотелок в карту: какие разделы существуют, что вложено во что, как называется каждый пункт меню. Здесь же становится видно, что двух страниц про одно и то же быть не должно, а важная услуга спрятана на четвёртом уровне вложенности.
Мы держимся простого правила: любая страница, ради которой люди приходят на сайт, должна открываться за два-три перехода с главной. Всё, что глубже, находят редко, и поисковым роботам такие страницы тоже достаются в последнюю очередь.
- Собираем полный список того, что компания продаёт и о чём рассказывает.
- Группируем по тому, как об этом думает клиент, а не по внутренним отделам.
- Проверяем названия разделов на понятность человеку со стороны.
- Отмечаем страницы, которые обязаны быть в главном меню, и те, что живут в подвале.
Каркасы: почему этот этап нельзя пропускать
Каркас — это схема экрана без цвета, без фотографий и без шрифтовых изысков: прямоугольники, подписи и порядок блоков. Именно на этом шаге обсуждается суть: что стоит выше, какой вопрос закрывает каждый блок, что клиент видит до прокрутки.
Обсуждение цветного макета всегда съезжает на цвета и шрифты, даже если по структуре есть вопросы поважнее. Каркас удерживает разговор на содержании. Правка на этом этапе стоит минут, а та же правка на готовом макете тянет за собой перерисовку соседних экранов, обновление компонентов и повторное согласование.
Мы показываем каркасы не как черновик, который стыдно отдавать, а как рабочий документ. Ненарисованность здесь полезна: она мешает оценивать красоту и заставляет читать содержание.
Оформление: макеты ключевых страниц
К оформлению мы приходим с утверждённой структурой и составом блоков, поэтому рисуем не всё подряд, а ключевые страницы: главную, страницу услуги или товара, форму, типовую внутреннюю страницу. Остальные собираются из тех же компонентов.
- Иерархия. На каждом экране понятно, что главное, что второстепенное, где целевое действие.
- Читаемость. Контраст основного текста к фону не ниже 4.5:1, комфортная длина строки, различимый кегль на телефоне.
- Единство. Кнопки, поля, карточки и заголовки описаны один раз и повторяются, а не рисуются заново на каждом экране.
- Сетка и отступы. Заданы шкалой, а не подгоняются на глаз, иначе вёрстка получится приблизительной.
Состояния и крайние случаи
Макет, нарисованный на удобных данных, ломается о реальные. Название товара в три строки, пустая корзина, отсутствующая фотография, ошибка оплаты — всё это видит пользователь, и всё это должно быть нарисовано заранее, иначе решение примет разработчик на ходу.
- Пустые состояния: список без результатов, раздел без записей, история без заказов.
- Ошибки: неверно заполненное поле, недоступный сервис, истёкшая ссылка.
- Загрузка: что видно, пока данные едут.
- Длинные и короткие данные: заголовок в одну строку и в четыре, цена из пяти знаков и из девяти.
- Состояния элементов: наведение, нажатие, фокус с клавиатуры, отключённая кнопка.
Передача в разработку и что обычно забывают
Передача — это не отправка ссылки на макет. Мы отдаём собранный комплект: экраны в нужных разрешениях, значения цветов и отступов, шрифты с лицензией, иконки и изображения в исходных форматах, описание поведения при наведении и на узких экранах.
Список того, что забывают чаще всего, из проекта в проект повторяется:
- Мобильную версию: её оставляют на потом, и потом её верстают наугад.
- Реальные тексты: макет на заглушках выглядит стройно ровно до момента, когда придёт настоящий контент.
- Поведение длинных списков и таблиц на узком экране.
- Письма, которые сайт отправляет после отправки формы, — их тоже видит клиент.
- Страницу ошибки и страницу подтверждения: их рисуют последними или не рисуют вовсе.
Ускорить процесс помогает не сокращение этапов, а порядок работы: согласовывать шаги по очереди, а не весь проект в конце; собрать реальные тексты заранее; собирать экраны из компонентов; заранее договориться, кто в проекте принимает решение по спорным вопросам. Один ответственный со стороны заказчика экономит больше времени, чем любые инструменты.
С чего начинаем работу
Если сайт уже есть, но интерфейс мешает продажам, мы начинаем с разбора сценариев и каркасов, а не с перерисовки главной. Так видно, какие правки действительно влияют на заявки, а какие просто меняют внешний вид. Разберём вашу задачу и предложим план: проектирование интерфейсов с прототипом и тестированием.
Если интерфейс уже мешает продажам, разбираем его по шагам: проектирование интерфейсов с прототипом и тестированием.
