Что в видео-уроке:
В уроке оформляем шестой блок лендинга о разработке дизайна упаковки. Разбиваем информацию на последовательные шаги, настраиваем Auto Layout и нумерацию, а затем создаём фирменный мокап упаковки с логотипом и продолжаем визуальную стилистику предыдущих блоков.
Выстраиваем структуру блока
Шестой блок рассказывает о разработке дизайна упаковки. В нём много текста, поэтому основная задача — не просто разместить информацию, а превратить её в понятную последовательность.
Блок делаем тёмным, продолжая чередование светлых и тёмных секций. Заголовок и подзаголовок располагаем по центру, а основную информацию смещаем в левую часть, оставляя справа пространство под визуал.
Содержание разбиваем на четыре этапа: подбор или разработка тары, создание дизайна, нанесение изображения на упаковку и декорирование крышки. Так большой текст превращается в последовательный сценарий работы.
Объединяем этапы в одну систему
Каждый шаг состоит из заголовка и при необходимости дополнительных пунктов. Перечисления собираем через Auto Layout и используем небольшие круглые маркеры, уже знакомые по предыдущим блокам.
Между связанными элементами оставляем меньшие внутренние расстояния, а между отдельными этапами — более крупные. Это помогает визуально разделить четыре смысловые группы без дополнительных карточек и плашек.
Для усиления структуры добавляем нумерацию от 1 до 4. Номера помещаем в небольшие круглые элементы с эффектом стекла. Благодаря этому становится сразу понятно, что перед пользователем не просто четыре независимых тезиса, а последовательные шаги.
Настраиваем Auto Layout
Внутри блока используется несколько уровней Auto Layout. Текстовые элементы должны корректно реагировать на изменение ширины контейнера, поэтому для нужных групп используем Fill container вместо фиксированных значений.
Если один из элементов неожиданно переносится или перестаёт растягиваться, проверяем настройки вложенных контейнеров: Fixed на одном уровне может мешать работе Fill container на другом.
Необязательно заставлять контент строго совпадать с каждой колонкой модульной сетки. Если небольшое смещение помогает сохранить ровный край и понятную группировку, визуальная логика важнее математического совпадения.
Создаём визуал, связанный с содержанием
Поскольку блок рассказывает именно о дизайне упаковки, обычного пустого флакона недостаточно. Визуал должен показывать результат услуги — упаковку с нанесённой айдентикой.
Для этого используем мокап флакона. Его можно адаптировать под текущий проект: изменить цвет отдельных деталей и разместить логотип компании непосредственно на упаковке.
Так изображение перестаёт быть декоративным и начинает иллюстрировать содержание блока.
Работаем с мокапом через Smart Object
PSD-мокап открываем в графическом редакторе через плагин. Сначала определяем, какие слои отвечают за отдельные части упаковки, и меняем цвет нужных элементов на фирменный зелёный.
Для замены исходного дизайна находим Smart Object. Его содержимое открывается отдельно во фронтальном виде, поэтому логотип можно разместить ровно, без ручного искажения перспективы.
Если готового вертикального варианта логотипа нет, графический знак и текстовую часть можно расположить отдельно. После сохранения Smart Object мокап автоматически применяет нужную перспективу и деформацию.
Правки удобнее делать именно внутри Smart Object: перемещать логотип, менять масштаб и выравнивать относительно упаковки. После этого сохраняем весь PSD и проверяем результат в основном макете.
Убираем фон и сохраняем светотень
Если объект мокапа не отделён от фона, можно использовать уже существующую маску слоя. Выделение из неё переносим на нужные элементы и скрываем фон, не создавая контур вручную заново.
При этом важно сохранить слои, отвечающие за свет, блики и тени. Они помогают упаковке оставаться объёмной после удаления исходного фона.
Готовый объект переносим в макет, масштабируем и добавляем сохранённый ранее стиль тени.
Дополняем композицию производством
Чтобы блок рассказывал не только о дизайне, но и сохранял связь с производственной тематикой сайта, на заднем плане добавляем фотографию производства.
Изображение не должно конкурировать с мокапом и текстом. Убираем насыщенность, снижаем визуальную активность и проявляем фотографию через мягкий градиент без заметных границ.
Главный объект остаётся на переднем плане, а производство работает как контекст и заполняет пустое пространство.
Повторяем знакомые элементы без буквального копирования
В композиции снова используем круг и эффект стекла, которые уже появлялись на предыдущих экранах. При этом их положение и масштаб меняются под новую задачу.
Дополнительный небольшой стеклянный «пузырь» помогает уравновесить крупный флакон и заполнить пустое пространство. Здесь декоративный элемент работает не сам по себе, а компенсирует визуальный вес основной картинки.
Также возвращаем тонкую изогнутую линию со стрелкой. В финальном варианте она направляет взгляд от изображения к CTA и помогает связать визуал с кнопкой.
Проверяем равновесие блока
На финальном этапе оцениваем не отдельные элементы, а весь экран целиком. Крупный светлый флакон создаёт значительный визуальный вес, поэтому противоположную часть приходится компенсировать текстом, небольшими графическими объектами и фоновым изображением.
Полный круг рядом с флаконом оказался слишком тяжёлым и создавал лишнюю пустоту, поэтому более компактная форма работает лучше.
После этого остаётся проверить читабельность текста, положение CTA, расстояния сверху и снизу и немного скорректировать границу блока. В результате секция сохраняет стилистику предыдущих экранов, но получает собственную композицию и понятную последовательность действий.
