Определите задачу и границы

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

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

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

Спроектируйте страницы и сценарии

Составьте перечень страниц и связи между ними. Не переносите меню конкурента целиком: его структура может отражать другой ассортимент и другую аудиторию. Для каждой вашей страницы определите основной вопрос и следующий шаг.

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

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

Соберите простой прототип

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

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

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

Создайте согласованные визуальные правила

Определите типографику, палитру, интервалы, сетку и основные компоненты. Кнопки одного назначения должны вести себя и выглядеть последовательно. Карточки, поля и сообщения об ошибках лучше строить из небольшого повторяемого набора правил.

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

Смысловая структура должна сохраняться при реализации, а не существовать только визуально. Рекомендации W3C по структуре страницы объясняют роль областей и логичных заголовков для навигации. Крупная надпись в макете ещё не определяет правильную HTML-разметку.

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

Продумайте размеры и состояния

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

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

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

Что передать в разработку

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

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

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