ГлавнаяГлоссарийПрототип сайта

Прототип сайта

prototype, кликабельный макет

Прототип — это интерактивная модель страниц до дизайна и вёрстки, на которой проверяют логику и сценарии, пока менять их ещё дёшево.

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

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

Что это
кликабельный макет

Связанные экраны без дизайна и кода.

Зачем
проверка логики

Гоняют сценарии и ловят ошибки сценария.

Выгода
дешёвая правка

Переставить блок — минуты, а не дни.

Прототип собирают из каркасов и тестируют.
Пример

На кликабельном прототипе лендинга люди не находили кнопку заказа — её перенесли на первый экран ещё до UI-дизайна, и переделывать готовую вёрстку не пришлось.

Прототипы делят по уровню детализации. Low-fidelity — серые блоки и заглушки текста, их собирают за час прямо поверх вайрфрейма, чтобы спорить о логике, а не о цвете кнопки. High-fidelity ближе к финалу: реальные тексты, отступы, состояния полей — на таком уже гоняют юзабилити-тесты и согласуют с заказчиком. Частая ошибка — сразу лезть в high-fidelity: команда начинает обсуждать шрифты вместо того, ведёт ли сценарий пользователя к цели.

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