Разработка дизайна лендинга
Лендинг — это страница с одной задачей. Не рассказать всё о компании, не дать навигацию по сайту, не развлечь — а провести конкретного пользователя, пришедшего с конкретного источника, к конкретному целевому действию: оставить заявку, зарегистрироваться, скачать, купить.
Любой элемент лендинга оценивается по одному критерию: помогает ли он этому целевому действию или нет.
Структура лендинга
Структура определяется «температурой» трафика — насколько прогрет пользователь, пришедший с этого источника.
Холодный трафик (таргетированная реклама, незнакомая аудитория) — нужно больше доверия и контекста перед CTA. Структура длиннее: hero → проблема → решение → как работает → доказательства → возражения → CTA.
Тёплый трафик (ретаргетинг, email, партнёры) — пользователь уже знает о продукте. Структура короче: hero с сильным оффером → ключевые преимущества → CTA → social proof.
Горячий трафик (брендовые запросы, прямые ссылки от клиентов) — максимально короткий путь к конверсии.
Глубокий разбор: Hero-секция лендинга
Hero — первые 100vh. Решает судьбу конверсии. Три компонента:
Заголовок (headline) — конкретное, адресное ценностное предложение. Формула: «[Результат] для [аудитории] за [срок/условие]». Пример: «Бухгалтерская отчётность для ИП без бухгалтера — за 15 минут в месяц».
Подзаголовок (subheadline) — 1–2 предложения, раскрывающих механику или снимающих ключевое возражение. Не пересказывает заголовок, а добавляет.
CTA — кнопка с конкретным действием. «Начать бесплатно», «Получить расчёт», «Скачать демо» — конкретно. «Узнать больше», «Отправить» — слабо. Под кнопкой — микrotекст, снимающий страх: «Без привязки карты», «Ответим за 2 часа», «3 000 компаний уже используют».
Визуал — скриншот продукта, результат работы, или hero-фото с реальным контекстом. Стоковые изображения «команды» конверсию не поднимают. Для SaaS: product screenshot или short screen capture.
Доверие и social proof
Блок доверия располагается непосредственно после hero (или внутри hero для горячего трафика):
- Логотипы клиентов с названиями, а не просто лого
- Конкретные цифры: «1 240 компаний», «4.9/5 на основе 320 отзывов»
- Сертификаты, партнёрства, публикации в СМИ
Отзывы — конкретные, с именем, компанией, фото, должностью. «Отличный сервис, рекомендую» — ноль доверия. «За 3 месяца сократили время обработки заявок с 4 часов до 20 минут» — работает.
Обработка возражений
Возражения — это предсказуемые причины не купить. Для B2B-лендинга типичные:
- «Слишком дорого» — покажите ROI или сравнение со стоимостью проблемы
- «Долго внедрять» — конкретный срок внедрения, onboarding-план
- «Не подойдёт для нашей отрасли» — кейсы из конкретных отраслей
- «А вдруг не понравится» — гарантия возврата, бесплатный пробный период
Возражения закрываются через FAQ-секцию, через блок «Как это работает», через кейсы, через гарантии. Не нужна отдельная секция «Ваши сомнения» — это продажническое клише.
Форма и CTA
На лендинге — минимум полей в форме. Каждое дополнительное поле снижает конверсию. A/B-тест Unbounce показал: переход с 11 полей на 4 увеличил конверсию на 160%.
Если нужна квалификация лидов — multi-step форма: первый шаг (имя + email) → второй шаг (уточняющие вопросы) → финальный шаг. Пользователь уже вложил усилие после первого шага, вероятность завершения выше.
CTA повторяется минимум дважды: в hero и в конце страницы. На длинных лендингах — sticky CTA-кнопка или sticky header с кнопкой.
Скорость загрузки
Лендинг для платного трафика — каждая секунда загрузки стоит денег. Целевые метрики:
- LCP < 2.5 секунды
- CLS < 0.1
- FID / INP < 200ms
Практически: WebP или AVIF вместо JPEG/PNG, lazy loading изображений ниже fold, минимум JS (никаких jQuery, тяжёлых анимационных библиотек без необходимости), шрифты через font-display: swap, preload для hero-изображения.
Сроки
Дизайн лендинга (desktop + mobile, 5–8 секций) — 5–8 рабочих дней. Сложный лендинг с нестандартными анимациями и кастомной иллюстративной частью — 10–14 рабочих дней.