Содержание · 8
Заголовок по центру, картинка справа, две кнопки — типовая схема, от которой устали все. Разбираем альтернативные композиции и их применимость.
Почему все первые экраны похожи
Схема «заголовок слева, изображение справа, две кнопки» стала стандартом не потому, что она лучшая, а потому, что она безопасная: она работает на любом контенте и легко собирается из компонентов.
Расплата — полная неразличимость. В нише, где двадцать компаний используют один шаблон, дизайн перестаёт быть аргументом.
Композиция 1. Типографический герой
Заголовок в 8–14 vw занимает весь экран, изображение либо отсутствует, либо появляется маленьким акцентом. Работает, когда есть что сказать одной сильной фразой.
Практический бонус: такой экран грузится мгновенно и почти всегда выигрывает по LCP.
Композиция 2. Асимметрия и разрыв сетки
Заголовок смещён к краю, изображение выходит за границы контейнера, часть текста налезает на изображение. Композиция перестаёт быть симметричной и получает направление.
Требует аккуратности на мобильных: то, что на десктопе выглядит смелым, на 375 пикселях легко превращается в кашу.
Композиция 3. Полноэкранное изображение
Работает только при действительно сильной фотографии. Требует внимания к читаемости текста поверх: градиентная подложка, а не полупрозрачный чёрный прямоугольник.
Главный риск — производительность: полноэкранное изображение почти всегда становится элементом LCP и требует тщательной оптимизации.
Четыре композиции
Что общего у сильных первых экранов
Независимо от композиции, работающие экраны объединяют три вещи: одна ясная мысль, один визуальный акцент, одно действие. Всё, что добавляется сверх этого, снижает эффект.
Первый экран не должен рассказать всё. Он должен объяснить, зачем читать дальше.
Что должен сообщить первый экран
У первого экрана одна задача: за несколько секунд ответить, куда человек попал и что здесь можно сделать. Это три сообщения — что это за организация или продукт, какую задачу он решает и какое действие доступно сейчас. Всё остальное — красивая съёмка, слоган, анимация — работает только если эти три вопроса уже закрыты.
Самая частая ошибка — слоган вместо описания. «Меняем мир вокруг» не сообщает ничего; «проектируем интерьеры квартир и домов в Москве» сообщает всё. Метафору можно позволить себе тогда, когда марку уже знают.
Технические требования, о которых забывают
- Крупный кадр — почти всегда главный элемент по времени загрузки: адаптивные размеры и приоритет обязательны.
- Соотношение сторон у контейнера: без него вёрстка прыгает, и человек промахивается по кнопке.
- Текст поверх изображения: контраст проверяют на светлом и тёмном кадре, а не на одном.
- Высота: экран, занимающий ровно окно, скрывает, что страница продолжается. Виден край следующего блока — прокрутка начинается сама.
- Мобильный порядок: на телефоне первым идёт текст, а не полноэкранная съёмка.
Что в итоге
Типовая схема первого экрана безопасна и неразличима. Альтернативы существуют, и большинство из них выигрывают ещё и по скорости.
Выбирайте композицию по тому, что у вас сильнее: текст, фотография или композиционная смелость.
Коротко
- Что обязательно должно быть на первом экране?
- Чем занимается организация, какую задачу решает и что можно сделать сейчас. Слоган вместо описания не отвечает ни на один из этих вопросов.
- Нужно ли делать первый экран во всю высоту окна?
- Лучше нет: экран ровно в высоту окна скрывает, что страница продолжается. Видимый край следующего блока начинает прокрутку сам.
Сетка в веб-дизайне
Как выбрать количество колонок, гуттер и поля, когда ломать сетку и почему асимметричная раскладка выглядит дороже симметричной.ДальшеЧитайте также
Посмотреть примеры
Нашли ошибку или неточность в атрибуции? Напишите нам
Обсуждение
Загружаем…