Собирать страницу из типовых блоков быстрее, чем рисовать её с нуля: набор секций известен, содержимое подставляется, макет готов за день. Но именно здесь чаще всего получается «лоскутное одеяло» — страница, где каждый блок сам по себе выглядит прилично, а вместе они читаются как набор чужих кусков.
Разница между аккуратной сборкой и лоскутным одеялом — не в таланте, а в дисциплине: единые отступы, повторяющаяся сетка, ограниченный набор элементов. Ниже — правила, по которым мы собираем посадочные страницы, и проверки, которые проходим до передачи макета в вёрстку.
Почему из блоков получается лоскутное одеяло
Готовые блоки берутся из разных источников: часть из библиотеки, часть с понравившихся сайтов, часть нарисована под конкретный текст. У каждого источника своя сетка, свой шаг отступов, своя высота заголовка и свой радиус скругления карточек.
По отдельности эти различия незаметны. На странице они складываются: первый экран живёт на сетке из двенадцати колонок, блок преимуществ — на сетке из десяти, карточки в одном месте со скруглением, в другом с острыми углами, кнопки трёх разных размеров. Посетитель не назовёт причину, но видит несогласованность и меньше доверяет содержимому.
Второй источник разнобоя — попытка развлечь. Когда кажется, что страница скучная, в неё добавляют новый приём: то диагональную секцию, то другой шрифт, то анимацию. Скука обычно означает слабое содержание, и приёмы её не лечат.
Базовый набор блоков посадочной страницы
Порядок блоков воспроизводит порядок вопросов в голове посетителя: что предлагают, про меня ли это, сколько стоит, кому верить, как всё пройдёт, что непонятно, что делать дальше. Блок, который не отвечает ни на один вопрос, со страницы убирается.
| Блок | Задача на странице | Что должно быть внутри | Частая ошибка |
|---|---|---|---|
| Первый экран | Что предлагаем и что сделать | Заголовок по сути, пояснение, одно действие | Слоган без предмета и три кнопки сразу |
| Ситуация клиента | Узнавание | Три-пять формулировок задачи словами клиента | Общие фразы, подходящие любому бизнесу |
| Состав и цена | Ответ на главный вопрос | Что входит, от чего зависит цена | Прайс без объяснения различий |
| Доказательства | Снятие сомнений | Кейсы, отзывы, цифры, логотипы | Отзывы без имени и без предмета работы |
| Порядок работы | Понятность процесса | Шаги с результатом каждого | Шаги про нас, а не про клиента |
| Ответы на вопросы | Снятие возражений | Реальные вопросы из переписки | Придуманные удобные вопросы |
| Призыв к действию | Целевое действие | Короткая форма и понятное обещание | Форма из восьми полей в конце страницы |
Ритм отступов и сетка
Отступы задают ощущение порядка сильнее, чем цвет и шрифт. Правило простое: расстояния берутся из короткого набора значений, а не подбираются на глаз для каждого блока.
- Шаг сетки отступов один на всю страницу, обычно кратный четырём или восьми пикселям.
- Между секциями расстояние одно и то же; разное допустимо только там, где меняется смысловая группа.
- Внутри блока расстояния меньше, чем снаружи, иначе непонятно, где кончается один блок и начинается другой.
- Заголовок ближе к своему тексту, чем к предыдущему абзацу: близость обозначает принадлежность.
- Ширина текстовой колонки ограничена: строка длиннее примерно 75 знаков читается тяжело.
- Сетка колонок одна на все блоки, содержимое выравнивается по её направляющим, а не по краю экрана.
Ограниченный набор карточек и кнопок
Чем меньше на странице разных типов элементов, тем аккуратнее она выглядит и тем дешевле вёрстка. Разумный предел — один тип карточки, два размера кнопки и один способ выделить акцент.
- Карточка одна. Если у кейсов и у услуг разное оформление без смысловой причины, это две сущности вместо одной.
- Кнопок два вида: основная и второстепенная. Третий вид почти всегда означает, что на экране два главных действия.
- Одно акцентное действие на экран. Когда всё выделено, не выделено ничего.
- Иконки из одного набора. Смешение линейных и заливных иконок видно сразу, даже неподготовленному глазу.
- Один радиус скругления и одна тень. Мелочь, которая держит страницу вместе.
Работа с типографикой
Двух начертаний одного шрифта хватает почти для любой посадочной страницы. Размеры берутся из заранее заданной шкалы: заголовок раздела, подзаголовок, основной текст, подпись — и ничего между.
Заголовки блоков одного уровня набираются одним размером и одним весом, где бы они ни стояли. Межстрочное расстояние в основном тексте примерно полтора кегля, в крупных заголовках плотнее. Набор капслоком оставляем коротким подписям: длинная фраза заглавными читается медленнее. Выравнивание текста по левому краю, растягивание по ширине в вебе даёт неровные пробелы.
Разнообразие даёт содержимое, а не приёмы
Страница перестаёт быть монотонной, когда меняется не оформление, а материал: где-то две колонки, где-то крупная цифра, где-то фотография во всю ширину, где-то короткий список. Меняются пропорции и плотность, а сетка, шрифты и цвета остаются прежними.
Хорошая проверка — представить страницу без цвета и картинок. Если она по-прежнему читается и понятно, где главное, разнообразие держится на содержании. Если рассыпается — оформление прикрывало пустые блоки, и лечится это текстом и фактами, а не новым приёмом.
Проверка перед передачей в вёрстку
Эти четыре проверки занимают полчаса и снимают большую часть правок, которые иначе всплывут уже на свёрстанной странице.
- Прищуриться или уменьшить макет до размера миниатюры. Должны читаться структура и главный акцент на каждом экране.
- Измерить отступы между однотипными блоками. Расхождение в несколько пикселей в макете превращается в неопрятную вёрстку.
- Подставить реальные тексты, включая самые длинные заголовки и названия. Макет, нарисованный под фразу из трёх слов, ломается на фразе из десяти.
- Посмотреть в узкой ширине. Порядок блоков при перестроении в одну колонку должен сохранять смысл: подпись не должна оказаться выше картинки, к которой относится.
Отдельно проверяем пустые состояния: что видно, если отзывов пока два, а не восемь, если у услуги нет фотографии, если в блоке кейсов один проект. Такие ситуации возникают в первый же месяц после запуска.
Что передать верстальщику
Аккуратность макета сохраняется в вёрстке, только если правила переданы явно, а не остались в голове дизайнера.
- Шкала отступов и размеров текста списком значений, а не измерениями по макету.
- Сетка: число колонок, поля, поведение на планшете и мобильном.
- Состояния элементов: наведение, нажатие, фокус, отключённая кнопка, ошибка в поле.
- Поведение блоков при длинном и коротком содержимом, пустые состояния.
- Исходные изображения нужного размера и указание, что делать при их отсутствии.
Если нужна помощь
Мы собираем страницы из блоков по единым правилам: одна сетка, одна шкала отступов, ограниченный набор элементов, проверка на реальных текстах. Если нужен макет, который переживёт наполнение и доработки, спроектируем интерфейс и соберём макет страницы.
