Дизайнер открывает Figma и спрашивает: что ставим первым экраном, оффер или форму заявки? Если ответа нет, макет лендинга собирается на глаз, а через неделю половина блоков меняется местами уже в готовом дизайне. Дешевле свериться со структурой на этапе, где правки стоят пять минут, а не рабочий день.
Wireframe, то есть чёрно-белый каркас страницы, фиксирует только две вещи: какие блоки будут на лендинге и в каком порядке они идут. Ни цвета, ни шрифты, ни финальные тексты на этом этапе не нужны. Прямоугольник вместо фото, линия вместо заголовка, подпись блока вместо готового текста: такой уровень детализации достаточен, чтобы проверить логику страницы до того, как в неё вложены часы дизайна.
Чем позже всплывает несостыковка в структуре, тем дороже её устранять. На этапе каркаса перестановка блока занимает пять минут в редакторе. В готовом макете это новая вёрстка, новые иллюстрации и правки у копирайтера, который успел написать текст под старый порядок.
Что такое wireframe и зачем он нужен до дизайна
Между идеей и готовым дизайном лендинга есть промежуточный шаг, который часто пропускают из-за спешки. Заказчик хочет увидеть красивый экран как можно раньше, а дизайнер начинает работу с готовых референсов вместо структуры. Результат: эффектный блок, под который нет логичного продолжения, и секции, которые противоречат друг другу по смыслу.
Wireframe снимает это противоречие. На этом этапе решают не как выглядит блок, а нужен ли он вообще и что он должен сказать посетителю. Если блок не прошёл проверку на этом шаге, его проще убрать из прямоугольника на экране, чем из готового макета с фотографиями и иконками.
Пример из практики: дизайнер нарисовал экран с крупным видео в начале страницы, а оффер ушёл вторым блоком. На каркасе это решение заняло бы минуту обсуждения. В готовом макете пришлось переверстать первый экран, поменять формат видео под новое место и заново согласовать текст с заказчиком.
Какую цель лендинга закладывают в макет
Прежде чем набрасывать блоки, нужно ответить на один вопрос: какое действие должен совершить посетитель. Заявка через форму, звонок, переход в мессенджер, покупка в один клик, запись на консультацию. От этого действия зависит всё остальное: длина страницы, набор аргументов и место, где стоит кнопка.
Для простого и дешёвого продукта с коротким циклом решения макет лендинга может ограничиться оффером, несколькими выгодами и формой. Посетитель уже понимает, что ему нужно, и не ждёт долгих объяснений. Для дорогого продукта или сложной услуги короткая страница не сработает: нужно место для возражений, сравнения, кейсов и цены, иначе посетитель уйдёт искать ответы на вопросы, которые лендинг не снял.
Иногда у страницы есть не одно, а два действия: основное, например заявка на расчёт, и запасное, например подписка на рассылку или переход в блог для тех, кто пока не готов оставить контакты. Запасное действие помогает не терять холодного посетителя, который не дошёл до покупки, но может вернуться позже. В макете для такого случая обычно закладывают вторичную кнопку рядом с основной формой, а не отдельный конкурирующий блок.
Холодный и тёплый трафик меняют структуру
Если человек приходит с контекстной рекламы по прямому запросу, он уже тёплый: можно сразу показать оффер и цену. Если трафик холодный, например из статьи или соцсети, сначала нужно объяснить проблему и только потом переходить к решению. Один и тот же продукт получает разные макеты под разные источники трафика.
Какие блоки входят в макет лендинга и как выбрать нужные
Универсального набора блоков нет, но есть база, из которой собирают почти любой лендинг:
- Оффер: заголовок с сутью предложения и подзаголовок с уточнением.
- Выгоды: несколько пунктов, обычно от трёх до пяти, почему стоит выбрать именно этот продукт.
- Как это работает: шаги процесса, если услуга не очевидна с первого взгляда.
- Сравнение или таблица: чем отличается продукт от альтернатив.
- Кейсы или примеры работ, если есть что показать без выдуманных цифр.
- Цена или условия: даже если точную цифру заменяет формулировка от и форма расчёта.
- Снятие возражений: ответы на вопросы, которые мешают оставить заявку.
- Отзывы, если они реальные и проверяемые.
- Форма заявки с понятным действием и минимумом полей.
- Контакты и способы связи помимо формы.
Выбор блоков зависит от цены продукта и сложности решения. Таблица ниже показывает разницу между короткой и длинной структурой.
| Параметр | Короткий лендинг | Длинный лендинг |
|---|---|---|
| Продукт | Простой, низкая цена | Дорогой, сложное решение |
| Количество блоков | от 4 до 6 | от 8 до 12 |
| Форма заявки | Один раз, в конце | Повторяется несколько раз |
| Снятие возражений | Минимум | Отдельный блок или два |
Если нужны готовые примеры того, как эти блоки складываются в разных нишах, подробный разбор структуры по десяти направлениям есть в статье про примеры лендингов и разбор их структуры.
Как расставить порядок блоков по логике внимания
Порядок важнее набора. Одни и те же блоки, расставленные по-разному, дают разную конверсию. Рабочий принцип: от проблемы к решению, от решения к доказательствам, от доказательств к действию.
- Оффер отвечает на вопрос, что это и зачем мне, за первые секунды на странице.
- Выгоды и механика объясняют, как продукт решает проблему посетителя.
- Доказательства: кейсы, сравнение, отзывы, снимают недоверие.
- Цена и условия закрывают рациональный вопрос, сколько это стоит.
- Снятие последних возражений идёт прямо перед формой, а не в середине страницы.
- Форма заявки и контакты закрывают страницу и повторяются, если лендинг длинный.
Частая ошибка: ставить форму заявки сразу после оффера на дорогом продукте. Посетитель ещё не получил ни одного аргумента и просто закрывает вкладку. Другая ошибка: прятать цену в самый конец длинной страницы, из-за чего часть посетителей уходит, не долистав до неё.
Порядок блоков не обязательно финальный на старте: после запуска лендинга его проверяют через карту скроллинга, которая показывает, до какого блока долистывает большинство посетителей. Если форма заявки стоит ниже этой отметки, часть трафика до неё не доходит и конверсия падает без видимой причины. Поэтому порядок, заложенный в каркас, стоит пересматривать после первых недель показа рекламы, а не считать его единственно верным навсегда.
Какой уровень детализации нужен в wireframe
Макет лендинга на этом этапе не нуждается в финальных текстах. Достаточно короткой подписи: заголовок, от пяти до семи слов, акцент на выгоде, или три карточки с иконкой и подписью. Дизайнер и копирайтер получают структуру и смысл блока, а не готовую фразу, которую потом придётся переписывать под вёрстку.
Для самого каркаса подходят любые инструменты: лист бумаги, Miro, Figma в низкой детализации, Whimsical. Выбор инструмента не влияет на качество структуры, важно только зафиксировать блоки и их порядок так, чтобы на это можно было сослаться при обсуждении с командой.
Каркас удобно показать заказчику или руководителю до начала дизайна именно потому, что обсуждать структуру проще на схеме, чем на готовом экране с цветами и фотографиями. Человек без опыта в дизайне легко комментирует порядок блоков и смысл текста, но теряется, когда вместо этого видит готовую картинку и начинает обсуждать оттенок кнопки вместо логики страницы. Каркас держит разговор в нужной плоскости.
Если цель, собрать лендинг самостоятельно и быстро на готовом конструкторе, пошаговый процесс сборки с готовым каркасом под рукой описан в статье про сборку лендинга на Тильде.
Типичные ошибки при сборке макета
- Блок добавлен на всякий случай, без ответа на вопрос, какую задачу он решает.
- Структура скопирована у конкурента без проверки, подходит ли она под цель и цену своего продукта.
- Мобильная версия продумана после десктопной, хотя больше половины трафика часто приходит с телефона.
- Форма заявки единственная и стоит в самом конце, хотя страница длинная и часть посетителей не долистывает.
- Заголовки блоков описывают сам блок, а не выгоду: формулировка вроде наши услуги вместо конкретного обещания.
- Все доказательства, кейсы, отзывы и сравнение собраны в один блок вместо того, чтобы распределить их по странице рядом с аргументами, которые они подтверждают.
- Каркас согласован с одним человеком в команде, а правки от остальных прилетают уже на этапе готового дизайна, когда структуру менять дороже.
Как проверить макет перед передачей дизайнеру
Перед тем как отдавать каркас в дизайн, стоит пройти его глазами незнакомого человека. Три проверки занимают пятнадцать минут и экономят недели переделок.
Первая: прочитать только заголовки блоков сверху вниз. Если по ним понятен смысл предложения без текста внутри блоков, структура держится. Вторая: отметить, на каком блоке человек, который сомневается в покупке, скорее всего закроет страницу, и добавить аргумент именно туда. Третья: проверить порядок блоков в мобильной раскладке отдельно, потому что на телефоне длинные блоки иногда меняют смысловую связку между соседними экранами.
Полезно показать каркас человеку, который не участвовал в разработке продукта, и попросить пересказать своими словами, что продаёт страница и что нужно сделать, чтобы получить предложение. Если пересказ совпадает с задумкой, структура готова к передаче в дизайн. Если человек путается или пропускает шаг, значит, в каркасе есть пробел, который дизайн только скроет за красивой картинкой, а не исправит.
Частые вопросы
Сколько блоков должно быть на лендинге?
Жёсткой нормы нет. Для простого продукта с низкой ценой достаточно от четырёх до шести блоков: оффер, выгоды, условия, форма. Для сложной услуги или дорогого продукта структура обычно включает от восьми до двенадцати блоков за счёт сравнения, кейсов и снятия возражений. Ориентир не количество, а то, закрыт ли каждый вопрос, который возникает у посетителя по пути к заявке.
Нужен ли wireframe, если лендинг собирают в конструкторе?
Да, конструктор меняет только способ вёрстки, а не логику страницы. Без каркаса блоки в конструкторе собирают по порядку готовых шаблонов, а не по задаче продукта. Десять минут на схему до открытия редактора экономят часы на перестановку секций, когда половина текста уже вставлена в готовые блоки.
В каком порядке ставить цены и отзывы?
Цена идёт после того, как посетитель понял выгоду и увидел доказательства, иначе цифра воспринимается без контекста. Отзывы работают и до цены, как часть доказательств, и после неё, как последний аргумент перед формой. Жёсткого правила нет, важно не ставить оба блока раньше оффера и выгод.
Можно ли пропустить wireframe и сразу делать дизайн?
Можно, но правки в этом случае переносятся на этап, где они стоят дороже: дизайнер уже нарисовал экран, копирайтер написал текст под конкретную структуру. Любая перестановка блоков на этом шаге требует пересобрать не только макет, но и тексты внутри него. Каркас дешевле менять именно потому, что в нём нет готового контента.
Чем wireframe отличается от прототипа?
Wireframe фиксирует блоки и их порядок без оформления: прямоугольники, подписи, никакой графики. Прототип идёт дальше и добавляет интерактив, переходы между экранами, иногда примерные цвета и шрифты. Для лендинга в большинстве случаев достаточно каркаса: страница одноэкранная по логике, и сложный интерактив ей не нужен.
С чего начать
Четыре шага, чтобы перейти от идеи к готовому каркасу:
- Сформулировать одно целевое действие страницы и источник трафика, под который она собирается.
- Выписать блоки из базового набора и оставить только те, что отвечают на реальный вопрос посетителя.
- Расставить блоки по порядку: проблема, решение, доказательства, цена, возражения, форма.
- Проверить макет по заголовкам блоков и отдельно пройти мобильную раскладку.
Отдельный вопрос, сколько в итоге стоит такая страница с учётом дизайна и разработки, разобран в статье про то, из чего складывается цена лендинга. Если разбираться со структурой самостоятельно не хочется, макет лендинга и сборку под ключ берёт на себя команда разработки лендингов Neurounit.
