Что показывает прототип главной страницы: 7 блоков и логика

Прототип главной страницы собирается обычно за 2-4 дня и отвечает на 3 вопроса до того, как потрачен хотя бы 1 рубль: что увидит человек на первом экране, в каком порядке идут блоки и в какой момент он оставляет заявку. Это схема без цвета и фотографий - именно поэтому на ней дёшево спорить и быстро менять решения.

Мы не отдаём сайт, который не будет приносить прибыль, и проверяем это на прототипе. Если из схемы не видно, откуда пойдут обращения, переделываем схему, а не красим кнопки на неработающей конструкции.

I. Что такое прототип и чем он не является

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

II. Семь блоков, которые он проверяет

1. Первый экран. Кто вы, что делаете, для кого и что произойдёт после клика. Если это не читается за 5 секунд, дальше человек обычно не идёт.
2. Услуги или каталог. Не список из 30 пунктов, а 4-8 понятных направлений, по которым действительно приходят деньги.
3. Цены или вилки. Даже приблизительные. Страница без цен отправляет человека искать их у конкурента.
4. Доказательства. Работы, фото объектов, отзывы, документы, команда - то, что отличает вас от такого же сайта с теми же словами.
5. Как мы работаем. Короткий порядок шагов: что происходит после заявки и когда клиент получает результат.
6. Форма заявки. Сколько полей, где стоит, что человек получает взамен, куда уходит обращение.
7. Контакты и подвал. Город, режим работы, реквизиты, второй способ связи - без этого доверие проседает на ровном месте.

Набор блоков не универсален: у салона услуг он один, у производства другой, у интернет-витрины третий. В проекте редизайн сайта SkyFarm - это агротех, системы выращивания с искусственным интеллектом - схема главной сложилась вокруг трёх шагов работы фермы (датчики, анализ, исполнение), горизонтальной карусели продуктов и экрана приложения, а сквозной кнопкой стала «Собрать свою ферму». Сравните ayvazzovsky.academy - онлайн-академию видеоуроков колористики с каталогом курсов, посадочными страницами уроков, личным кабинетом и промокодами - и navsegda-event.ru, агентство корпоративных мероприятий с услугами, кейсами, этапами работы и расчётом мероприятия. Общая у них только дисциплина: каждый блок отвечает на конкретный вопрос клиента.

III. Логика заявки: главное, что видно на схеме

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

• Короткое действие на первом экране: звонок или заявка в 1-2 поля.
• Второе обращение после блока с ценами - в этот момент вопрос «сколько стоит» уже снят.
• Третье - после доказательств, когда сомнение в квалификации закрыто.
• Дубль в подвале для тех, кто дочитал страницу целиком.
• Мобильная кнопка, потому что больше половины визитов обычно приходит с телефона.

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

IV. Как читать прототип заказчику

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

1. Понятно ли с первого экрана, чем вы занимаетесь и в каком городе?
2. Есть ли на странице ответ на вопрос «сколько это стоит» хотя бы вилкой?
3. Видно ли, чем вы отличаетесь от соседнего подрядчика с такими же словами?
4. Сколько прокруток до первой возможности оставить заявку на телефоне?
5. Что человек получает после отправки формы и когда с ним свяжутся?
6. Есть ли блок, который не отвечает ни на один вопрос клиента? Такой блок убираем.

Если на прототипе вы не можете объяснить, зачем нужен блок, на готовом сайте он тем более не сработает - просто будет красиво занимать место и удлинять путь до формы.

V. Сроки, деньги и что будет дальше

После утверждения прототипа работа идёт понятными этапами. Дизайн главной - обычно 3-5 дней, затем внутренние страницы по утверждённой логике, затем сборка. Сайт на React - от 80 000 ₽, обычно 1-2 недели от полного комплекта материалов. Перенос действующего сайта с конструктора на свой код и свой хостинг - тоже от 80 000 ₽: так, например, переехал сайт салона сложного окрашивания ayvazzovsky.com с двумя адресами, онлайн-записью и видео работ мастеров.

Дальше сайт нужно наполнять, иначе он останется визиткой: SEO-статья от 500 ₽, 200 статей в месяц - 100 000 ₽, прокачка блога от 75 000 ₽ в месяц. Состав услуг и порядок работы описаны на странице разработка сайтов и SEO. Пока органика набирает вес, поток обращений можно закрывать через лиды с оплатой за результат - платите за обращения, а не за ожидание.

VI. Ошибки при работе с прототипом

• Пропустить этап ради скорости. Экономия 3 дня на схеме обычно оборачивается неделей переделок после вёрстки.
• Обсуждать цвета. На прототипе их нет намеренно; вернитесь к этому на макете.
• Копировать структуру конкурента. У него другие услуги, другие доказательства и, возможно, такой же неработающий сайт.
• Утверждать без мобильной схемы. Порядок блоков на телефоне отличается, и проверять его нужно отдельно.
• Оставлять «рыбу» в заголовках. Настоящие формулировки часто ломают красивую схему - лучше узнать об этом сразу.
• Собирать правки от пяти человек параллельно. Нужен один сведённый список от одного ответственного.

VII. Короткий итог

Прототип главной показывает семь вещей: первый экран, услуги, цены, доказательства, порядок работы, форму и контакты - и одну линию, ради которой всё это собрано, путь до заявки. Делается он обычно за 2-4 дня, правки на нём стоят минут, а не часов, и у нас он бесплатный: до договора и без предоплаты вы видите, как будет выглядеть ваш сайт, и решаете, работать дальше или разойтись. Дальше - дизайн, сборка на React от 80 000 ₽ за 1-2 недели от материалов и наполнение. Оценивать входящий поток после запуска помогает методика из материала про оценку качества лидов.

Наши работы

Сайты, которые студия уже запустила

Четыре проекта N3MIROFF, которые можно открыть прямо сейчас и посмотреть, как они работают.

Агротех с ИИ

SkyFarm ↗

Редизайн сайта систем выращивания: первый экран с контейнерной фермой, схема работы из трёх шагов, карусель продуктов и экран приложения.

Сайт салона

ayvazzovsky.com ↗

Салон сложного окрашивания в Москве: онлайн-запись, видео работ, портфолио и команда. Переехал с Тильды на свой хостинг.

Онлайн-академия

ayvazzovsky.academy ↗

Видеоуроки колористики: каталог, посадочные страницы уроков, личный кабинет и промокоды.

Event-агентство

navsegda-event.ru ↗

НАВСЕГДА: корпоративы и конференции - услуги, кейсы, этапы работы и расчёт мероприятия.

Витрина магазина

Monkey Market ↗

Премиальная витрина магазина кроссовок с заказом в Telegram.

Разработка сайтов от 80 000 ₽ →Все работы студии

Посмотрите на свой сайт до того, как платить

Соберём прототип главной: первый экран, блоки, порядок и логика заявки. Бесплатно, до договора и без предоплаты.

Получить расчёт заявок →

Нажимая кнопку, вы соглашаетесь на обработку данных для ответа на заявку.

Частые вопросы