Я Максим, веб-разработчик, и за годы работы я собрал десятки лендингов — для юристов, клиник, строительных компаний, SaaS-сервисов, фотографов. И каждый раз главная битва разворачивается на первом экране. Hero-секция — это место, где вы либо зацепите посетителя, либо потеряете его навсегда. У вас 3–5 секунд, чтобы человек понял три вещи: куда он попал, что ему предлагают и почему стоит остаться.

По данным Яндекс Метрики, которую я вижу на клиентских сайтах, 40–60% посетителей лендинга уходят, не проскроллив дальше первого экрана. Это значит, что hero-секция — самый важный элемент лендинга. Если она не работает — всё остальное бессмысленно: блоки преимуществ, отзывы, портфолио — их просто никто не увидит.

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

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

Понятный заголовок (оффер)

Заголовок — главный элемент hero-секции. Человек должен за одну секунду понять, что ему предлагают. Не приблизительно, не «вроде что-то про ремонт» — а конкретно.

Хороший заголовок: «Ремонт квартир в Москве от 5 000 ₽/м² с гарантией 5 лет». Понятно что (ремонт), где (Москва), сколько (от 5 000 ₽/м²), почему стоит (гарантия 5 лет).

Плохой заголовок: «Создаём пространство вашей мечты». Красиво? Да. Понятно? Нет. Это может быть дизайн интерьеров, строительная компания, мебельный магазин или салон штор. Когда заголовок можно поставить на сайт любого бизнеса — он не работает.

Формула хорошего заголовка отвечает на три вопроса: что вы делаете (продукт или услуга), для кого (целевая аудитория или география), почему стоит выбрать вас (ключевое преимущество — цена, скорость, гарантия, уникальность).

Ещё несколько примеров из моей практики. Для стоматологии: «Имплантация зубов за 1 день — технология All-on-4 от 180 000 ₽» — конкретно, с ценой и технологией. Для SaaS: «CRM для автосервисов: учёт заказов, запчастей и клиентов в одной системе» — понятно, для кого и что делает. Для фотографа: «Съёмка корпоративных мероприятий в Москве — 150+ отснятых событий» — социальное доказательство прямо в заголовке.

Подзаголовок

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

Пример: заголовок — «Разработка сайтов для малого бизнеса». Подзаголовок — «Запуск за 3 недели. Адаптивный дизайн, SEO-оптимизация и подключение аналитики. Фиксированная цена — без скрытых доплат».

Подзаголовок не должен дублировать заголовок — он должен дополнять его. Если в заголовке вы указали цену — в подзаголовке добавьте срок. Если в заголовке — уникальность — в подзаголовке дайте конкретику.

Размер шрифта подзаголовка — заметно меньше заголовка (обычно 18–22px против 36–48px). Цвет — менее контрастный. Визуально он вторичен, но по смыслу — критичен.

Кнопка действия (CTA)

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

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

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

Рядом с кнопкой часто имеет смысл добавить микротекст, снижающий барьер: «Бесплатно», «Без обязательств», «Перезвоним за 30 секунд», «Расчёт за 2 минуты».

Визуал

Фото, иллюстрация, видео-фон или анимация — визуальный элемент, который подкрепляет оффер и создаёт эмоциональный контекст.

Для ремонтных компаний — фото реализованного проекта (не рендер, а реальное фото с хорошим светом). Для SaaS — скриншот интерфейса или анимированная демонстрация. Для услуг — фото команды или процесса работы. Для e-commerce — фотография продукта в контексте использования.

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

Отдельный вопрос — видео на первом экране. Автопроигрываемое фоновое видео может быть эффектным, но имеет нюансы: увеличивает время загрузки (критично для мобильных), отвлекает от текста, если слишком динамичное, на слабых устройствах может тормозить. Я использую видеофон только когда он действительно добавляет ценность — например, для ресторана (атмосфера зала) или для производства (процесс работы).

Элементы доверия

На первом экране можно (и нужно) разместить компактные элементы доверия: логотипы клиентов или партнёров, ключевые цифры (15 лет на рынке, 500+ проектов, рейтинг 4.9 на Яндекс Картах), значки наград или сертификатов. Это не обязательный элемент, но он усиливает оффер. Человек видит: «Ага, 500 проектов — значит, опытные» — и барьер доверия снижается.

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

Длинного текста о компании. Для этого есть блок «О нас» ниже. На первом экране — только оффер.

Слайдера с пятью разными офферами. Я категорически против слайдеров на hero-секции. Исследования раз за разом показывают: пользователи редко листают слайды, первый слайд получает 90% внимания, а остальные — крохи. Хуже того — слайдер размывает фокус. Вместо одного чёткого сообщения человек получает пять размытых.

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

Меню навигации на 15 пунктов. Лендинг — это одностраничник с одной целью. Навигация должна быть минималистичной: логотип, телефон, 2–3 якорных ссылки на секции ниже. Полноценное многоуровневое меню — для сайтов, а не для лендингов.

Психология восприятия первого экрана

Человек сканирует веб-страницу по предсказуемым паттернам. Два основных — F-паттерн и Z-паттерн.

F-паттерн: взгляд движется горизонтально по верхней части, потом спускается чуть ниже и снова движется горизонтально (но короче), затем скользит вниз по левому краю. Типичен для текстового контента. Это значит, что заголовок в верхней левой части будет прочитан первым.

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

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

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

Мобильная версия — отдельная история

На мобильном первый экран — это 320–400 пикселей по высоте (без учёта шапки браузера). Всё, что не влезает — уходит за скролл. И если за скроллом оказалась кнопка CTA — считайте, что вы потеряли часть конверсий.

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

Конкретные рекомендации: размер заголовка на мобильном — 24–32px (не больше, иначе займёт весь экран), размер кнопки — минимум 48px по высоте, ширина на всю колонку, фоновое изображение — если используется, то затемнённое, чтобы текст был читаемым, отступы — компактные, но не нулевые (16–24px по бокам).

Типичные ошибки hero-секций, которые я вижу у клиентов

Заголовок ни о чём. «Мы — ваш надёжный партнёр». Кто вы? Партнёр в чём? Почему надёжный? Такие заголовки — пустышки.

CTA без конкретики. «Подробнее» — подробнее о чём? «Отправить» — что отправить? Чем конкретнее формулировка кнопки, тем выше конверсия.

Перегруженный первый экран. Заголовок, три подзаголовка, пять кнопок, логотипы партнёров, карта, видео и ещё акция в углу. Пользователь не знает, куда смотреть — и не смотрит никуда. Меньше элементов — сильнее фокус.

Белый текст на светлом фото без затемнения. Текст нечитаем, и неважно, что он гениальный. Если текст на фоновом изображении — обязательно затемнение (overlay) или полупрозрачная подложка.

Заголовок, понятный только владельцу бизнеса. «Комплексные решения в области B2B-интеграций» — это понятно вам, но не клиенту. Покажите заголовок кому-то, кто не знаком с вашим бизнесом. Если за 5 секунд не понял, о чём речь — переписывайте.

Как проверить эффективность hero-секции

A/B-тестирование — золотой стандарт. Создайте два варианта первого экрана с разными заголовками (или разными CTA, или разным визуалом) и разделите трафик. Инструменты: Google Optimize (если доступен), VWO, встроенные возможности Яндекс Директа (разные посадочные в рамках одной кампании).

Тепловые карты в Яндекс Метрике (Вебвизор). Покажут, куда кликают, до куда скроллят, на чём задерживают взгляд. Если кнопка CTA не получает кликов — она либо незаметна, либо неубедительна.

Метрика «время на странице» + «показатель отказов». Если 70% посетителей уходят за 5 секунд — hero-секция не зацепила. Если время на странице 30+ секунд и скролл доходит до блока отзывов — первый экран сработал.

Простой «тест коридора»: покажите первый экран 5 случайным людям на 5 секунд каждому. Спросите: «О чём этот сайт?» Если 4 из 5 ответят правильно — заголовок работает. Если 3 из 5 ответят «не знаю» — переписывайте.

Итог

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