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

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

Что это такое

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

Что на нём решать

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

Сколько экранов достаточно

Для посадочной страницы обычно хватает одной длинной схемы. Для сайта компании — главная и один внутренний шаблон услуги: остальные услуги повторят его. Для каталога — список товаров и карточка. Рисовать все сорок страниц прототипом имеет смысл только если они устроены по-разному.

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

Как принимать

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

Подписи в блоках лучше ставить настоящими, хотя бы черновыми. «Заголовок» и «текст о компании» не показывают, помещается ли мысль. Фраза «Ремонт кровли в Подольске за один день» сразу видна: длинная она или нет.

Что прислать со своей стороны

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

Когда можно без отдельного прототипа

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