Прототип сайта: что это, как его делают и зачем он заказчику

Что такое прототип сайта

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

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

Прототип, макет и дизайн: в чём разница

Эти слова часто путают. Разница — в том, на какой вопрос отвечает каждый этап:

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

Зачем прототип заказчику

• Правки дешевле. Переставить блок или переписать заголовок в прототипе — минута. В готовом дизайне — перерисовка экранов.
• Спор о смыслах, а не о цвете. Без цвета и фото обсуждают главное: понятен ли оффер, есть ли ответ на страх клиента, где цена.
• Тексты пишутся под структуру. Когда тексты готовы на этапе прототипа, дизайнер не рисует под «рыбу», и дизайн потом не ломается от длинных заголовков.
• Видно, будет ли сайт продавать. По прототипу с текстами можно пройти путь клиента от первого экрана до формы и найти, где он уйдёт.

Что согласуют на этапе прототипа

1. Оффер первого экрана — заголовок, подзаголовок, кнопка и 3–4 факта доверия рядом.
2. Порядок блоков — что посетитель видит вторым, третьим и где ему предлагают оставить заявку.
3. Тексты каждого блока — финальные или близкие к финальным.
4. Ответы на возражения — где на сайте снят страх «цена вырастет», «сорвут сроки», «будет не как на картинке».
5. Формы и кнопки — что обещает каждая кнопка и какие поля в форме.
6. Какие фото и графика нужны — список, чтобы заказчик успел собрать материалы, пока рисуется дизайн.

Как выбрать блоки и порядок, подробно разобрал в статье «Структура продающего лендинга».

Как я делаю прототип: 5 шагов

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

1. 01АнализКлиенты, конкуренты, запросы в Яндексе, отзывы о нише
2. 02Страхи и вопросыСписок того, что клиент должен узнать до заявки
3. 03СтруктураКакой блок отвечает на какой вопрос и в каком порядке
4. 04ТекстыОффер, заголовки и тексты блоков — сразу в схеме
5. 05СогласованиеПоказываю по ссылке, 2 круга правок, затем — дизайн

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

В чём делают прототипы

• Фигма — стандарт: прототип собирается из блоков, заказчик смотрит и комментирует по ссылке, дизайн потом рисуется в том же файле.
• Бумага или доска — для первых набросков, когда нужно быстро сравнить два варианта структуры.
• Конструктор сайтов — иногда прототип собирают сразу на Тильде из стандартных блоков. Быстро, но тексты в таком варианте часто подгоняются под готовые блоки, а не наоборот.

Ошибки, из-за которых прототип не помогает

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

Частые вопросы