Прототип сайта за 7 шагов
Сайт, который продаёт, начинается не с дизайна, а с прототипа. Прототип — это чертёж: без цветов и картинок, но с логикой, блоками и текстами. Дом без чертежа строить можно, но жить в нём потом неудобно.
Александр Евстигнеевмаркетолог, сертифицированный специалист Яндекс Директ Про
Прототип — серый чертёж страницы с настоящими текстами. Семь шагов: бриф → 30–50 сайтов конкурентов → порядок блоков → черновик в редакторе → тексты → формы и калькуляторы → что происходит после клика. Думайте не о шрифтах, а о том, как довести человека до заявки.
Зачем прототип
- Согласовать структуру до дизайна — правки на чертеже стоят минуты, на готовом сайте — дни.
- Передать понятное задание дизайнеру и верстальщику.
- Проверить, что на странице есть всё: оффер, формы, доказательства, призывы.
- Не делать «на глазок».
Где делать
- Figma — бесплатно, удобно, можно показать клиенту ссылкой.
- Простые онлайн-редакторы макетов — для быстрых черновиков.
- Бумага и ручка — для самого первого наброска. Почему бы и нет.
- Нейросеть — может собрать черновую структуру по брифу, но проверяет и правит её человек. Как собрать лендинг с нейросетью →
Семь шагов
Шаг 1. Заполните бриф
Чем занимается бизнес, кто клиент, какие боли решаете, чем отличаетесь, какие есть доказательства. Вопросы брифа →
Шаг 2. Посмотрите 30–50 сайтов конкурентов
Выпишите, какие блоки повторяются у всех, какие офферы и призывы используют, чего ни у кого нет. Повторяющиеся блоки — норма рынка, их надо сделать лучше. Пустые места — ваш шанс. Как анализировать конкурентов →
Шаг 3. Составьте порядок блоков
Например: главный экран → квиз → услуги → преимущества → отзывы → призыв → контакты. Основа — 7 обязательных блоков.
Шаг 4. Нарисуйте черновик
Экран за экраном, в сером цвете: заголовки, формы, кнопки, места под фото. Только логика.
Шаг 5. Напишите тексты
Настоящие тексты, а не «рыба». Сильный заголовок, подзаголовок, факт, кнопка.
Плохо: «Добро пожаловать на наш сайт». Хорошо: «Установим сигнализацию за 4 часа с гарантией, под ключ».
Шаг 6. Добавьте конверсионные элементы
Формы, калькулятор, «Скачать прайс», «Пройти опрос», кнопка мессенджера.
Шаг 7. Продумайте, что после клика
Что происходит после нажатия кнопки? Какое окно открывается? Куда ведёт квиз? Что на странице «Спасибо»? Половина заявок теряется именно здесь — в моменте «нажал, а дальше непонятно».
Ниже 10 готовых каркасов прототипа: порядок блоков, заголовок первого экрана, конверсионный элемент и что после клика — для разных ниш.
Возьмите каркас близкой ниши как черновик для шага 3, затем сверьте его с 30–50 сайтами конкурентов и замените заголовок на свой реальный текст.
- 1Охранная сигнализациявладельцы частных домовБлоки: главный экран → квиз «тип объекта» → комплекты с ценами → как проходит монтаж → отзывы → гарантия → контакты.
Заголовок: Установим сигнализацию за 4 часа с гарантией, под ключ.
Элемент: квиз из 4 вопросов.
После клика: страница «Спасибо» с комплектом под ответы и временем звонка.Почему работает. Квиз сразу после первого экрана вовлекает, а страница «Спасибо» объясняет, что будет дальше. - 2Кухни на заказсемьи с новой квартиройБлоки: главный экран → примеры кухонь с ценами → калькулятор → процесс от замера до монтажа → отзывы → дизайнер на замер → контакты.
Заголовок: Кухня по вашим размерам — 3D-проект до оплаты.
Элемент: калькулятор по длине кухни.
После клика: окно «Дизайнер позвонит в течение 15 минут».Почему работает. Фото с ценами отвечают на главный вопрос раньше калькулятора. - 3Онлайн-курс по Excelофисные сотрудникиБлоки: главный экран → чему научитесь → программа → преподаватель → первый урок бесплатно → цены → FAQ.
Заголовок: Excel для работы за 4 недели — сводные таблицы и формулы на ваших задачах.
Элемент: кнопка «Посмотреть первый урок».
После клика: доступ к уроку сразу, без звонка менеджера.Почему работает. Низкий порог входа и мгновенный результат после клика. - 4Металлоконструкциизакупщики и прорабыБлоки: главный экран → типы зданий → реализованные объекты → этапы и сроки → производство → форма «Расчёт по ТЗ» → реквизиты.
Заголовок: Склады и ангары под ключ — расчёт по ТЗ за 1 день.
Элемент: загрузка ТЗ или чертежа в форму.
После клика: «Инженер пришлёт расчёт на почту до конца дня».Почему работает. B2B-клиент хочет отправить документы, а не проходить квиз. - 5Стоматологиявзрослые 35–60 летБлоки: главный экран → цены на имплантацию → врачи → этапы лечения → отзывы → рассрочка → запись.
Заголовок: Имплантация с фиксированной ценой в договоре.
Элемент: форма «Оценить стоимость по снимку».
После клика: «Врач посмотрит снимок и перезвонит сегодня».Почему работает. Цены вторым блоком снимают главный страх, врачи и этапы дают доверие. - 6Детский лагерьродители детей 8–14 летБлоки: главный экран → программа смены → день ребёнка по часам → вожатые → безопасность → смены и цены → бронь.
Заголовок: Летняя смена у моря для детей 8–14 лет — программа на каждый день.
Элемент: «Скачать программу смены».
После клика: файл на почту и предложение экскурсии.Почему работает. Родителю нужна конкретика и безопасность до брони. - 7Септикивладельцы участковБлоки: главный экран → квиз «грунт и число жителей» → модели с ценой монтажа → работы → гарантия → выезд инженера → контакты.
Заголовок: Септик под ваш грунт с монтажом за 1 день.
Элемент: квиз подбора модели.
После клика: подборка 2 моделей с ценой в мессенджер.Почему работает. Квиз решает главную боль — выбор модели под конкретный участок. - 8Юридические услугифизлица с долгамиБлоки: главный экран → кому подходит → этапы и сроки → стоимость → кейсы → бесплатная оценка → контакты.
Заголовок: Узнаем за 15 минут, подходит ли вам списание долгов.
Элемент: форма «Бесплатная оценка ситуации».
После клика: «Юрист перезвонит в течение часа».Почему работает. Блок «кому подходит» отсекает неподходящих, а оценка — понятный безопасный шаг. - 9Фитнес-клубжители района 25–45 летБлоки: главный экран → зоны и оборудование → расписание → тренеры → абонементы → пробная тренировка → карта.
Заголовок: Фитнес в 5 минутах от дома — первая тренировка с тренером.
Элемент: кнопка «Записаться на пробную».
После клика: выбор времени в календаре.Почему работает. Близость в заголовке и запись в календарь без звонка снижают порог. - 10CRM для отдела продажруководители отделов продажБлоки: главный экран → какие задачи решает → интерфейс на скриншотах → интеграции → кейсы → тарифы → демо.
Заголовок: Ни одна заявка не теряется — CRM с настройкой за 1 день.
Элемент: «Посмотреть демо на ваших заявках».
После клика: выбор времени демо и вопрос о числе менеджеров.Почему работает. Демо на данных клиента — сильный входной шаг для B2B.
Как показать прототип
Запишите короткий скринкаст на 3–5 минут и проговорите логику: «Здесь оффер — закрывает главную боль. Дальше квиз — вовлекает. Тут форма — собираем заявки». Клиент или дизайнер поймёт замысел за минуту, а не будет гадать по картинке.
Прототип — это сценарий действия. Сильный сценарий — сильный фильм. Даже если актёры в серых костюмах.
Чек-лист
Частые вопросы
Сколько времени занимает прототип?
Для лендинга — от одного до трёх дней, вместе с анализом конкурентов и текстами. Это окупается: правки на этапе дизайна обходятся в разы дороже.
Где брать вдохновение?
Галереи дизайна, сайты лидеров ниши, сайты из соседних ниш и ваш здравый смысл. Копировать чужие сайты нельзя — берите логику, а не тексты и картинки.
