Дизайн первого экрана: как сделать hero-блок, который работает

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

Hero-блок — это первое, что человек видит без прокрутки. Его задача не впечатлить, а сориентировать. За пару секунд посетитель должен понять:

• что вы предлагаете;
• кому и зачем это нужно;
• какой следующий шаг от него ждут.

Если хотя бы на один вопрос нет ответа, человек либо уходит, либо прокручивает страницу в поиске смысла. Всё остальное — анимации, фоны, иллюстрации — вторично и работает только поверх этих трёх ответов.

Пять элементов эффективного hero

Заголовок формулируйте через выгоду или результат, а не через категорию. «Платформа для автоматизации» говорит мало; «Заявки из сайта сразу попадают в CRM» — конкретно.

CTA должен быть один главный. Вторичное действие («Посмотреть примеры») оформляйте как ссылку или контурную кнопку, чтобы не спорить с основным.

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

Схемы раскладки

• Текст слева, визуал справа. Классика для SaaS и продуктов: глаз читает заголовок, потом видит интерфейс.
• Центрированный текст. Подходит, когда главное — сообщение, а визуал абстрактный. Хорошо работает для услуг и событий.
• Полноэкранный фон с текстом. Эффектно, но требует контраста и аккуратной работы со скоростью загрузки.
• Продукт в центре. Скриншот или демо крупно, текст коротко сверху. Уместно, когда интерфейс сам себя объясняет.

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

Мобильная адаптация

На телефоне первый экран узкий и короткий, поэтому порядок важнее композиции:

1. Заголовок — первым, крупно, но без переносов на пять строк.
2. Подзаголовок — коротко, можно сократить относительно десктопа.
3. CTA — во всю ширину или близко к этому, в зоне досягаемости пальца.
4. Визуал — ниже кнопки или упрощённый; огромная картинка над заголовком выталкивает смысл за экран.

Проверяйте на реальных устройствах с небольшими экранами, а не только в эмуляторе на широком мониторе.

Скорость и производительность

Hero почти всегда содержит самый крупный элемент страницы, поэтому он напрямую влияет на LCP (Largest Contentful Paint).

• Используйте современные форматы изображений (WebP, AVIF) и отдавайте размер под экран через srcset.
• Главное изображение hero не откладывайте ленивой загрузкой — наоборот, подскажите браузеру его приоритет.
• Задавайте размеры изображения, чтобы не было сдвига макета (CLS).
• Тяжёлое фоновое видео заменяйте на постер или короткий зацикленный ролик; на мобильных часто лучше статика.
• Веб-шрифты подключайте с font-display: swap, чтобы заголовок не был невидимым.

<img src="hero-1200.webp"
     srcset="hero-600.webp 600w, hero-1200.webp 1200w"
     sizes="(max-width: 768px) 100vw, 50vw"
     width="1200" height="800"
     fetchpriority="high"
     alt="Экран приложения со списком заказов">

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

• Абстрактный заголовок вроде «Инновации для вашего бизнеса» — не говорит ничего.
• Несколько равнозначных кнопок — человек не знает, что выбрать, и не выбирает ничего.
• Слайдер в hero — большинство видит только первый слайд, остальные сообщения теряются.
• Декоративный визуал, который не связан с продуктом.
• Низкий контраст текста на фото или градиенте.
• Тяжёлая анимация при загрузке, из-за которой контент появляется с задержкой.
• Hero на весь экран без подсказки прокрутки — посетитель думает, что страница закончилась.