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