Что в видео-уроке:
В уроке разрабатываем блок дополнительных услуг и впервые активно используем иконки в карточках. Настраиваем композицию, списки и расстояния, подбираем изображения и следим, чтобы все иконки совпадали по стилистике, толщине линий и визуальному весу.
Оформляем новый блок на темном фоне
Новый блок оформляем на чёрном фоне и повторяем крупное скругление 100 px, уже используемое в предыдущих секциях. Верхний блок и фотографию при необходимости продлеваем вниз, чтобы за скруглением не появлялись пустые участки.
Если исходного изображения не хватает по высоте, текстуру можно аккуратно продолжить дублированием части фотографии. Для повторяющихся фактур вроде дерева такой приём способен выглядеть естественно, если между слоями не остаётся заметного стыка.
Внутри блока сохраняем системный отступ около 150 px, а между заголовком и карточками — около 60 px.
Приводим текст в карточках к балансу
В карточках используются заголовки разной длины: «Подберём земельный участок», «Оформим документы на строительство», «Подберём фундамент для строительства». Если один из них заметно выбивается по количеству строк, формулировку можно немного сократить без потери смысла.
Например, «Поможем подобрать земельный участок» превращается в более компактное «Подберём земельный участок». Это позволяет сохранить примерно одинаковый объём карточек и избежать случайного дисбаланса.
При этом все карточки должны иметь одинаковую высоту, поэтому расстояния лучше выстраивать относительно их общих границ, а не только от объёма текста.
Подбираем цвет карточки
На тёмном фоне пробуем несколько вариантов: более тёмные карточки, терракотовую заливку и светлые плашки. Яркая терракотовая карточка создаёт слишком сильный акцент, а тёмные варианты делают секцию монотонной.
Светлая карточка лучше отделяется от общего фона и при этом не нарушает палитру проекта, поскольку светлые поверхности уже встречались в предыдущих блоках.
Внутри сохраняем спокойную типографику, небольшие терракотовые маркеры списка и одинаковые отступы.
Добавляем иконку в качестве акцента
Иконку используем как дополнительный визуальный акцент. Она не должна становиться главным объектом карточки, поэтому размер постепенно уменьшаем примерно до 70 px и дополнительно проверяем визуальный вес относительно текста.
Одинаковый размер Frame ещё не означает, что сами иконки будут восприниматься одинаково. Плотная иконка занимает большую площадь, а более воздушная может казаться меньше — эту разницу нужно компенсировать визуально.
Добавляем изображения и делаем карточки выразительнее
Простая белая карточка выглядит аккуратно, но для данного проекта оказывается слишком пустой. Поэтому пробуем добавить в неё фотографию и соединить её с информационной частью.
Изображения необязательно буквально иллюстрируют конкретную услугу. Смысл услуги передаёт иконка, а фотография работает на общую тему строительства и создаёт настроение: можно показать дом, террасу, деревянные конструкции или интерьер.
Так карточки становятся более выразительными и одновременно продолжают визуальный язык проекта, основанный на крупных фотографиях.
Изображения подбираем разнообразными
Необязательно в каждой карточке показывать целый дом с одинакового ракурса. Можно использовать архитектурные фрагменты, деревянные балки, террасы и интерьерные элементы.
Это помогает избежать повторяемости и показать тему строительства шире. Главное — чтобы фотографии сочетались по характеру и не создавали лишнего визуального шума.
Иконки ищем не только по прямому значению
Для некоторых услуг легко найти прямой образ: документы можно показать через лист или договор, участок — через карту или геометку.
С фундаментом сложнее. В таком случае можно расширять поисковый запрос и переходить к ассоциациям: строительство, геодезия, слои грунта, проектирование, профессиональная работа или подбор решения.
Необязательно буквально изображать каждое действие. Если прямой символ выглядит слишком сложным, лучше выбрать простую и понятную ассоциацию, которая соответствует общей стилистике.
Все иконки должны принадлежать одной системе
При подборе важно смотреть не только на смысл, но и на техническое устройство иконок. Не стоит без необходимости смешивать в одном наборе элементы, построенные через заливку, с контурными.
Даже при похожем внешнем виде у них может отличаться толщина и поведение при дальнейшем редактировании или вёрстке. Лучше заранее выбрать один принцип — например, только контурные или только залитые иконки — и придерживаться его во всём блоке.
Дополнительно проверяем толщину линий, количество деталей и степень скругления. Если одна иконка заметно плотнее остальных, её можно уменьшить и оптически уравновесить.
Карточки продолжают общую систему сайта
В итоговом варианте блок сочетает тёмный фон, светлые карточки, фотографии, терракотовые акценты и аккуратные иконки. При этом используются уже знакомые скругления, типографика и система расстояний.
Следующий блок можно продолжить на том же тёмном фоне, как это уже делалось раньше. Так несколько секций образуют единую композиционную область, а новые элементы появляются внутри уже сформированной визуальной системы.
