Соблазн велик: пропустить «скучные схемы» и сразу увидеть красивый дизайн. Но именно на этом шаге чаще всего и теряются бюджеты. Прототип помогает договориться о сути сайта до того, как дизайнер потратит время на цвета и шрифты, — и поэтому правки на нём стоят в разы дешевле.
01Что такое прототип сайта
Прототип (его ещё называют вайрфреймом) — это упрощённая схема страниц, на которой показано расположение блоков, тексты-заглушки и переходы между разделами. Обычно он чёрно-белый и нарочно невзрачный: ни фирменных цветов, ни фотографий, ни финальных шрифтов. Так внимание сосредоточено на главном — на структуре и логике, а не на «нравится/не нравится цвет кнопки».
Прототип отвечает на вопросы: какие экраны есть на странице, в каком порядке они идут, что человек видит первым, куда он нажимает дальше и как доходит до заявки. Это чертёж сайта перед его «отделкой».
02Зачем согласовывать прототип до дизайна
Главная причина — стоимость изменений. Переставить блоки на схеме занимает минуты. Переделать тот же блок в готовом цветном макете, где уже выверены отступы, иллюстрации и анимации, — это часы работы дизайнера. А если правку заметили уже на свёрстанном сайте, переделка обходится ещё дороже.
Есть и вторая причина — взаимопонимание. Когда заказчик и команда обсуждают абстрактные слова («сделайте посовременнее»), каждый представляет своё. Прототип переводит разговор в конкретику: вот первый экран, вот блок с услугами, вот форма. Несостыковки всплывают сразу, а не после сдачи проекта.
Правка на прототипе стоит дёшево, на дизайне — дороже, на готовом сайте — ещё дороже. Чем раньше поймали ошибку, тем меньше она стоит.
03Что прототип показывает, а что нет
Чтобы прототип приносил пользу, важно понимать границы этого этапа.
Что прототип показывает
- Набор и порядок блоков на каждой странице.
- Что попадает на первый экран, а что ниже.
- Логику переходов: откуда и куда ведут кнопки и меню.
- Места под формы, кнопки заявки, телефоны и мессенджеры.
- Примерный объём текста — сколько его реально нужно.
Чего на прототипе ещё нет
- Фирменных цветов и стиля.
- Финальных фотографий и иллюстраций.
- Точных шрифтов и мелкой графики.
- Анимаций и эффектов.
Не пугайтесь, что прототип выглядит «бедно». Это не дизайн и не должен на него походить — его задача показать каркас, а красоту наводят на следующем шаге.
04Как прототип экономит деньги
На практике экономия складывается из нескольких вещей. Во-первых, дизайнер рисует один раз по утверждённой схеме, а не переделывает макеты по кругу. Во-вторых, прототип помогает заранее увидеть лишние блоки — то, что «хотелось добавить», но что на деле мешает посетителю дойти до заявки. В-третьих, на схеме проще обсудить логику продаж: где разместить аргументы, отзывы и цены, чтобы они работали.
Хороший прототип ещё и упрощает наполнение: становится понятно, сколько текста писать и какие фотографии искать. Если на сайт планируется привлекать трафик из поиска, на этом этапе удобно заложить страницы под нужные запросы — это часть работы над SEO-продвижением, и продумать её до дизайна гораздо дешевле, чем перекраивать готовый сайт.
05Прототип и техническое задание
Прототип и ТЗ дополняют друг друга. ТЗ описывает словами, что должно быть на сайте и как он работает, а прототип показывает то же самое визуально. Вместе они почти не оставляют места для разночтений: подрядчик понимает задачу, а заказчик видит, за что платит. Подробнее о документе мы рассказываем в материале о том, как составить техническое задание на сайт.
Когда прототип утверждён, удобно проверить и общую логику разделов — особенно если сайт многостраничный. Тут пригодится понимание структуры сайта услуг: какие страницы нужны и как они связаны между собой.
06Как проходит работа над прототипом
Обычно последовательность такая: сначала собирают вводные о бизнесе и задачах сайта, затем продумывают набор страниц и блоков, рисуют схему, показывают заказчику и вносят правки. Как правило, двух-трёх итераций хватает, чтобы все блоки встали на места. Только после этого схему передают в дизайн.
Сколько времени занимает этот этап, зависит от объёма сайта: для визитки прототип готов быстро, для большого сайта с десятками страниц — дольше. Но в любом случае это вложение, которое окупается за счёт сэкономленных правок дальше по проекту. Как этот шаг встроен в общий процесс, можно посмотреть на странице создания сайтов.
Сначала схема — потом красота
Мы начинаем сайт с прототипа: согласуем структуру и логику страниц, пока правки ещё ничего не стоят. Так дизайн рисуется один раз по утверждённому каркасу, а вы заранее понимаете, каким будет сайт.
Официальная документация по теме — Справка Яндекс.Вебмастера.