Прототип — это схема будущего сайта: блоки, тексты и сценарии без дизайна. Выглядит он скучно — серые прямоугольники и системный шрифт, — и именно поэтому его часто листают по диагонали и согласовывают не глядя. Зря: прототип — единственный этап проекта, где переделка стоит минуты, а не дни. Разбираем, что такое прототип сайта, зачем он нужен до дизайна, из каких этапов состоит прототипирование и как согласовать прототип так, чтобы потом не платить за переделки.
В этой статье 5
Что такое прототип сайта простыми словами
Прототип сайта — это схематичный макет страниц: какие блоки на них стоят, в каком порядке, что в каждом написано и куда ведёт каждая кнопка. Без цветов, фирменных шрифтов и фотографий — только структура и смысл. Ближайшая аналогия — план квартиры до ремонта: передвинуть стену на плане — значит стереть линию и провести новую; двигать её после ремонта — это перфоратор, пыль и новая смета. С сайтом то же самое, только вместо стен — блоки, а вместо сметы — часы дизайнера и разработчика.
Прототипы бывают разной детализации. Простейший — блок-схема страницы (вайрфрейм): прямоугольники с подписями «первый экран», «преимущества», «форма». Более рабочий вариант — кликабельный прототип в Figma или аналоге: по нему можно пройти путь посетителя, нажимая кнопки и переходя между страницами. Для лендинга обычно хватает детальной схемы одной страницы, для корпоративного сайта нужна карта всех страниц плюс прототипы ключевых шаблонов. Разделение ролей простое: прототип отвечает на вопрос «что и в каком порядке говорит сайт», дизайн — «как это выглядит», вёрстка — «как это работает в браузере».
Зачем нужен прототип сайта: экономика правок
Главный аргумент — не эстетика процесса, а деньги. Одна и та же правка на разных этапах проекта стоит по-разному, и разница — в порядки. В прототипе «поднять блок с ценами выше» — это перетащить прямоугольник и перечитать логику страницы. В утверждённом дизайне тот же перенос тянет за собой сетку, отступы, баланс соседних секций и отдельную проверку мобильной версии. В свёрстанном сайте к этому добавляются правка кода, тестирование и повторная публикация. Чем позже приходит правка, тем больше слоёв работы она задевает.
Второй аргумент: прототип проявляет пустоты в аргументации. Если компании нечего написать в блок «почему мы», это видно уже на схеме — и есть время собрать фактуру: цифры, сроки, гарантии. Третий аргумент: утверждённый прототип фиксирует объём работ — количество страниц и блоков становится основой сметы и сроков, а не предметом споров. В АОСА прототип — обязательная часть любого проекта разработки: в лендинге от 50 000 ₽ он занимает первые дни из 2–3 недель, в корпоративном сайте от 120 000 ₽ — первую неделю из 4–6.
Прототипирование сайта: этапы
- Сбор вводных: цели сайта, аудитория, конкуренты, поисковые запросы. Для проектов с расчётом на поиск структура сайта проектируется от семантики — до прототипа, а не после него.
- Карта страниц: какие страницы нужны, как они связаны между собой и откуда на каждую приходит посетитель — из поиска, рекламы или по ссылке с главной.
- Схемы ключевых страниц: порядок блоков, черновые заголовки, тезисы и призывы к действию. Здесь решается, в какой последовательности сайт аргументирует.
- Сценарии: прокликиваемые пути от входа до заявки для каждого типа посетителя — «пришёл из поиска на услугу», «сравнивает подрядчиков», «ищет цену».
- Согласование и фиксация: все правки по структуре и логике вносятся на этом шаге. Утверждённый прототип становится техническим заданием для дизайнера.
Прототипирование сайта: этапы
- Сбор вводных: цели сайта, аудитория, конкуренты, поисковые запросы. Для проектов с расчётом на поиск структура сайта проектируется от семантики — до прототипа, а не после него.
- Да
- Карта страниц: какие страницы нужны, как они связаны между собой и откуда на каждую приходит посетитель — из поиска, рекламы или по ссылке с главной.
- Да
- Схемы ключевых страниц: порядок блоков, черновые заголовки, тезисы и призывы к действию. Здесь решается, в какой последовательности сайт аргументирует.
- Да
- Сценарии: прокликиваемые пути от входа до заявки для каждого типа посетителя — «пришёл из поиска на услугу», «сравнивает подрядчиков», «ищет цену».
- Да
- Согласование и фиксация: все правки по структуре и логике вносятся на этом шаге. Утверждённый прототип становится техническим заданием для дизайнера.
- Да
Текст схемы и все данные
Прототипирование сайта: этапы
- Сбор вводных: цели сайта, аудитория, конкуренты, поисковые запросы. Для проектов с расчётом на поиск структура сайта проектируется от семантики — до прототипа, а не после него.
- Да
- Карта страниц: какие страницы нужны, как они связаны между собой и откуда на каждую приходит посетитель — из поиска, рекламы или по ссылке с главной.
- Да
- Схемы ключевых страниц: порядок блоков, черновые заголовки, тезисы и призывы к действию. Здесь решается, в какой последовательности сайт аргументирует.
- Да
- Сценарии: прокликиваемые пути от входа до заявки для каждого типа посетителя — «пришёл из поиска на услугу», «сравнивает подрядчиков», «ищет цену».
- Да
- Согласование и фиксация: все правки по структуре и логике вносятся на этом шаге. Утверждённый прототип становится техническим заданием для дизайнера.
- Да
По времени прототип — малая доля проекта: дни, а не недели. Но это единственный этап, где решения ещё ничего не стоят менять. Всё, что утверждено здесь, дальше только дорожает.
Как согласовать прототип сайта: что проверять
Согласование прототипа — не формальность «посмотрел — норм». Это единственный момент, когда вы можете дёшево повлиять на будущую конверсию. Проверять нужно три слоя: логику, сценарии и тексты.
- Логика первого экрана: отвечает ли он за пять секунд на три вопроса — куда я попал, что здесь предлагают, что сделать дальше.
- Порядок блоков: аргументы идут от главного к второстепенному, а возражения (цена, сроки, гарантии) закрываются до формы заявки, а не после неё.
- Сценарии: пройдите путь до заявки за каждый тип посетителя — с любого экрана должно быть понятно следующее действие.
- Тексты: заголовки конкретны? В тезисах есть цифры, сроки и цены — или обещания «высокого качества» и «индивидуального подхода»?
- Полнота: каждый блок отвечает на реальный вопрос клиента; блок, который нечем наполнить, лучше убрать сейчас, чем оформлять потом.
Как согласовать прототип сайта: что проверять
- Логика первого экрана: отвечает ли он за пять секунд на три вопроса — куда я попал, что здесь предлагают, что сделать дальше.
- Да
- Порядок блоков: аргументы идут от главного к второстепенному, а возражения (цена, сроки, гарантии) закрываются до формы заявки, а не после неё.
- Да
- Сценарии: пройдите путь до заявки за каждый тип посетителя — с любого экрана должно быть понятно следующее действие.
- Да
- Тексты: заголовки конкретны? В тезисах есть цифры, сроки и цены — или обещания «высокого качества» и «индивидуального подхода»?
- Да
- Полнота: каждый блок отвечает на реальный вопрос клиента; блок, который нечем наполнить, лучше убрать сейчас, чем оформлять потом.
- Да
Текст схемы и все данные
Как согласовать прототип сайта: что проверять
- Логика первого экрана: отвечает ли он за пять секунд на три вопроса — куда я попал, что здесь предлагают, что сделать дальше.
- Да
- Порядок блоков: аргументы идут от главного к второстепенному, а возражения (цена, сроки, гарантии) закрываются до формы заявки, а не после неё.
- Да
- Сценарии: пройдите путь до заявки за каждый тип посетителя — с любого экрана должно быть понятно следующее действие.
- Да
- Тексты: заголовки конкретны? В тезисах есть цифры, сроки и цены — или обещания «высокого качества» и «индивидуального подхода»?
- Да
- Полнота: каждый блок отвечает на реальный вопрос клиента; блок, который нечем наполнить, лучше убрать сейчас, чем оформлять потом.
- Да
Тексты-заглушки — красный флаг
Если в прототипе написано «здесь будет текст о компании» или стоит рыба вроде lorem ipsum — прототип не готов к согласованию. Вы утверждаете не расположение прямоугольников, а аргументацию страницы, и блок без текста оценить невозможно: неясно, силён ли аргумент и нужен ли блок вообще. Заголовки, тезисы и призывы к действию должны быть настоящими — пусть черновыми, но по делу. Допустимое исключение — служебные материалы: «политика конфиденциальности, 3 000 знаков» можно пометить заглушкой. Но всё, что продаёт — первый экран, оффер, преимущества, кнопки, — обязано быть написано словами до дизайна.
Читайте прототип глазами клиента, а не владельца
Самая частая ошибка согласования — читать прототип как владелец бизнеса. Владельцу всё нравится: страница про его компанию, его награды, его формулировки. Но сайт делается не для владельца — посетителю регалии безразличны, пока он не понял, решают ли здесь его задачу и сколько это стоит. Хороший ориентир — анатомия посадочной страницы: каждый блок существует для посетителя, а не для самопрезентации.
Два способа читать один и тот же прототип
- Блок: Первый экран
- Вопрос владельца (так не надо): Достаточно ли заметен логотип?
- Вопрос клиента (так надо): Понятно ли за пять секунд, что предлагают и для кого?
- Блок: О компании
- Вопрос владельца (так не надо): Все ли награды перечислили?
- Вопрос клиента (так надо): Есть ли причины доверять: цифры, сроки, гарантии?
- Блок: Услуги
- Вопрос владельца (так не надо): Все ли направления упомянули?
- Вопрос клиента (так надо): Найду ли я свою задачу и ориентир по цене за минуту?
- Блок: Форма заявки
- Вопрос владельца (так не надо): Все ли поля для CRM собрали?
- Вопрос клиента (так надо): Понятно ли, что произойдёт после отправки и когда ответят?
Текст схемы и все данные
Два способа читать один и тот же прототип
- Блок: Первый экран
- Вопрос владельца (так не надо): Достаточно ли заметен логотип?
- Вопрос клиента (так надо): Понятно ли за пять секунд, что предлагают и для кого?
- Блок: О компании
- Вопрос владельца (так не надо): Все ли награды перечислили?
- Вопрос клиента (так надо): Есть ли причины доверять: цифры, сроки, гарантии?
- Блок: Услуги
- Вопрос владельца (так не надо): Все ли направления упомянули?
- Вопрос клиента (так надо): Найду ли я свою задачу и ориентир по цене за минуту?
- Блок: Форма заявки
- Вопрос владельца (так не надо): Все ли поля для CRM собрали?
- Вопрос клиента (так надо): Понятно ли, что произойдёт после отправки и когда ответят?
| Блок | Вопрос владельца (так не надо) | Вопрос клиента (так надо) |
|---|---|---|
| Первый экран | Достаточно ли заметен логотип? | Понятно ли за пять секунд, что предлагают и для кого? |
| О компании | Все ли награды перечислили? | Есть ли причины доверять: цифры, сроки, гарантии? |
| Услуги | Все ли направления упомянули? | Найду ли я свою задачу и ориентир по цене за минуту? |
| Форма заявки | Все ли поля для CRM собрали? | Понятно ли, что произойдёт после отправки и когда ответят? |
Покажите первый экран прототипа человеку, не погружённому в ваш бизнес, на пять секунд — и попросите ответить, что здесь предлагают, кому и что нужно сделать. Затем дайте два задания: найти цену и оставить заявку — и молча смотрите, где он споткнулся. Каждая заминка на схеме — это будущие потерянные заявки на живом сайте, только на схеме их исправление стоит минуты.
Собирательный пример на основе типовых проектов — не реальный клиент.
И последнее: прототип — точка, где сайт «женится» с продвижением: какие страницы нужны под какие запросы и как посетитель из поиска доходит до заявки, решается именно на схеме. Поэтому в формате «Сайт + продвижение под ключ» мы проектируем прототип от семантики: страницы получают структуру под реальные запросы, а не под вкус согласующих.
Самый дорогой ответ на этапе прототипа — «да нормально, делайте». Если схема согласована за десять минут, правки никуда не делись — они переехали в дизайн и вёрстку, где стоят в разы дороже. Я прошу клиентов об одном: пройти прототип в роли самого недоверчивого покупателя — того, который сравнивает три компании и ищет повод закрыть вкладку. Если путь до заявки не складывается на серых прямоугольниках, дизайн его не спасёт: красивый сайт с кривой логикой — это дорогая упаковка пустой коробки.
Владимир БогдановОснователь и руководитель AOSA · эксперт по SEO и AEO, 12+ лет в поисковой оптимизации