Прототип сайта - это чёрно-белая схема страницы до дизайна и кода: какие экраны идут друг за другом, что написано в каждом блоке и в какой момент человек оставляет заявку. Собирается он обычно за 2-5 дней, стоит дешевле любой правки в готовой вёрстке и отвечает на единственный важный вопрос: понятно ли из этой страницы, откуда у бизнеса возьмутся обращения. Если из схемы это не видно, переделывать надо схему, а не сдавать сайт и надеяться на рекламный бюджет.
I. Что такое прототип сайта
Прототип - это каркас. Прямоугольники вместо фотографий, реальные заголовки вместо «Lorem ipsum», настоящие цены и сроки вместо абстрактных преимуществ. Цвета, шрифты и анимации на этом этапе намеренно отсутствуют: они отвлекают заказчика от структуры и заставляют обсуждать оттенок кнопки вместо того, что на этой кнопке написано.
Прототип бывает статичный (набор экранов, которые смотрят подряд) и кликабельный (по кнопкам можно перейти, форма открывается, меню разворачивается). Для главной страницы обычно хватает статичного с 6-10 экранами: этого достаточно, чтобы увидеть логику и порядок аргументов. Кликабельный нужен там, где есть расчёт, фильтр каталога или личный кабинет - то есть когда сценарий важнее текста.
II. Чем прототип отличается от дизайна и ТЗ
Три документа часто путают, хотя они отвечают на разные вопросы. Техническое задание описывает, что должно работать. Прототип показывает, как это выглядит и в каком порядке читается. Дизайн-макет добавляет визуальный язык: типографику, фотографии, сетку, состояния кнопок.
| Документ | На какой вопрос отвечает | Срок обычно | Что меняется потом |
|---|---|---|---|
| Техзадание | Что должно работать и с чем интегрироваться | 1-3 дня | Правки дешёвые, это текст |
| Прототип | Что человек видит и в каком порядке | 2-5 дней | Правки дешёвые, это схема |
| Дизайн-макет | Как это выглядит: шрифты, цвет, фото | 1-2 недели | Правка блока тянет за собой соседние |
| Вёрстка и код | Как это работает в браузере | 1-2 недели | Перестройка блока - самая дорогая правка |
Логика простая: чем позже вы обнаружили, что на главной не хватает блока с ценами, тем дороже он обходится. В прототипе это 20 минут работы, в готовом коде - пересборка сетки, новые фотографии и повторное тестирование на телефонах.
III. 5 задач, которые решает прототип
- Проверяет, откуда пойдут заявки. На схеме сразу видно, сколько раз человек проходит мимо формы и что он знает о цене к этому моменту. Если форма одна и она в подвале, это заметно на прототипе, а не через три месяца по отчёту аналитики.
- Снимает спор о вкусе. Пока нет цвета и фотографий, обсуждают структуру и текст. Это единственный этап, где заказчик и подрядчик говорят об одном и том же.
- Вскрывает нехватку материалов. В схеме видно, что нужны 12 фотографий объектов, 4 отзыва с именами и прайс. Обычно именно сбор материалов, а не разработка, задерживает запуск на недели.
- Фиксирует объём работ. Количество экранов и блоков - это и есть смета. Без прототипа смета - разговор о воздухе, и обе стороны потом считают себя обманутыми.
- Даёт скелет для SEO. Заголовки h1 и h2, список услуг, разделы под запросы - всё это закладывается в прототип. Дописывать структуру в готовый сайт всегда дороже.
IV. Что входит в прототип главной страницы
Мы собираем главную из блоков, каждый из которых отвечает на конкретное возражение. Порядок блоков меняется под нишу: в услугах для бизнеса цена уходит ниже, в товарных нишах поднимается почти в самый верх.
- Первый экран. Что за компания, что делает, для кого, одно действие. Не слоган, а понятная фраза, по которой человек за 5 секунд решает, туда ли он попал.
- Услуги или каталог. Список с ценами или вилками. Если цены нет совсем, её место занимает калькулятор или расчёт по параметрам.
- Доказательства. Работы, объекты, цифры производства, сертификаты. Здесь же ссылки на реальные проекты, а не абстрактные «более 500 довольных клиентов».
- Процесс работы. Этапы от заявки до сдачи с честными сроками. Этот блок закрывает страх «пропадут после предоплаты».
- Форма и контакты. Минимум два входа: форма и мессенджер. Поля формы - только то, без чего нельзя перезвонить.
Хороший ориентир для главной - 7-9 блоков. Меньше пяти обычно означает, что часть возражений не закрыта, больше двенадцати - что страницу дочитывают единицы. Как это выглядит на живых проектах, видно по нашим работам. Редизайн сайта SkyFarm - агротех, системы выращивания с искусственным интеллектом: контейнерные фермы, блок управления, приложение, семена и питание. Порядок блоков там задан ещё в схеме: первый экран с контейнерной фермой, схема работы из трёх шагов - датчики, анализ, исполнение, горизонтальная карусель продуктов с боковой прокруткой, экран приложения и сквозная кнопка «Собрать свою ферму». Из других примеров - ayvazzovsky.com - сайт салона сложного окрашивания в Москве с двумя адресами, онлайн-записью, видео работ мастеров и портфолио команды, и navsegda-event.ru - сайт агентства корпоративных мероприятий с услугами, кейсами, этапами работы и расчётом мероприятия. Обе структуры начинались именно с прототипа главной.
V. Почему мы показываем прототип до договора
Прототип главной страницы мы делаем бесплатно. До договора и без предоплаты вы видите, как будет выглядеть ваш сайт: первый экран, набор блоков, их порядок и логику заявки. Нравится - работаем дальше. Не нравится - расходимся, вы ничего не должны. Бесплатен именно прототип главной: дизайн всех страниц, вёрстку и бесконечные правки мы так не отдаём.
Причина не в щедрости, а в позиции: мы не отдаём сайт, который не будет приносить прибыль. Сайт для нас - инструмент заявок, а не картинка. Если из схемы не видно, откуда пойдут обращения, мы переделываем схему, а не сдаём работу и не объясняем потом, что «нужен был другой трафик». Бесплатный прототип - это способ проверить нашу же гипотезу до того, как обе стороны потратили деньги и месяц.
Для вас это ещё и тест подрядчика. По одному прототипу видно, разобрался ли исполнитель в нише, задал ли вопросы про средний чек и сезонность, или просто разложил стандартные блоки из шаблона. Это честнее любого портфолио.
VI. Сколько времени и денег экономит прототип
Разработка сайта на React у нас стоит от 80 000 ₽ и занимает 1-2 недели с момента, когда собраны материалы. Перенос с конструктора на свой хостинг - тоже от 80 000 ₽. В обоих случаях прототип входит в работу, а не продаётся отдельной строкой. Правки на этом этапе бесплатны и занимают часы; те же правки после вёрстки съедают дни и переносят запуск.
| Когда нашли проблему | Что приходится переделывать | Потеря времени обычно |
|---|---|---|
| На прототипе | Схему блока | 1-3 часа |
| На дизайн-макете | Блок и соседние по сетке | 1-2 дня |
| На вёрстке | Блок, адаптив, тесты | 3-5 дней |
| После запуска | Код, тексты, фото, переиндексацию | 1-3 недели |
Дальше сайт нужно наполнять: SEO-статья стоит от 500 ₽, 200 статей в месяц - 100 000 ₽, прокачка блога - от 75 000 ₽ в месяц. Здесь сразу оговорка: позиции, трафик и количество заявок мы не гарантируем. Первые показы по статьям появляются после индексации, а эффект накапливается с каждой партией материалов - это месяцы, а не недели. Тем, кому обращения нужны раньше, чем созреет органика, обычно подходит модель лидов с оплатой за результат, где вы платите за факт обращения, а не за ожидание.
VII. Короткий итог
Прототип - самый дешёвый способ поссориться с подрядчиком вовремя. Он занимает 2-5 дней, не требует ни рубля, показывает структуру будущей страницы и путь человека к заявке. Если после прототипа непонятно, откуда придут обращения, сайт делать рано - надо доработать схему. Посмотреть, как мы собираем разработку сайтов и SEO, можно на странице студии, а обсудить прототип главной для вашего бизнеса - в ближайшие дни и без обязательств.
Наши работы
Сайты, которые студия уже запустила
Четыре проекта N3MIROFF, которые можно открыть прямо сейчас и посмотреть, как они работают.
Агротех с ИИ
SkyFarm ↗
Редизайн сайта систем выращивания: первый экран с контейнерной фермой, схема работы из трёх шагов, карусель продуктов и экран приложения.
Сайт салона
ayvazzovsky.com ↗
Салон сложного окрашивания в Москве: онлайн-запись, видео работ, портфолио и команда. Переехал с Тильды на свой хостинг.
Онлайн-академия
ayvazzovsky.academy ↗
Видеоуроки колористики: каталог, посадочные страницы уроков, личный кабинет и промокоды.
Event-агентство
navsegda-event.ru ↗
НАВСЕГДА: корпоративы и конференции - услуги, кейсы, этапы работы и расчёт мероприятия.
Витрина магазина
Monkey Market ↗
Премиальная витрина магазина кроссовок с заказом в Telegram.
Хотите увидеть свой сайт до того, как заплатите за него?
Соберём прототип главной страницы бесплатно: первый экран, блоки, порядок и логика заявки. Без договора и предоплаты.
Частые вопросы
Сколько времени занимает прототип главной страницы?
Обычно 2-5 рабочих дней с момента, когда получены вводные по бизнесу: услуги, цены или вилки, география, отличия от конкурентов. Если материалов нет совсем, срок сдвигается на время их сбора.
Прототип действительно бесплатный или это скидка на разработку?
Прототип главной страницы бесплатен полностью: до договора и без предоплаты. Если результат не нравится, вы ничего не должны и забираете схему себе. Бесплатен именно прототип главной, а не дизайн всех страниц и не вёрстка.
Чем прототип отличается от дизайн-макета?
Прототип - чёрно-белая схема без шрифтов, цвета и фотографий, он отвечает на вопрос, что и в каком порядке видит человек. Дизайн-макет добавляет визуальный язык и делается 1-2 недели, а правка в нём стоит в разы дороже.
Сколько блоков должно быть на главной странице?
Рабочий ориентир - 7-9 блоков. Меньше пяти обычно означает, что часть возражений не закрыта, больше двенадцати - что до конца страницы доходят единицы. Точное число зависит от ниши и среднего чека.
Что нужно подготовить, чтобы получить прототип?
Список услуг, цены или вилки, географию работы, 2-3 отличия от конкурентов и примеры работ. Этого хватает для первой версии схемы. Фотографии и тексты нужны позже, на этапе дизайна и наполнения.
Покажем схему вашей главной за несколько дней
Оставьте заявку - разберём нишу, соберём прототип главной и честно скажем, что на нём работает на заявки, а что нет.
Получить целевые заявки → Telegram