Прототип сайта: зачем он и как экономит бюджет

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

Прототип это чертёж сайта до дизайна: какие страницы есть, какие блоки на каждой, где кнопки и куда они ведут. Без цветов, фото и красивых шрифтов. Многим хочется сразу к красоте, но прототип как раз экономит деньги, и вот почему

Если коротко: на прототипе правка стоит минуты, после запуска дни. Поэтому спорить о структуре выгоднее на серых прямоугольниках

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

• Скетч: набросок на бумаге или доске, чтобы договориться о логике. Рисовать красиво не нужно, стрелочки прощают всё
• Вайрфрейм: серые блоки в Figma с настоящими заголовками и кнопками
• Кликабельный прототип: страницы связаны между собой, по ним можно пройти как по сайту

Для большинства сайтов я делаю вайрфреймы главных страниц и связываю их в кликабельный прототип

02Зачем он нужен

Договориться о структуре

На прототипе спорят о сути: какие блоки нужны, в каком порядке, что главное на странице. Серые прямоугольники скучные, и в этом их сила: никто не отвлекается на оттенок синего

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

Написать тексты под место

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

Проверить на людях

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

Смотреть на это немного больно: вы знаете, где кнопка, а человек третью минуту ищет её не там. Зато исправить это сейчас стоит минуты, а не нервов после запуска

03Как он экономит бюджет

Чем позже правка, тем она дороже. Примерно так растёт цена одного и того же «давайте сдвинем блок»:

• на прототипе: 5 минут
• в готовом дизайне: 2 часа, потому что нужно перестроить адаптив и соседние блоки
• в коде после запуска: 2 дня с проверкой и выкладкой

Поэтому прототип не лишний этап, а страховка. Он стоит малую часть бюджета и снимает самые дорогие переделки. Как разработка идёт дальше, описал в статье этапы разработки сайта

04Что вы получите

1. Карту сайта: все страницы и связи между ними
2. Вайрфреймы главных страниц для компьютера и телефона
3. Кликабельный прототип по ссылке, который можно показать команде
4. Список того, что нужно для текстов и фото

После прототипа начинается дизайн, и вот тут уже можно спорить про оттенок синего. Как я собираю дизайн в Figma, рассказывал в статье как я проектирую сайт в Figma

05Итог

Прототип помогает договориться о главном до того, как каждая правка станет дорогой. Он входит в мою работу над сайтами: лендинг от 49 000 ₽, корпоративный сайт от 119 000 ₽, дизайн без разработки от 29 000 ₽. Подробнее на странице разработки сайтов