Выбор из двух категорий услуг. Блок 2

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

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

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

Для второго экрана используется уже найденный ранее приём с крупными скруглениями верхней части блока. Он помогает уйти от обычного прямоугольного чередования секций и поддерживает характер проекта.

Первый экран при этом нужно немного продлить вниз, чтобы он полностью заходил под следующий блок и между секциями не появлялись пустые полосы. Крупную цифру «5» из главного экрана также можно оптически поставить на границу следующего блока, чтобы сильнее связать две секции.

Главный экран относится к отдельной категории и может иметь более крупные отступы. Для следующих стандартных блоков в рамках курса можно ориентироваться примерно на 100–150 px, в некоторых случаях — до 170 px от границы секции до содержимого.

Если используется крупная типографика и масштабные изображения, расстояния могут увеличиваться примерно до 200–250 px. Но слишком большое контрпространство начинает не объединять элементы, а разрывать композицию. Определив систему в первых блоках, дальше её желательно повторять по всему лендингу.

Для второго блока проверяются светлый, серый и тёмный варианты. Тёмный фон хорошо сочетается с терракотовым акцентом главного экрана и позволяет продолжить проект без банального чередования «тёмный — светлый — тёмный».

Необязательно менять фон в каждой секции. Несколько соседних блоков могут оставаться тёмными, если это поддерживает общую композицию и не создаёт монотонности.

Две карточки имеют одинаковую структуру, поэтому достаточно сначала продумать одну, а затем перенести решение на вторую. Сохраняются скругления около 20 px, которые уже поддерживают более мягкую стилистику проекта.

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

Фотографии, которые рассматривались для главного экрана, можно использовать и дальше по проекту. Для карточек снова примеряются разные современные дома и проверяется, насколько хорошо они показывают каркасное строительство и дома из бруса.

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

Для двух соседних карточек изображения лучше подбирать близкими по атмосфере, насыщенности и визуальному весу. Если одна фотография яркая и контрастная, а другая приглушённая, они начинают спорить.

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

Если терракотовый оттенок уже заметно присутствует в одной части главного экрана и повторяется внутри фотографии следующего блока, элементы можно поменять местами, чтобы цвет не собирался в одну вертикальную линию.

Так акценты начинают двигаться по странице зигзагообразно и появляется более естественный визуальный ритм.

Первоначально рассматривается вариант разместить заголовок и кнопку под изображением, чтобы не затемнять фотографию. Но такая конструкция воспринимается немного разрозненно.

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

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

Градиент должен плавно растворяться в изображении без заметной границы. После настройки одной карточки его свойства можно скопировать на вторую и затем скорректировать под конкретный кадр.

При кадрировании важно учитывать направляющие линии самого изображения. Если архитектура и перспектива визуально ведут взгляд в центр карточки или к тексту, композиция работает лучше.

Изображение можно зеркалить, если после этого его направление начинает поддерживать содержимое. Ошибка возникает тогда, когда дом или перспектива уводят взгляд наружу в пустое пространство и ничто там его не удерживает.

Внутри карточки заголовок и кнопка сначала проверяются в разных положениях: по противоположным краям и как единая компактная группа.

В итоговом варианте более собранно работает связка с небольшим расстоянием между элементами. При этом сохраняется общий принцип: внутренние отступы между связанными объектами меньше расстояния от группы до границ карточки.

Основной терракотовый CTA уже есть на главном экране, поэтому в карточках не хочется повторять такое же количество ярких залитых элементов. Для них лучше подходит более лёгкая контурная кнопка.

В процессе выясняется, что терракотовый текст внутри контура недостаточно контрастен. Поэтому текст оставляется белым, а толщину цветного Stroke немного увеличиваем примерно до 1,5 px. Так линия и текст становятся ближе по визуальному весу, а сама кнопка остаётся второстепенной.

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

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

Перейти к следующему уроку