Hero-секция сайта: как создать первое впечатление

Что такое hero-секция

Hero-секция — первый экран сайта, то, что видит пользователь до прокрутки. Это самая важная часть страницы: за 3 секунды пользователь решает, остаться или уйти. 94% первого впечатления о сайте связано с дизайном, и hero-секция формирует большую его часть.

Hero — не просто красивая картинка. Это продуманная комбинация заголовка, визуала и CTA, которая отвечает на три вопроса: что это? Для кого? Что делать дальше?

Элементы эффективной hero-секции

Заголовок (H1)

Главное сообщение. Не описание компании, а ценность для клиента. «Создаём сайты, которые продают» вместо «Веб-студия с 10-летним опытом». Длина: 5–12 слов. Размер: 36–60px, жирный.

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

Расшифровка заголовка. Конкретика: для кого, как, за сколько. «От лендинга до интернет-магазина за 14 дней с гарантией результата». Размер: 18–24px, обычный или средний вес.

CTA-кнопка

Одно конкретное действие: «Получить расчёт», «Заказать звонок», «Смотреть портфолио». Крупная, контрастный цвет, заметная. Вторичная кнопка (ghost) рядом допустима: «Узнать цены».

Визуал

Фотография, иллюстрация, видео-фон или 3D-сцена. Визуал должен усиливать сообщение, а не отвлекать от него. Фото продукта/результата работает лучше абстрактных стоков.

Социальное доказательство

Необязательно, но усиливает: «500+ проектов», логотипы клиентов, рейтинг «4.9 из 5». Размещается компактно, не конкурирует с CTA.

Типы hero-секций

Текст + изображение

Классический layout: текст слева, изображение справа (или наоборот). На мобильных — текст сверху, изображение снизу. Универсальный вариант для любого бизнеса.

Полноэкранное фото/видео

Фон — фотография или видео, текст поверх. Эмоциональный, подходит для ресторанов, отелей, недвижимости. Обязательно: затемнение фона для читаемости текста, оптимизация видео (max 3 МБ).

Минималистичный

Только текст на однотонном или градиентном фоне. Мощная типографика вместо визуала. Подходит для SaaS, технологических компаний, минималистичных брендов.

С формой

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

С интерактивом

Анимации, параллакс, 3D. Эффектно, но тяжело: следите за производительностью и не забывайте про адаптивность.

Размеры hero-секции

• Десктоп: 100vh (полный экран) или 600–800px. Полный экран эффектнее, но не заставляйте скроллить до контента
• Мобильный: контент определяет высоту. Не растягивайте до 100vh — на телефоне это слишком много пустого пространства
• Фоновое изображение: 1920×1080 (десктоп), отдельное 768×1024 (мобильный). WebP, до 200 КБ

Типичные ошибки

• Нет чёткого УТП — «Добро пожаловать на наш сайт» не работает
• Нет CTA — красивая картинка, но непонятно, что делать
• Медленная загрузка — тяжёлое фото/видео. Первый экран должен рендериться за 1.5 секунды
• Слайдер — автоматическая карусель в hero. Второй и третий слайд не видит никто. Одно сильное сообщение лучше трёх слабых
• Нечитаемый текст — белый текст на светлом фото без затемнения

Нужна hero-секция, которая конвертирует? Свяжитесь с нами — спроектируем первый экран, который цепляет с первого взгляда.