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