Прототип сайта: что это и зачем он нужен

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

Что такое прототип и чем он отличается от дизайна

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

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

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

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

Какие бывают прототипы: от наброска до кликабельного

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

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

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

Вот как может выглядеть в вайрфрейме первый экран сайта проката велосипедов:

• заголовок «Аренда велосипедов на день и на выходные»;
• подзаголовок: какие есть модели и что входит в аренду — шлем, замок, фонарь;
• кнопка «Забронировать» и телефон рядом;
• серый прямоугольник с подписью «фото велосипедов у пункта проката».

Ни одного цвета, но уже видно, ясно ли предложение и есть ли что нажать.

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

Что проверяют на прототипе

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

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

Тексты. В хорошем прототипе уже стоят настоящие заголовки и черновики текстов, а не заглушки. Проверьте факты: правильно ли названы услуги, верны ли цены, условия и сроки. Их знаете только вы.

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

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

Цвета, шрифты, фотографии и анимацию на прототипе не оценивают: их время — на этапе дизайна.

Прототип под телефон: зачем отдельная схема

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

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

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

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

Как читать и согласовывать прототип

Серый прототип с непривычки кажется незаконченным. Так и задумано: он не должен выглядеть как сайт. Несколько советов, как его читать:

1. Читайте как клиент, а не как владелец. Представьте человека, который о вас не слышал: понятно ли ему, что вы предлагаете и что делать дальше?
2. Сверяйте факты. Услуги, цены, условия, адреса, ответы на частые вопросы — всё, что потом попадёт на сайт.
3. Проходите по кнопкам. В кликабельном прототипе — буквально, в статичном — мысленно.
4. Смотрите версию для телефона — на телефоне.
5. Оставляйте комментарии прямо в прототипе. В Figma их привязывают к конкретному месту на экране, и замечание не потеряется в переписке.
6. Описывайте проблему, а не решение. «Непонятно, сколько стоит выезд» полезнее, чем «добавьте сюда таблицу».

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

У нас прототип и тексты — один этап: 3–5 дней после разбора задачи. Потом схема превращается в макеты под компьютер и телефон.

Частые ошибки

• Оценивать цвета на сером прототипе: «скучно», «мрачно», «не наш стиль» — это разговор для этапа дизайна.
• Соглашаться на «рыбу». Lorem ipsum или «Здесь будет текст о компании» не дают проверить ни смысл, ни длину, и потом макет приходится перекраивать под настоящий текст.
• Согласовывать только версию для компьютера.
• Пропускать прототип, «чтобы сэкономить время»: правки никуда не денутся, просто переедут в дизайн и код.
• Утверждать «в целом» и молчать о сомнениях — они всё равно всплывут на макетах.
• Добавлять блоки «на всякий случай»: каждый лишний блок отодвигает главное.

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