Прототип лендинга: как составить до дизайна и сэкономить на правках

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

Что такое прототип лендинга и чем он отличается от дизайна

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

Прототипы бывают разной детализации. Текстовый прототип — обычный документ, где блоки идут друг за другом с заголовками, текстами и пометками «здесь фото», «здесь форма». Схематичный (низкой детализации) — те же блоки, но нарисованные прямоугольниками с расположением элементов на экране. Для лендинга малого бизнеса чаще всего хватает текстового прототипа или простой схемы; подробные интерактивные макеты нужны сложным сервисам, а не посадочной странице.

Зачем прототип: как он экономит правки

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

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

Прототип — самый дешёвый этап, на котором можно передумать. Всё, что не решили здесь, дальше будет стоить дороже.

Из чего состоит прототип лендинга

• Порядок блоков. Список экранов сверху вниз: первый экран, о продукте, выгоды, как это работает, цены, отзывы, ответы на вопросы, контакты. Какие блоки и в какой последовательности обычно ставят, мы подробно разобрали в статье про структуру продающего лендинга — здесь не повторяем, а показываем, как эту структуру вывести из вашей аудитории.
• Заголовки и подзаголовки. Настоящие формулировки, а не «Заголовок блока». Именно заголовки читают в первую очередь, и именно их правят чаще всего.
• Тексты. Короткие абзацы и списки под каждый блок. Не идеальные, но готовые к прочтению: по ним можно понять, убеждает страница или нет.
• Призывы к действию. Текст каждой кнопки и что произойдёт после нажатия: откроется форма, позвонит менеджер, скачается файл.
• Формы. Какие поля, обязательные ли, что написано над формой и на кнопке, куда уходят заявки. Сколько полей действительно нужно, мы разбирали в материале про формы на лендинге.
• Пометки для дизайнера и разработчика. «Здесь фото объекта до и после», «здесь видео 30 секунд», «блок раскрывается по клику», «цифры подставляются из калькулятора».
• Список того, что нужно собрать. Фотографии, отзывы, лицензии, реальные цифры — с пометкой, кто и к какому сроку это предоставляет.

Как собрать прототип: по шагам

Шаг 1. Аудитория и оффер

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

Затем сформулируйте оффер — главное предложение в одной-двух фразах: что вы даёте, кому, чем это отличается от других вариантов. Оффер станет заголовком первого экрана, поэтому его стоит проработать отдельно; как это делать, описано в статье про заголовок лендинга и оффер.

Шаг 2. Собираем возражения

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

Шаг 3. Блок под каждое возражение

Теперь структура собирается почти сама: на каждое главное возражение — блок, который его снимает. Порядок блоков — от самого сильного сомнения к менее важным, с учётом того, что первый экран должен ответить на вопрос «туда ли я попал и что здесь предлагают».

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

Шаг 4. Пишем тексты

Пишите как для одного человека, который читает страницу с телефона по дороге на работу. Заголовок блока — суть в одной фразе. Под ним — два-три коротких абзаца или список. Конкретика вместо оценок: не «быстрая доставка», а «доставка по Краснодару на следующий день». Кнопки называйте по действию: «Рассчитать стоимость», «Записаться на замер», а не «Отправить».

Не пытайтесь на этом этапе довести тексты до идеала. Задача прототипа — чтобы страницу можно было прочитать и оценить, убеждает ли она. Шлифовка формулировок пойдёт после согласования структуры.

Шаг 5. Собираем в инструменте

Инструмент не важен, важна скорость правок. Подойдёт любой из вариантов.

• Текстовый документ. Самый быстрый способ: каждый блок — заголовок, текст, кнопка, пометки. Удобно комментировать и согласовывать по ссылке.
• Бумага или доска. Прямоугольники экранов с подписями. Хорошо для первой сборки вдвоём с заказчиком; потом переносится в документ.
• Figma или другой графический редактор. Схематичные блоки с расположением элементов на экране. Полезно, когда важна компоновка: калькулятор, сравнение тарифов, сложный первый экран.
• Презентация. Слайд — экран. Удобно показывать заказчику, который привык к слайдам.

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

Как согласовывать прототип с заказчиком

Если лендинг делает подрядчик, прототип — первый документ, который вы утверждаете, и от того, как пройдёт это согласование, зависит число правок на следующих этапах.

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

Согласованный прототип удобно приложить к техническому заданию: он лучше любого описания объясняет, что должно получиться.

Чего не делать: частые ошибки

• Рисовать дизайн раньше текстов. Красивый макет с «рыбой» вместо текстов выглядит убедительно, пока не приходится вписывать реальные формулировки, которые в него не помещаются.
• Копировать структуру конкурента. У него другая аудитория и другие возражения. Заимствовать можно приёмы, но не порядок блоков целиком.
• Собирать блоки «потому что так принято». Блок «Наши преимущества» с пунктами «качество, опыт, индивидуальный подход» не снимает ни одного возражения.
• Оставлять пометки вместо содержания. «Здесь будут отзывы» — не прототип. Если отзывов нет, этого блока пока нет тоже.
• Делать прототип на пять экранов, когда нужно двадцать, и наоборот. Длина определяется числом возражений, а не привычкой.
• Забывать про мобильную версию. Большинство заходит с телефона: блок сравнения на восемь колонок или широкая таблица цен на экране телефона превратится во что-то нечитаемое.
• Согласовывать с десятью людьми. Чем больше согласующих, тем меньше в странице смысла. Нужен один человек, который принимает решение.

Чек-лист готового прототипа

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

Коротко

Прототип лендинга — это структура и тексты без дизайна. Его собирают от аудитории и оффера через список возражений: на каждое сомнение клиента — свой блок с доказательством. Делают в документе, на бумаге или в Figma, без цветов и картинок, согласовывают по блокам и фиксируют письменно. Так правки происходят там, где они стоят минуты, а дизайнер и разработчик получают готовое содержание.

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