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

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

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

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

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

Правка в прототипе — это передвинуть блок. Правка в готовом дизайне — перерисовать несколько экранов. Правка после вёрстки — снова пройти дизайн, вёрстку и тестирование.

Какие бывают прототипы

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

Вид	Как выглядит	Для чего подходит
Скетч	Набросок от руки или на доске, блоки прямоугольниками	Первое обсуждение идеи, мозговой штурм
Схема (wireframe) низкой детализации	Серые блоки с подписями «здесь отзывы», «здесь форма»	Согласование структуры страниц и порядка блоков
Схема высокой детализации	Реальные заголовки и тексты, точные элементы форм, но без стиля	Согласование содержания и логики, основа для дизайна
Интерактивный прототип	Кликабельные экраны, переходы между страницами, состояния кнопок	Проверка сценариев: оформление заказа, личный кабинет, калькулятор

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

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

Из чего состоит прототип страницы

Хороший прототип — это не набор прямоугольников. На нём должно быть понятно, что увидит посетитель и что ему предлагается сделать. Минимальный состав:

Шапка и навигация — пункты меню, контакты, кнопка главного действия.
Первый экран — заголовок, подзаголовок, оффер, призыв к действию. Лучше с реальными формулировками, а не «Lorem ipsum».
Блоки содержания в порядке прочтения — услуги, цены, преимущества, кейсы, отзывы, FAQ, этапы работы.
Точки конверсии — где стоят формы, кнопки, телефон, мессенджеры, и что происходит после нажатия.
Подвал — реквизиты, адрес, дополнительные ссылки.
Мобильная версия — хотя бы для ключевых страниц, потому что порядок и видимость блоков на телефоне часто меняются.

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

Откуда берётся структура: прототип не рисуется «из головы»

Частая ошибка — начинать прототип с вопроса «какие блоки обычно бывают на таких сайтах». Правильнее начать с двух источников: спроса и клиента.

Спрос

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

Клиент

Содержание каждой страницы определяют вопросы, которые клиент задаёт перед покупкой. Мы собираем их из звонков и переписки с менеджерами, отзывов, вопросов на сайтах конкурентов. Каждый частый вопрос должен находить ответ на странице — блоком, строкой в таблице или пунктом FAQ.

Как проверить прототип перед согласованием

Прототип присылают со словами «посмотрите и дайте обратную связь». Чтобы обратная связь была полезной, пройдите по вопросам:

Понятно ли с первого экрана, что вы делаете, для кого и в каком городе?
Есть ли на странице ответы на пять самых частых вопросов клиентов?
Видна ли цена или хотя бы понятный ориентир по стоимости?
Сколько действий нужно, чтобы оставить заявку? Можно ли сделать это с телефона одной рукой?
Есть ли доказательства: кейсы, отзывы, фото работ, сертификаты?
Не повторяют ли разные страницы одно и то же?
Куда ведёт каждая ссылка и кнопка? Нет ли тупиков?
Как выглядит мобильная версия и не теряются ли на ней важные блоки?
Есть ли на прототипе реальные тексты или хотя бы их тезисы?
Согласуется ли прототип с тем, что вы будете готовы поддерживать: обновлять цены, публиковать кейсы, отвечать в чате?

Последний вопрос отсекает красивые, но нежизнеспособные решения. Блок «Новости», который никто не будет вести, через полгода превращается в свидетельство заброшенности сайта.

Кто должен участвовать в согласовании

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

Полезный приём — провести короткий «тест на незнакомце». Покажите прототип человеку, который не знает ваш бизнес, и попросите за 10 секунд сказать, что здесь продают и что нужно сделать дальше. Если он не может ответить, проблема не в дизайне, который ещё не нарисован, а в структуре и формулировках. Такой тест ничего не стоит, но регулярно спасает от дорогих ошибок.

Главное — договориться, кто собирает замечания в один список. Три несогласованных письма от разных сотрудников превращают этап в бесконечные итерации.

Частые мифы о прототипе

«Это то же самое, что дизайн, только некрасиво». Нет, это другой документ с другой задачей: согласовать смысл, а не внешний вид.
«Дизайнер сам разберётся». Дизайнер разберётся с композицией, но не знает, какие вопросы задают ваши клиенты и какие услуги приносят прибыль.
«Для лендинга прототип не нужен». Лендинг — как раз тот случай, где порядок блоков решает всё: у одностраничника нет второго шанса удержать посетителя.
«После согласования ничего нельзя менять». Можно, но каждое изменение после прототипа стоит дороже. Поэтому серьёзные правки лучше вносить именно на этом этапе.
«Прототип — это ТЗ». Прототип дополняет техническое задание, но не заменяет его: интеграции, требования к CMS и SEO описываются отдельно. Прототип и ТЗ живут вместе и ссылаются друг на друга.

Сколько времени занимает прототипирование

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

В стоимость дизайна прототип у нас входит по умолчанию: веб-дизайн начинается от 30 000 ₽, пакет для лендинга — от 60 000 ₽. Если нужен только прототип без дальнейшего дизайна, например для внутренней команды, это обсуждается отдельно.

Прототип при редизайне: с чего начать, если сайт уже есть

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

Метрика — какие страницы приносят заявки, где посетители уходят, какие блоки не досматривают до конца (карта скроллинга и Вебвизор).
Вебмастер — по каким запросам страницы уже показываются в поиске. Эти страницы и их адреса нельзя потерять при новой структуре.
Отдел продаж — какие вопросы клиенты задают по телефону, хотя ответ вроде бы есть на сайте. Значит, он спрятан или сформулирован непонятно.
Сайты конкурентов — не для копирования, а чтобы понять, какие ожидания уже сформированы у ваших клиентов.

Главная ошибка при редизайне — перерисовать структуру «по-новому» и удалить страницы, которые приносили трафик. Поэтому на прототипе мы отдельно помечаем, какие существующие адреса сохраняются, какие объединяются и куда будут вести редиректы. Это превращает прототип ещё и в карту переезда, которую потом использует разработчик.

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

Что происходит после согласования прототипа

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

Хотите, чтобы структура сайта продавала ещё до того, как появится дизайн? Начнём с прототипа ключевых страниц — посмотрите, как мы работаем, на странице проектирования и дизайна сайтов.