Прототип сайта — схематичная модель будущих страниц без цвета, шрифтов и изображений: серые блоки, подписи и стрелки, показывающие, что где расположено и куда ведёт. Его задача — договориться о структуре и логике до того, как начнётся дорогая работа над дизайном и вёрсткой.
Простыми словами
Прототип относится к сайту так же, как план квартиры к ремонту. На плане видно, где стены и двери, и переставить их стоит один вечер. После того как плитка положена, тот же перенос стоит несоизмеримо дороже.
Поэтому спорить о том, нужен ли блок с ценами и где стоит форма, дешевле всего именно на прототипе. Правка на этом этапе занимает минуты, та же правка после вёрстки — дни.
Что показывает прототип
Порядок блоков на странице и то, что человек видит без прокрутки. Расположение призывов к действию. Состав каждой формы. Логику меню и переходов между разделами. Поведение на мобильном экране, где блоки выстраиваются в один столбец и порядок становится критичным.
Чего прототип не показывает намеренно: цвета, шрифты, фотографии. Это сделано специально, чтобы обсуждение шло про удобство и смысл, а не про оттенок кнопки.
Почему это важно вашему бизнесу
Прототип — самый дешёвый способ обнаружить, что вы и подрядчик представляли себе разные сайты. Обычно это выясняется на первой же странице: заказчик ждал каталог с фильтрами, подрядчик заложил список из шести услуг.
Он же делает предсказуемым бюджет. Когда структура утверждена, объём работы становится измеримым, и оценка перестаёт быть вилкой наугад.
Частые вопросы
Прототип и макет — это одно и то же?
Нет. Прототип — серая схема без оформления, макет — готовый дизайн с цветами, шрифтами и изображениями. Прототип идёт первым, макет собирается на его основе.
Можно ли пропустить прототип и сразу делать дизайн?
Для одностраничника на готовой теме — можно. Для многостраничного сайта или магазина пропуск обычно оборачивается переделкой макетов, что дороже, чем сам прототип.
Кто утверждает прототип?
Заказчик. Это точка, после которой структура считается согласованной, и от неё же отсчитывается объём работ по договору.
Связанные термины
Техническое задание · UX/UI · Конверсия · Адаптивный дизайн
Подробнее
Этап прототипирования входит в наши проекты — подробности на странице разработка сайтов. Как проходит согласование по шагам, описано в гайде как заказать разработку сайта.
Что входит в работу над видимостью сайта в Google, описано на странице SEO-услуги для бизнеса.