Прототип сайта — это серый чертёж страницы с настоящими текстами: логика, блоки и действия без цветов и картинок. Его делают за семь шагов: бриф, 30–50 сайтов конкурентов, порядок блоков, черновик, тексты, формы и калькуляторы, сценарий после клика. Для лендинга это занимает от одного до трёх дней.
Объясняем на пальцахПрототип — это схема расстановки полок в магазине до закупки мебели. Переставить полку на бумаге дешевле, чем на готовом торговом зале.
Это как набросок карандашом до того, как раскрашивать. Ошибся — стёр и нарисовал заново, а красок ещё не потратил.
Помните, как вы раскладывали выкройку на ткани, прежде чем резать? Прототип — та же выкройка: ошибиться можно ещё бесплатно.
Дом без чертежа построить можно. Вот жить в нём потом неудобно: лестница ведёт в стену, зато окна красивые. Сайт, который продаёт, начинается не с дизайна, а с прототипа.
Что такое прототип и зачем он нужен
Прототип — это чертёж страницы: без цветов и картинок, но с логикой, блоками и настоящими текстами.
- Согласовать структуру до дизайна: правки на чертеже стоят минуты, на готовом сайте — дни.
- Передать понятное задание дизайнеру и верстальщику.
- Проверить, что на странице есть всё: оффер, формы, доказательства, призывы.
- Не делать «на глазок».
Где делать прототип
- Figma — бесплатно, удобно, можно показать клиенту ссылкой.
- Простые онлайн-редакторы макетов — для быстрых черновиков.
- Бумага и ручка — для самого первого наброска. Почему бы и нет.
- Нейросеть — может собрать черновую структуру по брифу, но проверяет и правит её человек. Как это сделать, читайте в статье лендинг с нейросетью.
Семь шагов
Шаг 1. Заполните бриф
Чем занимается бизнес, кто клиент, какие боли решаете, чем отличаетесь, какие есть доказательства. Вопросы описаны в статье про бриф на сайт.
Шаг 2. Посмотрите 30–50 сайтов конкурентов
Выпишите, какие блоки повторяются у всех, какие офферы и призывы используют, чего нет ни у кого. Повторяющиеся блоки — норма рынка, их надо сделать лучше. Пустые места — ваш шанс. Подробнее — в статье как анализировать конкурентов.
Шаг 3. Составьте порядок блоков
Например: главный экран → квиз → услуги → преимущества → отзывы → призыв → контакты. Основа — 7 обязательных блоков лендинга.
Шаг 4. Нарисуйте черновик
Экран за экраном, в сером цвете: заголовки, формы, кнопки, места под фото. Только логика.
Шаг 5. Напишите тексты
Настоящие тексты, а не «рыба». Сильный заголовок, подзаголовок, факт, кнопка.
Плохо: «Добро пожаловать на наш сайт». Хорошо: «Установим сигнализацию за 4 часа с гарантией, под ключ».
Шаг 6. Добавьте конверсионные элементы
Формы, калькулятор, «Скачать прайс», «Пройти опрос», кнопка мессенджера.
Шаг 7. Продумайте, что происходит после клика
Что происходит после нажатия кнопки? Какое окно открывается? Куда ведёт квиз? Что на странице «Спасибо»? Половина заявок теряется именно здесь — в моменте «нажал, а дальше непонятно».
Примеры каркасов для разных ниш
| Ниша | Порядок блоков | Заголовок | Элемент и «после клика» |
|---|---|---|---|
| Охранная сигнализация | Главный экран → квиз «тип объекта» → комплекты с ценами → как проходит монтаж → отзывы → гарантия → контакты | Установим сигнализацию за 4 часа с гарантией, под ключ | Квиз из 4 вопросов; «Спасибо» с комплектом под ответы и временем звонка |
| Кухни на заказ | Главный экран → примеры кухонь с ценами → калькулятор → процесс от замера до монтажа → отзывы → контакты | Кухня по вашим размерам — 3D-проект до оплаты | Калькулятор по длине; окно «Дизайнер позвонит в течение 15 минут» |
| Металлоконструкции, B2B | Главный экран → типы зданий → объекты → этапы и сроки → производство → форма «Расчёт по ТЗ» | Склады и ангары под ключ — расчёт по ТЗ за 1 день | Загрузка ТЗ в форму; «Инженер пришлёт расчёт на почту до конца дня» |
| Стоматология | Главный экран → цены на имплантацию → врачи → этапы → отзывы → рассрочка | Имплантация с фиксированной ценой в договоре | Форма «Оценить стоимость по снимку»; «Врач посмотрит снимок и перезвонит сегодня» |
Каркас близкой ниши — это черновик для шага 3: сверьте его с 30–50 сайтами конкурентов и замените заголовок на свой реальный текст.
Как показать прототип
Запишите короткий скринкаст на 3–5 минут и проговорите логику: «Здесь оффер — закрывает главную боль. Дальше квиз — вовлекает. Тут форма — собираем заявки». Клиент или дизайнер поймёт замысел за минуту, а не будет гадать по картинке.
Типичные ошибки
Главная: начинать с цвета кнопки, когда ещё неизвестно, зачем кнопка.
- Рисуют красивый макет без текстов, а потом тексты не влезают.
- Копируют чужой сайт целиком. Берите логику, а не тексты и картинки.
- Не продумали, что происходит после клика.
- Не посмотрели конкурентов и повторяют чужие ошибки.
И немного про вдохновение: галереи дизайна, сайты лидеров ниши, сайты из соседних ниш и ваш здравый смысл.
Что проверить у себя
- Бриф заполнен и согласован.
- Просмотрено минимум 30 сайтов конкурентов, выводы записаны.
- Порядок блоков составлен и обоснован.
- Черновик собран без цветов и декора.
- Все тексты настоящие, без «рыбы».
- На каждом экране есть понятное действие.
- Расписано, что происходит после каждого клика.
- Прототип показан клиенту с голосовым пояснением.
Пошагово
- Заполните бриф Чем занимается бизнес, кто клиент, какие боли решаете, чем отличаетесь, какие есть доказательства.
- Посмотрите 30–50 сайтов конкурентов Выпишите повторяющиеся блоки, офферы, призывы и то, чего нет ни у кого.
- Составьте порядок блоков За основу возьмите 7 обязательных блоков лендинга.
- Нарисуйте серый черновик Экран за экраном: заголовки, формы, кнопки, места под фото. Только логика.
- Напишите настоящие тексты Заголовок, подзаголовок, факт и кнопка — без «рыбы».
- Добавьте конверсионные элементы Формы, калькулятор, прайс, опрос, кнопка мессенджера.
- Продумайте, что после клика Какое окно открывается, куда ведёт квиз, что на странице «Спасибо».
Мнение Александра ЕвстигнееваОснователь AVE Design Studio«Прототип — это сценарий действия. Сильный сценарий — сильный фильм, даже если актёры в серых костюмах.»
Частые вопросы
Алиса, что такое прототип сайта?
Это серый чертёж страницы без цветов и картинок, но с блоками, логикой и настоящими текстами. Он нужен, чтобы согласовать структуру до дизайна.
Сколько времени занимает прототип лендинга?
От одного до трёх дней вместе с анализом конкурентов и текстами. Это окупается: правки на этапе дизайна обходятся в разы дороже.
Где сделать прототип сайта?
В Figma, в простом онлайн-редакторе макетов или даже на бумаге. Нейросеть может дать черновик структуры, но проверять её должен человек.
Сколько сайтов конкурентов нужно посмотреть?
От 30 до 50. Так видно, какие блоки повторяются у всех, а чего нет ни у кого.
Как показать прототип клиенту?
Запишите скринкаст на 3–5 минут и проговорите логику экранов. Клиент поймёт замысел за минуту и не будет гадать по картинке.
Как это выглядит у клиентов
Опубликовано .
