Коротко. Визуально лендинг — это вертикальная лента из 6-12 экранов прокрутки, на десктопе это примерно 4000-9000 пикселей высоты, на мобильном обычно в 1,5-2 раза больше из-за того, что блоки, которые на широком экране стоят рядом, на телефоне встают друг под другом. Постоянные визуальные элементы — закреплённая шапка с кнопкой заявки, которая остаётся видимой при прокрутке, крупный первый экран с фото или видео на фон, чередование светлых и тёмных или цветных секций для визуального ритма, и один-два «плавающих» элемента — кнопка или виджет чата, которые следуют за прокруткой. Дальше — разбор, как выглядит каждая часть страницы и почему именно так.
Сколько «экранов» в среднем лендинге и что это в пикселях
Экран — условная единица, равная высоте видимой области браузера без прокрутки, на обычном ноутбуке это примерно 800-900 пикселей. Рабочий лендинг под услугу или товар обычно занимает 6-12 таких экранов, то есть 4800-9000 пикселей общей высоты страницы. Меньше 5 экранов — страница физически не вмещает структуру для закрытия возражений (только оффер и форма, без доказательств), больше 14-15 — начинает утомлять прокруткой, и человек уходит раньше, чем добирается до формы внизу. Это ориентир, а не жёсткое правило: промо-страница под рекламную акцию может уместиться в 4-5 экранов, а сложная B2B-услуга — растянуться на 15-16.
Шапка: закреплена почти всегда, и в ней минимум элементов
Верхняя полоса высотой 60-90 пикселей на 90% лендингов сделана «липкой» (sticky) — то есть остаётся видимой вверху экрана при любой прокрутке страницы. Внутри обычно три элемента, не больше: логотип слева, телефон или короткое якорное меню по центру, и кнопка заявки справа — та же самая, что и в первом экране, только в компактном виде. Задача шапки чисто визуальная — дать человеку кнопку действия в любой точке прокрутки, не заставляя возвращаться наверх страницы. У квиз-лендингов и промо-страниц под конкретную акцию шапки часто нет вообще — там и так один сценарий действия на всю страницу.
Первый экран: как расставлены элементы физически
Первый экран почти всегда делится на две зоны при ширине экрана больше 1200 пикселей: слева текстовый блок (заголовок, подзаголовок, список из 3-4 коротких пунктов, кнопка или форма), справа — фото товара, коллаж или видео на фон. На узких экранах текст сверху, изображение под ним. Заголовок набран крупным шрифтом — 36-56 пикселей, заметно крупнее остального текста страницы, потому что это единственный элемент, который точно прочитают все посетители. Фон первого экрана — не белый в 8 случаях из 10: цветная заливка, градиент или полупрозрачное затемнение поверх фотографии, чтобы текст оставался читаемым поверх изображения.
Визуальный ритм ниже: чередование, а не однородность
Блоки со второго по предпоследний визуально не идут одинаково — почти всегда чередуется фон (белый, светло-серый, цветной акцентный) и расположение текста и картинки (то текст слева и иллюстрация справа, то наоборот). Это не эстетическая прихоть, а приём, чтобы страница при беглой прокрутке выглядела как последовательность разных смысловых блоков, а не сплошная простыня текста. Отдельные блоки — карточки с иконками, обычно 3-6 штук в ряд на десктопе и в столбик по одной на мобильном; блоки цифр или статистики о компании, набранные крупным акцентным шрифтом; и блок с фотографиями или логотипами в горизонтальный ряд, часто с прокруткой вбок (каруселью) на узких экранах.
Таблица: как одни и те же блоки выглядят на десктопе и на мобильном
| Элемент | Десктоп | Мобильный |
|---|---|---|
| Общая высота страницы | 4800-9000 px | 8000-16000 px |
| Первый экран | Текст и картинка рядом, в два столбца | Текст сверху, картинка под ним |
| Карточки преимуществ | 3-6 в ряд | По одной в столбик или карусель со свайпом |
| Таблица с ценами или тарифами | Все колонки видны сразу | Горизонтальная прокрутка или карточки вместо таблицы |
| Шапка | Полное меню и кнопка | Логотип, кнопка и значок гамбургер-меню |
Плавающие элементы: кнопка, чат, попап
Кроме шапки на многих лендингах есть отдельная «плавающая» кнопка заявки или звонка — обычно круглая или прямоугольная, закреплена в правом нижнем углу экрана и видна всегда, независимо от прокрутки. Рядом или вместо неё часто стоит виджет онлайн-чата или мессенджера. Третий плавающий элемент — всплывающее окно (попап), которое появляется через 20-40 секунд на странице или при попытке движения мыши к крестику закрытия вкладки (на десктопе это called exit-intent). Визуально попап — это затемнение фона и небольшая карточка по центру с укороченной формой, обычно с более сильным условием, чем в основной форме («скидка 10% за заявку сейчас»), чтобы удержать человека, который уже решил уйти.
Мобильная версия: не уменьшенная копия, а другая раскладка
Больше половины трафика на лендинги в большинстве ниш приходит с телефонов, поэтому мобильная версия — не просто сжатая десктопная, а страница с перестроенной раскладкой. Двухколоночные блоки становятся одноколоночными, из-за чего страница вырастает по высоте почти вдвое при той же самой информации. Таблицы сравнения тарифов на мобильном обычно превращаются либо в горизонтальную прокрутку, либо в отдельные карточки одна под другой. Шрифт заголовков уменьшается пропорционально ширине экрана, но не должен быть меньше 22-24 пикселей — иначе первый экран перестаёт читаться с одного взгляда, а именно это первый экран и должен делать.
Футер: последний блок, который часто недооценивают
Нижняя часть страницы — не просто копирайт и ссылка на политику конфиденциальности. На рабочем лендинге в футере обычно есть: повторная форма заявки или кнопка, карта с адресом (если у бизнеса есть офис или точка), ссылки на соцсети, юридическое название компании и ИНН (это требование закона о рекламе для страниц, куда ведёт платный трафик). Визуально футер почти всегда контрастный — тёмный фон при светлой остальной странице, чтобы обозначить, что это конец страницы, а не ещё один рядовой блок.
Сколько блоков должно быть видно на первом экране без прокрутки?
Обычно один смысловой блок целиком: заголовок, подзаголовок, кнопка или форма. Пытаться уместить больше на первом экране — частая ошибка, из-за которой заголовок мельчает и теряет читаемость.
Обязателен ли попап при попытке уйти со страницы?
Нет, это опциональный инструмент. Он полезен на страницах с высокой стоимостью привлечения трафика, но может раздражать на страницах с и так короткой прокруткой — там человек и не успевает захотеть уйти.
Почему мобильная версия лендинга длиннее десктопной?
Потому что блоки, которые на широком экране стоят в два-три столбца, на узком экране телефона выстраиваются друг под другом в один столбец — тот же контент занимает больше вертикального пространства.
Нужно ли видео на фон первого экрана?
Не обязательно и не всегда работает в плюс — фоновое видео увеличивает вес страницы и может замедлить загрузку на мобильном интернете. Статичное качественное фото чаще даёт похожий визуальный эффект при меньшей нагрузке на скорость.
Зачем нужна закреплённая шапка, если кнопка есть в первом экране?
Чтобы кнопка действия оставалась доступной, когда человек уже прокрутил страницу вниз и не хочет возвращаться наверх. Без sticky-шапки часть готовых оставить заявку посетителей просто не находит кнопку быстро и уходит.
Посмотреть, как визуально устроен ваш текущий лендинг
Разберём раскладку блоков на десктопе и мобильном и покажем, что мешает странице читаться с первого взгляда.