Макет сайта: прототип страниц до дизайна и вёрстки

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

Зачем прототип, если можно сразу рисовать дизайн

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

Уровни детализации

Схема

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

Прототип с контентом

Реальные или близкие к реальным заголовки и тексты, примерное количество карточек и пунктов. Позволяет понять объём страниц.

Кликабельный прототип

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

Какие страницы прототипировать

• Главную
• Типовую страницу услуги или товара
• Каталог с фильтрами
• Корзину и оформление заказа
• Контакты и форму заявки
• Мобильные версии ключевых страниц

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

Что должно быть на прототипе

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

Как согласовывать

1. Сначала карта сайта: список страниц и их связи
2. Затем прототип главной и одной типовой страницы
3. Комментарии собираются в одном месте от одного ответственного
4. После утверждения шаблонов — остальные страницы
5. Утверждённый прототип фиксируется как основа для дизайна

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

Контент на этапе прототипа

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

Ошибки

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

Инструменты

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

Проверка прототипа на людях

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

Итог

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