Что в видео-уроке:
В уроке разрабатываем третий блок лендинга — каталог с четырьмя видами упаковки. Настраиваем карточки, изображения и характеристики продукции, а затем создаём отдельную стеклянную секцию с табами и навигацией для разных вариантов крышек.
Формируем структуру каталога
Третий блок посвящён продукции компании. В нём необходимо показать четыре основные категории упаковки и отдельно представить варианты крышек.
Блок делаем тёмным, продолжая чередование светлых и тёмных секций. Заголовок «Наша продукция» располагаем по центру, сохраняя симметричную композицию. От верхней границы оставляем около 100 px.
Для четырёх карточек используем сетку из 12 колонок: каждая занимает по три колонки. При контейнере 1440 px ширина карточки получается около 345 px, а расстояние между ними соответствует межколоннику 20 px.
Собираем мастер-компонент карточки
Первую карточку сразу создаём как мастер-компонент. Вместо отдельного Rectangle используем Fill самого Frame — если нужен простой однотонный фон, лишний слой только усложняет структуру.
Скругление сохраняем таким же, как во втором блоке, — около 15 px. Повторение радиусов помогает удерживать единый визуальный язык.
Внутри размещаем название категории и характеристики. Параметры «Объём» и «Материал» лучше оформлять отдельными текстовыми элементами и объединять через Auto Layout. Так структура остаётся гибкой, а значения можно менять независимо друг от друга.
Для подзаголовка увеличиваем размер примерно до 24 px, чтобы он заметно отличался от наборного текста и сохранял иерархию.
Выстраиваем четыре карточки продукции
В каталоге показываем банки, флаконы, тубы и роллоны. Для каждой категории меняются название, диапазон объёмов, материалы и изображение, а общая структура остаётся одинаковой.
После создания мастер-компонента дублируем его и меняем контент в экземплярах. Все карточки объединяем через Auto Layout с расстоянием 20 px — так их проще переставлять и поддерживать единый интервал.
CTA «Заказать» не привязываем к отдельной карточке. Он относится ко всему каталогу, поэтому располагаем отдельно под группой продукции и выравниваем по центру блока.
Для кнопки можно использовать фиксированные ширину и высоту, чтобы её размер не зависел от длины текста и в проекте не появлялось слишком много разновидностей одного элемента.
Приводим изображения к общей системе
Для карточек подбираем изображения разных видов упаковки и стараемся показать объекты полностью, не обрезая их без необходимости. Такой вариант даёт больше воздуха и позволяет проще сопоставлять товары между собой.
При этом предметы имеют разные пропорции: банка визуально шире, флакон выше, туба уже. Поэтому одинаковый математический размер не гарантирует одинаковый визуальный вес. Масштаб каждого изображения корректируем оптически.
Для фотографий используем одинаковый светло-серый фон и дополнительно корректируем температуру, экспозицию и при необходимости контраст. Если одно изображение слишком тёплое, уводим его в более холодный оттенок, чтобы четыре карточки воспринимались как единая серия.
Здесь необязательно обтравливать каждый объект. Если фон фотографии можно достаточно точно привести к цвету карточки, цветокоррекция может оказаться быстрее и сохранить нужную чистоту композиции.
Создаём отдельную карточку для крышек
Варианты крышек выносим в отдельную широкую карточку на всю ширину сетки. Она отличается по формату от каталога, поэтому может быть выше остальных карточек, даже если использует те же скругления.
Для неё продолжаем эффект матового стекла с главного экрана. Используем сохранённые стили градиента, Blur, свечения и обводки, а под стеклянную поверхность помещаем крупный круг.
Круг нужен не только для декоративности: он помогает проявить прозрачность стекла и связывает третий блок с геометрией предыдущих экранов.
Переключаем варианты крышек через табы
Одновременно показывать дозаторы, спреи, пипетки и остальные насадки не стоит — получится слишком перегруженная композиция.
Вместо этого используем табы:
- дозатор;
- спрей;
- диск-топ;
- флип-топ;
- вакуумный диспенсер;
- капельница;
- крышка с пипеткой;
- резьбовая крышка.
При выборе таба меняется изображение продукта. Таким образом сохраняется компактная композиция, но пользователь может последовательно посмотреть все варианты.
Неактивные табы оформляем спокойным тёмным цветом, а активный выделяем светло-зелёным. Этот оттенок хорошо связывается с другими небольшими акцентами проекта и при этом не создаёт избытка насыщенного фирменного зелёного.
Показываем крышку вместе с упаковкой
Попытка показать отдельную крышку оказывается не самой выразительной: сама по себе она слишком маленькая и оставляет вокруг много пустого пространства.
Поэтому лучше демонстрировать насадку непосредственно на упаковке. Например, для варианта с пипеткой показываем целый флакон, но располагаем его так, чтобы сама крышка попадала в область стеклянной карточки и становилась главным элементом.
Дополнительно добавляем стрелки влево и вправо. Они усиливают понимание того, что внутри блока можно переключать изображения, даже если основное управление реализовано через табы.
Стрелки создаём как компонент, а второе направление получаем зеркальным отражением. Положение знака внутри круга корректируем оптически: математический центр для асимметричной стрелки не всегда выглядит визуально правильным.
Уравновешиваем композицию блока
При работе важно оценивать не только каждую карточку отдельно, но и весь блок относительно предыдущих секций.
Крупный круг на фоне можно частично вывести за границы стеклянной карточки и расположить по диагонали относительно похожего элемента на другом экране. Это создаёт ритм и помогает уравновесить длинную тёмную секцию.
Если одна сторона блока становится тяжелее из-за крупного изображения продукта, дополнительный круг можно сместить в противоположную сторону и использовать как противовес.
В результате третий экран продолжает уже заданную стилистику: тёмный фон, светлые продуктовые карточки, округлая геометрия, локальные зелёные акценты и стеклянные элементы. При этом сам каталог остаётся максимально читаемым — продукция здесь важнее декоративных эффектов.
