Типовые проекты в единой системе карточек. Блок 4

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

Это визуальный разделитель между элементами или смысловыми группами, чаще всего в виде тонкой линии.

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

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

Перед началом работы продолжаем уже заданную систему: переводим блок во Frame, сохраняем расстояние около 150 px до содержимого и завершаем предыдущую тёмную секцию крупными скруглениями по 100 px.

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

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

Рубрикатор не требует такой же визуальной активности, как CTA-кнопки. Поэтому вместо привычных прямоугольных кнопок используем компактные округлые табы со светло-серой заливкой.

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

Ширину каждого таба удобно настроить через Hug contents, чтобы она автоматически зависела от длины названия категории. Высоту при этом можно связать с общим контейнером через Fill container.

Внутренние горизонтальные отступы задаём одинаковыми, а расстояние между табами уменьшаем примерно до 7–10 px. Так рубрикатор остаётся компактным и не отрывается от основного содержимого блока.

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

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

Каждая карточка занимает половину контейнера — шесть колонок из двенадцати. Это позволяет значительно увеличить фотографию и лучше поддержать масштабную стилистику проекта.

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

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

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

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

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

При проектировании нельзя ориентироваться только на идеально короткие значения. Название проекта может стать длиннее, площадь — больше, а тип дома — состоять из нескольких слов.

Поэтому заранее проверяем крайние ситуации и смотрим, как Auto Layout перестраивает блок. Если длинный текст уходит на вторую строку и остальные элементы при этом сохраняют понятную структуру, решение подходит для дальнейшей вёрстки.

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

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

Изображения могут отличаться по погоде, оттенкам и количеству зелени. Сначала подбираем максимально близкие по характеру кадры, а затем при необходимости слегка корректируем Saturation, Exposure, Temperature и Tint прямо в Figma.

Сильная цветокоррекция здесь не нужна. Задача — немного приглушить выбивающиеся жёлтые или зелёные оттенки и добиться ощущения, что все проекты относятся к одной визуальной системе.

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

Лишнюю ветку или другой небольшой объект иногда проще скрыть мягкой градиентной заливкой, чем заниматься сложной обтравкой. Главное, чтобы вмешательство не выглядело заметным и не создавало визуального шума.

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

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

После настройки одной карточки её помещаем во Frame и дублируем. Для общего контейнера используем Auto Layout с режимом Wrap, чтобы карточки автоматически становились по две в ряд и переносились ниже.

Горизонтальное и вертикальное расстояние задаём одинаковым, например 20 px. Теперь новые карточки можно просто дублировать через Ctrl + D — они сами займут нужные позиции без ручного выравнивания.

После списка проектов добавляем действие «Все проекты». Ему необязательно конкурировать с кнопками внутри карточек, поэтому вместо ещё одной крупной залитой или контурной кнопки используем более лёгкую текстовую ссылку с подчёркиванием.

Так действие остаётся заметным, но блок не перегружается дополнительным CTA.

После сборки всего блока некоторые решения ещё могут вызывать сомнения — например, оттенок фона, оформление цены или ссылка «Все проекты». Их можно оставить и вернуться к ним после появления следующих секций.

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

Домашнее задание