Дизайн лендинга: структура посадочной страницы, блоки и UX

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

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

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

Что такое лендинг и когда он нужен?

Лендинг (посадочная страница, landing page) — веб-страница, которая ведёт посетителя к одному целевому действию: оставить заявку, записаться, купить, скачать, зарегистрироваться. В отличие от многостраничного сайта, у лендинга одна задача, поэтому на нём обычно нет полноценного меню и ссылок, уводящих в стороны.

Частая ситуация — компании нужно и то и другое: сайт для постоянной работы и несколько лендингов под рекламные кампании. Тогда лендинги лучше собирать из той же дизайн-системы, что и сайт, чтобы человек, перешедший с лендинга на основной сайт, не попадал в «другую компанию». Как устроить общие токены и компоненты, мы разбирали в гайде по дизайн-токенам.

С чего начать проектирование лендинга?

Не с референсов и не с цветовой палитры. Хороший лендинг начинается с текста о том, кто придёт на страницу и что ему нужно понять, чтобы сделать шаг. Четыре вопроса стоит записать до первого прототипа.

1. Откуда придёт посетитель и что он уже знает. Человек из поисковой рекламы по запросу «курсы Python с нуля» знает, что ищет; человек из таргета в соцсети видит продукт впервые. Первому нужен быстрый ответ, второму — объяснение.
2. Какое одно действие считается успехом. «Заявка на бесплатный урок», а не «заявка, подписка, звонок и скачивание каталога». Второстепенные действия допустимы, но не на месте главного.
3. Какие вопросы и возражения мешают действию. Цена, сроки, гарантии, «а подойдёт ли мне». Их собирают из звонков отдела продаж, переписки поддержки, отзывов и интервью.
4. Чем предложение отличается от конкурентов. Одна-две вещи, которые можно доказать фактом, а не прилагательным.

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

Что должно быть на первом экране лендинга?

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

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

Чего на первом экране быть не должно: слайдера с пятью меняющимися офферами (до третьего слайда никто не досматривает), автозапуска видео со звуком, всплывающего окна подписки в первые секунды и меню из десяти пунктов. Логотип не должен вести на другой сайт: если на лендинге всё-таки есть навигация, это якорные ссылки на блоки этой же страницы.

Понятие «первый экран» условно: на ноутбуке и на телефоне видна разная часть страницы. Проверяйте, что оффер и кнопка помещаются в видимую область хотя бы на двух опорных размерах — например, 1366×768 и 390×844.

В каком порядке выстраивать блоки лендинга?

Порядок блоков повторяет порядок вопросов посетителя. Для холодной аудитории, которая видит продукт впервые, рабочая последовательность выглядит так.

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

Каждый блок должен отвечать ровно на один вопрос и быть понятным без соседних. Человек часто приходит в середину страницы по якорю или долистывает до цен, пропустив всё остальное, — блок «Условия» без контекста выгод всё равно должен быть понятным. Если два блока отвечают на один и тот же вопрос, их стоит объединить или удалить один.

Как выстроить визуальную иерархию лендинга?

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

• Заголовки блоков — законченные мысли. «Первый проект — уже на 4-й неделе» читается при сканировании, «Программа курса» — нет. Если прочитать подряд только заголовки, должна сложиться история предложения.
• Одна шкала размеров. 3–4 уровня текста с заметной разницей между ними. Когда на странице семь кеглей, иерархия рассыпается. Как построить такую шкалу, мы описали в статье о типографической шкале интерфейса.
• Ритм и воздух. Отступы между блоками заметно больше, чем внутри блока, — так страница делится на понятные части. Отступы берутся из общей сетки, а не на глаз; подробнее — в материале о сетке и отступах 4/8 pt.
• Акцентный цвет только для действий. Если цвет кнопки встречается ещё в иконках, плашках и подчёркиваниях, кнопка перестаёт выделяться. Акцент — для того, на что нужно нажать.
• Короткие абзацы и списки. 2–4 строки на абзац, перечисления — списками, цифры — крупно. Длинные полотна текста на лендинге почти не читают.

Чередование фона блоков помогает отделить смысловые части, но не заменяет заголовки. Фоновые видео, параллакс и анимации при прокрутке оправданы, только если показывают продукт; декоративное движение отвлекает и мешает людям с вестибулярной чувствительностью — о том, где анимация уместна, мы писали в статье о моушн-дизайне в интерфейсе.

Как оформить кнопки и призывы к действию?

Кнопка — точка, где интерес превращается в действие. Ошибки здесь стоят дороже всего, потому что затрагивают каждого посетителя.

1. Текст описывает результат. «Получить расчёт стоимости», «Записаться на урок», «Скачать чек-лист». «Отправить» и «Подробнее» не говорят, что произойдёт.
2. Одно главное действие. Если на странице есть второстепенное действие («Посмотреть программу»), оно оформлено как вторичная кнопка или ссылка и не спорит с главной.
3. Повтор в ключевых местах. На первом экране, после выгод, после доказательств, после цен и в финале. Посетитель, готовый к действию, не должен листать в поисках кнопки.
4. Заметность и размер. Контраст с фоном, достаточная высота (от 44–48 px), свободное пространство вокруг. На телефоне — во всю ширину или в зоне большого пальца.
5. Снятие страха рядом с кнопкой. Короткая строка под кнопкой: «Бесплатно, без привязки карты», «Перезвоним в течение 15 минут», «Можно отменить в любой момент».
6. Понятные состояния. Наведение, фокус, нажатие, загрузка после отправки. Кнопка, которая ничего не показывает после клика, провоцирует повторные заявки или уход. Полный набор состояний — в нашем чек-листе состояний компонента.

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

Как спроектировать форму заявки?

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

• Минимум полей. Для первого контакта обычно хватает имени и одного способа связи. Компанию, бюджет и сроки менеджер уточнит в разговоре.
• Подписи над полями. Не плейсхолдеры вместо подписей: подсказка исчезает при вводе, и человек забывает, что вводит.
• Правильные типы полей. type="tel" для телефона, type="email" для почты, autocomplete для автозаполнения — на телефоне это экономит больше всего времени.
• Мягкие маски. Маска телефона принимает номер, вставленный в любом формате, с +7, 8 или без кода.
• Ошибки рядом с полем. Конкретные, без обвинений: «Проверьте номер — в нём 9 цифр вместо 10». Проверка — после ухода из поля, а не на каждом символе.
• Многошаговость для длинных форм. Если данных действительно нужно много, разбейте форму на 2–3 шага с индикатором прогресса и начните с самых простых вопросов.
• Внятное подтверждение. После отправки — экран или блок «Заявка принята: перезвоним до 18:00 сегодня», а не исчезнувшая форма.

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

Как показать доверие и доказательства?

Посетитель лендинга ничего о вас не знает и по умолчанию не верит обещаниям. Доказательства превращают «мы лучшие» в проверяемые факты. Работают они, только если конкретны.

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

Важно и то, чего на лендинге нет. Манипулятивные приёмы — фальшивые таймеры обратного отсчёта, выдуманные «осталось 2 места», заранее поставленные галочки подписки — дают краткий рост конверсии и подрывают доверие при первой же проверке. Как такие приёмы распознают пользователи и регуляторы, мы писали в материале о тёмных паттернах.

Как проектировать лендинг для мобильных устройств?

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

• Короче на первом экране. Оффер в 6–10 слов, подзаголовок в одну строку, кнопка видна без прокрутки.
• Кнопки в зоне большого пальца. Главная кнопка во всю ширину или закреплённая внизу, цели нажатия — не меньше 44×44 px, между ними — достаточное расстояние.
• Блоки перестраиваются, а не сжимаются. Три колонки выгод становятся вертикальным списком или горизонтальной прокруткой карточек, таблица тарифов — карточками тарифов.
• Контент не прячется. Если информация важна для решения, она есть и на мобильном; можно свернуть в аккордеон, но не удалить.
• Звонок и мессенджеры в одно касание. Номер телефона — ссылкой tel:, кнопки мессенджеров — для тех, кому проще написать.
• Проверка на реальных устройствах. Эмулятор в браузере не показывает, как работает клавиатура, автозаполнение и медленная сеть.

Общие принципы перестройки макета под разные ширины — контрольные точки, гибкие сетки, адаптивные изображения — разобраны в статье об адаптивном веб-дизайне.

Как скорость загрузки влияет на дизайн лендинга?

Скорость — часть дизайна, а не только забота разработчиков. Решения, принятые в макете, напрямую определяют, сколько будет весить страница: полноэкранное видео на фоне, десять шрифтовых начертаний, карусель из 4K-фотографий, сторонние виджеты чатов и квизов.

Google оценивает пользовательский опыт загрузки метриками Core Web Vitals: LCP (как быстро отрисовался главный элемент первого экрана, ориентир — до 2,5 секунды), INP (как быстро страница реагирует на действия, ориентир — до 200 мс) и CLS (насколько элементы «прыгают» при загрузке, ориентир — меньше 0,1). Описание метрик и порогов — в руководстве web.dev о Core Web Vitals. Для лендинга на рекламном трафике это не только про SEO: каждая лишняя секунда ожидания на мобильной сети — это люди, которые закрыли вкладку до первого экрана.

Хорошая практика — договориться о «бюджете» страницы ещё на этапе дизайна: например, первый экран — не больше 200 КБ, вся страница — не больше 1,5 МБ. Тогда каждый тяжёлый элемент приходится обосновывать.

Как сделать лендинг доступным?

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

• Контраст. Текст — не ниже 4,5:1 к фону, крупные заголовки и элементы управления — не ниже 3:1. Светло-серый текст на белом и белый текст на фотографии без подложки — самые частые нарушения.
• Текст на изображениях. Оффер, цены и условия — живым текстом, а не частью картинки. Картинку не прочитает ни скринридер, ни поисковик, ни переводчик в браузере.
• Альтернативный текст. У содержательных изображений — описание смысла, у декоративных — пустой alt.
• Клавиатура и фокус. Все кнопки, ссылки и поля формы достижимы клавишей Tab в логичном порядке, фокус хорошо виден.
• Подписи полей и ошибки. Подписи связаны с полями, ошибки озвучиваются, а не только подсвечиваются красным.
• Движение. Анимации учитывают системную настройку «уменьшить движение» (prefers-reduced-motion), автопрокручиваемые слайдеры можно остановить.

Нормативная опора — WCAG 2.2 на уровне AA. Как применять пороги контраста и требования к видимому фокусу на практике, мы разбирали в статье о WCAG 2.2 для дизайнеров.

Как подготовить лендинг к ИИ-поиску?

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

1. Факты текстом. Что продаётся, для кого, сколько стоит, сроки, условия — в обычном HTML-тексте, а не в картинках и не только в анимированных счётчиках.
2. Самодостаточные блоки. Каждый блок начинается с прямого ответа: «Курс длится 8 недель, занятия — два раза в неделю по 90 минут». Фрагмент, вырванный из контекста, остаётся понятным.
3. Вопросы и ответы. FAQ с формулировками, которыми спрашивают реальные люди, и разметка FAQPage в JSON-LD.
4. Структурированные данные. Разметка организации, продукта или услуги, цен и отзывов (только реальных) помогает системам правильно понять, что предлагается.
5. Одна сущность — одно название. Продукт называется одинаково в заголовке, тексте, кнопках и разметке, без синонимической путаницы.

Эти правила не требуют менять дизайн: они касаются того, как текст разложен по блокам и размечен. Но обсуждать их стоит на этапе прототипа, пока структура ещё гибкая.

Как измерять и тестировать дизайн лендинга?

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

1. Цели в аналитике. Каждое целевое действие — отправка формы, клик по телефону, переход в мессенджер — отдельная цель. Без этого непонятно, что вообще считать результатом.
2. Карты скроллинга и кликов. Показывают, до какого блока доходит большинство и куда люди пытаются нажать. Если половина уходит до блока с ценами, а цены — главный вопрос, блок стоит поднять.
3. Анализ формы. На каком поле чаще всего бросают заполнение, какие ошибки показываются чаще.
4. Юзабилити-сессии. 3–5 человек из целевой аудитории с заданием «найдите, сколько стоит, и оставьте заявку». Это быстро вскрывает непонятные формулировки и потерянные кнопки. Как организовать такие сессии, мы разбирали в статье о тестировании на пяти пользователях.
5. A/B-тесты по гипотезам. Меняйте одно существенное решение — оффер, порядок блоков, длину формы, — а не цвет кнопки. Считайте нужный объём выборки заранее и не останавливайте тест, как только «стало лучше».

A/B-тесты требуют трафика. Если лендинг собирает несколько десятков заявок в месяц, разница между вариантами почти всегда оказывается в пределах случайности — в этом случае полезнее качественные исследования и экспертный аудит. Быстрый формат такого аудита описан в материале «UX-аудит за 30 минут». О методах исследований и типичных ошибках интерпретации регулярно пишет Nielsen Norman Group.

Пример: лендинг онлайн-школы программирования

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

Первый экран. Заголовок «Освоите Python с нуля и соберёте первый проект за 8 недель», подзаголовок «Онлайн, 2 занятия в неделю по вечерам, личный наставник». Кнопка «Записаться на бесплатный урок», под ней — «Без оплаты и привязки карты». Справа — кадр реального занятия: экран с кодом и наставник в видео. Строка доверия: «1 240 выпускников, рейтинг 4,8 на независимой площадке».

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

Форма. Имя и телефон, согласие одной строкой. После отправки — блок «Заявка принята: куратор позвонит сегодня до 20:00 и подберёт время урока» и кнопка добавить напоминание в календарь.

Мобильная версия и скорость. Закреплённая кнопка «Бесплатный урок» внизу экрана, исчезающая у формы. Видео занятия — по нажатию, на первом экране статичный кадр в WebP. Два начертания шрифта, счётчики аналитики загружаются после первого экрана.

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

Частые ошибки

Чек-лист перед запуском лендинга

Пройдите по списку на прототипе, затем — на собранной странице с реальными данными и на телефоне.

1. Записаны источник трафика, аудитория и одно главное целевое действие.
2. Собраны вопросы и возражения посетителей из продаж, поддержки и отзывов.
3. Заголовок первого экрана — оффер словами клиента и совпадает с рекламой.
4. Главная кнопка видна без прокрутки на ноутбуке и телефоне, текст описывает результат.
5. Порядок блоков повторяет порядок вопросов посетителя, каждый блок понятен сам по себе.
6. Заголовки блоков складываются в историю при беглом чтении.
7. Кнопка повторяется после ключевых блоков, рядом — строка, снимающая страх.
8. В форме только нужные поля, правильные типы и автозаполнение, понятные ошибки и подтверждение.
9. Доказательства конкретны и стоят рядом с утверждениями, нет фальшивых таймеров.
10. Мобильная версия спроектирована отдельно и проверена на реальном устройстве.
11. LCP до 2,5 с, нет прыжков контента, тяжёлые элементы обоснованы.
12. Контраст по WCAG 2.2 AA, текст не картинкой, всё доступно с клавиатуры.
13. Факты и цены — текстом, есть FAQ и структурированные данные.
14. Цели в аналитике настроены, заявки доходят до CRM, проверена тестовая отправка.

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