Что в видео-уроке:
В уроке разрабатываем второй блок лендинга с тремя сферами применения упаковки. Собираем карточки, подбираем изображения, продолжаем стеклянную стилистику главного экрана и настраиваем компоненты, текст, маркеры и расстояния.
Выстраиваем второй блок на основе стилистики главного экрана
Во втором блоке необходимо показать, для каких категорий продукции подходит упаковка производителя: косметических средств, декоративной косметики и парфюмерии.
После разработки первого экрана визуальное направление уже определено, поэтому следующий блок строим на знакомых элементах: округлых формах, фирменных акцентах, стеклянных эффектах и чистой современной подаче.
Начинаем с заголовка блока и трёх карточек по четыре колонки внутри сетки 1440 px. Для заголовка используем ту же гарнитуру, что и на первом экране, но уменьшаем размер примерно до 45 px, чтобы сохранить иерархию.
Собираем базовую карточку
Первую карточку создаём на светлом фоне со скруглением около 15 px. Чтобы отделить белую карточку от белого фона, сначала пробуем тень.
Тень должна соответствовать общей логике освещения. Если источник света находится сверху, естественнее смещать её вниз. При настройке можно использовать простой ориентир: значение Blur примерно в два раза больше смещения по Y, например 5 px и 10 px.
Если граница карточки всё равно теряется, можно добавить очень светлую обводку. Обводка должна быть практически незаметной и только помогать отделить поверхности, а не превращать карточку в контурную плашку.
По мере развития композиции от обводки и выраженной тени можно отказаться, если карточка уже хорошо отделяется за счёт собственного визуального наполнения.
Выстраиваем иерархию в карточках
В карточке располагаем название категории и перечень продукции. Для основного текста используем уже созданные стили, а для новых уровней типографики добавляем отдельные значения.
Расстояния выстраиваем по правилу близости: элементы одного списка находятся ближе друг к другу, а расстояние между смысловыми группами остаётся заметно больше.
Например, между строками списка можно оставить около 8–10 px, а между заголовком и списком — значительно больше. Внешние отступы карточки также должны быть больше внутренних.
Если заголовки карточек имеют разное количество строк, можно выровнять текстовый блок относительно центра заданной области. В данном случае содержание заранее известно и сильно меняться не будет, поэтому такой вариант позволяет сохранить единый ритм трёх карточек.
Подбираем изображения по смыслу
Визуал должен не просто показывать очередные банки и флаконы, а раскрывать назначение упаковки.
Для косметических средств можно использовать изображение крема или флакона в процессе применения, для декоративной косметики — сделать акцент на самом продукте, а для парфюмерии показать флакон духов.
При использовании людей важно контролировать кадрирование. Лицо и особенно глаза автоматически привлекают внимание, поэтому, если главным объектом должна оставаться упаковка, фотографию можно кадрировать так, чтобы продукт занимал более значимую позицию.
Также следим за общей чистотой изображений. Слишком насыщенные и детализированные фотографии создают визуальный шум и начинают спорить между собой.
Добавлям стилистические свойства элементов с главного экрана в карточки второго блока
Чтобы связать второй блок с главным экраном, в карточки добавляем крупную круглую форму. Сначала пробуем фирменный зелёный цвет, но три насыщенных зелёных элемента подряд начинают перегружать композицию.
Вместо этого возвращаемся к уже использованной идее матового стекла. Полупрозрачная тёмная форма, Blur, лёгкая текстура и градиент создают связь с главным экраном, но не добавляют ещё один крупный цветовой акцент.
Так второй блок не копирует первый буквально, но продолжает его визуальный язык.
Ищем решение через варианты
В процессе работы важно не останавливаться на первом приемлемом варианте. Зелёный круг выглядит логично относительно фирменной палитры, но при просмотре всей композиции становится понятно, что цвета слишком много.
После отключения зелёной заливки появляется более спокойный стеклянный вариант. Он усиливает контраст текста, лучше сочетается с фотографиями и воспринимается более презентабельно.
Такие решения часто появляются именно во время перебора. Если элемент формально работает, но композиция всё равно вызывает сомнения, стоит отключать слои, менять цвета, переставлять объекты и сравнивать варианты.
Упрощаем маркеры списка
Первоначально для списка пробуем круглые иконки с галочками. Галочку переводим из обводки в фигуру с заливкой через контекстное меню Outline Stroke и создаём отдельный компонент.
Однако в итоговой карточке такие маркеры получаются слишком тяжёлыми: небольшая площадь насыщенной заливки перетягивает внимание с самого текста.
Поэтому галочки заменяем на маленькие круглые маркеры. Они поддерживают геометрию проекта, но выполняют более спокойную вспомогательную роль.
Для повторяющегося элемента создаём мастер-компонент, чтобы затем менять размер и положение сразу во всех карточках.
Используем компоненты для повторяющихся карточек
Когда первая карточка готова, превращаем её в мастер-компонент и создаём два экземпляра.
В дочерних компонентах меняем тексты и изображения, сохраняя общую конструкцию. Благодаря этому размеры, расстояния, положение маркеров и другие системные параметры можно корректировать один раз в мастере.
Это особенно удобно при финальной настройке: например, уменьшение маркера или изменение его позиции автоматически применяется ко всем трём карточкам.
Мастер-компонент после завершения переносим в отдельную область вместе с остальными компонентами проекта, а на странице оставляем его экземпляры.
Проверяем блок на соответствие общей системе
В финале сравниваем второй блок с главным экраном. Связь между ними создают округлая геометрия, стеклянные поверхности, ограниченное использование зелёных акцентов, единая типографика и повторяющиеся небольшие круглые элементы.
При этом второй экран остаётся светлым и визуально легче первого. Такое чередование позволяет выполнить пожелание заказчика о тёмной стилистике, не превращая всю страницу в сплошной тёмный фон.
После проверки текстового прототипа, изображений и расстояний блок готов. Найденную систему карточек и компонентов можно использовать как основу для следующих частей лендинга.
