Чем прототип отличается от макета?

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

Сколько стоит прототипирование?

Обычно 10–20% сметы проекта: от 25 000 ₽ для небольшого сайта, от 80 000 ₽ для магазина или сервиса с большим числом экранов. Часто входит в стоимость дизайна отдельной строкой.

Можно ли пропустить прототип?

На лендинге — да, там структура умещается в голове. На корпоративном сайте и выше пропуск почти всегда приводит к переделке макетов: структурные ошибки обнаруживаются, когда дизайн уже отрисован, и правка стоит в разы дороже.

Кто должен согласовывать прототип?

Все, кто потом будет высказываться о сайте, включая руководителя и отдел продаж. Смысл этапа в том, чтобы собрать возражения на самой дешёвой стадии. Если ключевой человек увидел проект впервые на готовом дизайне — переделка неизбежна.

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

Прототип — этап, который заказчики чаще всего предлагают пропустить: «давайте сразу дизайн, чего время терять». Логика понятна, результат предсказуем: время теряется потом, когда выясняется, что на странице услуги не хватает блока с ценами, а порядок разделов неудобен.

Разбираем, что это за этап и почему он окупается.

Что такое прототип

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

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

Главный аргумент: цена изменения

Стоимость правки растёт на каждом этапе примерно на порядок.

Этап	Изменить порядок блоков
Прототип	минуты
Макет	часы
Свёрстанная страница	дни
Запущенный сайт	недели плюс риск для позиций

Задача прототипа — вытащить все структурные споры в первую колонку. Именно поэтому этап стоит 10–20% сметы, а экономит зачастую больше своей стоимости.

Это частный случай общего принципа из статьи этапы разработки сайта: чем раньше этап, тем дешевле решения.

Что решается на прототипе

Состав страниц. Каких блоков не хватает, какие лишние. Здесь обычно выясняется, что забыли про доставку, гарантии или блок с частыми вопросами.

Порядок. В каком порядке человек получает информацию. Классический спор «сначала о компании или сразу услуги» решается тут, а не на макете.

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

Полнота содержания. Прототип наглядно показывает, сколько текста нужно написать. Часто именно на этом этапе заказчик впервые осознаёт объём контентной работы — и это хорошо, потому что контент чаще всего и задерживает проекты.

Мобильная логика. Как перестроятся блоки на телефоне, что уйдёт вниз, чем станет боковой фильтр. Решать это на макете уже поздно.

Чего прототип не решает

Полезно понимать границы, чтобы не ждать лишнего.

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

И он не гарантирует, что правок в дизайне не будет вовсе. Он гарантирует другое: правки будут про оформление, а не про структуру.

Уровни детализации

Схематичный. Блоки с подписями, без реального текста. Быстро, дёшево, годится для несложных сайтов.

Содержательный. С настоящими заголовками и примерным текстом. Дольше, но именно он показывает реальный объём страницы и выявляет пустые блоки, которые нечем наполнить.

Интерактивный. Кликабельный, с переходами между экранами. Нужен для сервисов и личных кабинетов, где важна последовательность действий, — там просто картинок недостаточно.

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

Как правильно согласовывать

Соберите всех, кто будет высказываться. Руководитель, маркетолог, отдел продаж. Если ключевой человек увидит проект впервые на готовом дизайне, переделка неизбежна — и это будет самая дорогая переделка в проекте.

Обсуждайте состав, а не вид. «Здесь скучно» — не замечание к прототипу. «Здесь не хватает цен» — замечание по существу.

Проверьте сценариями. Пройдите прототип глазами разных посетителей: закупщик ищет позицию, частный клиент сравнивает цены, старый клиент ищет контакты. Если кто-то из них застревает — правьте сейчас.

Убедитесь, что контент реален. Если в прототипе есть блок «наши кейсы», спросите себя, есть ли у вас три кейса, которые можно показать. Если нет — блок либо убирается, либо становится задачей.

Сколько стоит

От 25 000 ₽ для небольшого сайта, от 80 000 ₽ для магазина или сервиса. Обычно это 10–20% сметы и часто входит в стоимость дизайна отдельной строкой.

При сравнении смет разных подрядчиков обращайте внимание, есть ли этап проектирования вообще. Его отсутствие — не экономия, а перенос расходов на более дорогой этап. Об этом же речь в разборе из чего складывается цена сайта.

Итог

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

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