Что в видео-уроке:
В уроке дорабатываем главный экран сайта производителя упаковки: собираем продуктовый слайдер, корректируем композицию и читаемость, оформляем хедер и фон, а затем приводим макет в порядок с помощью компонентов, стилей и нейминга.
Настраиваем изображения для продуктового слайдера
После первой версии главного экрана дорабатываем мастер-компонент миниатюры: смягчаем градиент, уменьшаем выраженность свечения и оставляем лёгкую зернистость как дополнительную фактуру.
Для разных видов упаковки подбираем полноцветные изображения. Белые флаконы в этой композиции могут конфликтовать с белым текстом, поэтому цветные варианты дают более стабильную читаемость.
Основное изображение помещаем во Frame фиксированной области и привязываем к центру через Constraints. Благодаря этому при изменении размеров контейнера флакон сохраняет своё положение и не растягивается.
В экземплярах компонента меняем только Fill изображения. Такой подход позволяет сохранить одинаковую структуру и быстро подставлять новые флаконы без лишних слоёв.
Выравниваем продуктовую композицию
Четыре вида упаковки проверяем по отдельности: корректируем кадрирование инструментом Crop, масштаб, положение и угол каждого изображения. Главное — чтобы объект уверенно взаимодействовал с круглой формой и не создавал случайных пустот.
Первоначально одинаковый наклон всех бутылок начинает визуально заваливать композицию в одну сторону. Попытки компенсировать это противоположными углами также оказываются слишком активными.
В результате миниатюры выравниваем вертикально, а главный флакон оставляем более динамичным. Это создаёт противовес и делает композицию спокойнее.
Полный круг тоже проверяем как альтернативу полукругу, но он создаёт слишком крупный цветовой акцент. Полукруг сохраняет нужную связь с формами логотипа и меньше конкурирует с продуктом.
Показываем активный элемент слайдера
Миниатюры должны не только демонстрировать ассортимент, но и показывать, какой продукт сейчас открыт.
Вариант с дополнительной шкалой и множеством линий оказывается слишком сложным. Вместо него используем более лёгкий приём — отдельную соединительную линию между активной миниатюрой и основным изображением.
При смене слайда такая линия может появляться возле соответствующего элемента. Решение остаётся понятным, не требует большого количества графики и поддерживает плавную геометрию всей композиции.
Сохраняем читаемость текста
Часть заголовка пересекается с крупным продуктовым изображением, поэтому постоянно проверяем контрастность.
Можно попробовать лёгкую тень, чтобы вывести текст на передний план, но она не должна превращаться в самостоятельный эффект. Дополнительно немного уменьшаем яркость и экспозицию флакона: изображение остаётся читаемым, но перестаёт конкурировать с типографикой.
Так формируется несколько визуальных планов: текст находится впереди, продукт занимает средний план, а фоновые элементы остаются второстепенными.
Основной CTA также делаем компактнее: уменьшаем излишне вытянутые отступы, сохраняем Auto Layout и небольшое скругление. Расстояния проверяем не только математически, но и визуально.
Упрощаем хедер
Контурные кнопки в верхней части начинают слишком сильно дробить пространство. Чтобы уменьшить визуальный шум, убираем Stroke и используем спокойную тёмную заливку.
Контакты объединяем в одну смысловую группу, CTA — в другую. Затем все элементы вместе с логотипом и меню собираем через Auto Layout.
Для ссылок используем фирменный зелёный как небольшой акцент, а иконку бургер-меню оставляем белой: дополнительная зелёная точка здесь уже перегружала бы хедер.
Весь хедер оформляем как компонент и переносим главный экземпляр в отдельный Frame с мастер-компонентами. В текущем лендинге это не критично, но помогает закрепить правильную систему работы для более крупных проектов.
Добавляем фон с намёком на производство
На первом экране уже показан продукт, но важно также подчеркнуть масштаб производителя.
Вместо полноценной фотографии производства добавляем её очень деликатно — как фоновый слой с низкой контрастностью. Изображение обесцвечиваем, а затем проявляем только небольшую область через радиальный градиент.
Так фотография не превращается во второй центр внимания, но добавляет контекст: становится понятно, что речь идёт не просто о дизайне упаковки, а о серьёзном производстве.
Важно следить, чтобы у изображения не появлялись заметные края или границы градиента. Фоновая фотография должна практически растворяться в общей тёмной поверхности.
Проверяем композицию целиком
После завершения всех элементов возвращаемся к общему балансу.
Проверяем положение текстового блока, продукта и фоновой фотографии, сокращаем количество силовых линий и стараемся выстраивать связанные элементы по общим направляющим.
Дополнительные иконки в хедере не добавляем: в композиции уже достаточно деталей, и новые элементы только увеличили бы визуальный шум.
После финальной проверки сверяем первый экран с текстовым прототипом: логотип, меню, контакты, CTA, основной заголовок, поясняющий текст и продуктовый визуал должны присутствовать и оставаться читаемыми.
Создаём стили для дальнейшей работы
Когда первый экран сформирован, начинаем превращать найденные решения в систему.
Цвета распределяем по назначению:
- BG / Dark
- Button / Green
- Text / Green
- Text / White
Для типографики создаём отдельные уровни:
- Header / H1
- Header / H2
- Body / Regular
- Body / Bold
Отдельно сохраняем повторяющиеся эффекты, например тень для продуктовых изображений и настройки стеклянных элементов. Это позволяет в следующих блоках не вспоминать каждый раз значения Blur, Shadow, градиентов и других параметров.
Стили стоит создавать именно для решений, которые действительно будут повторяться. Так автоматизация помогает ускорить работу, а не превращается в дополнительную нагрузку.
Наводим порядок и задаём нейминг
Перед переходом к следующему блоку очищаем структуру макета: удаляем скрытые и тестовые слои, избавляемся от лишней вложенности и объединяем связанные элементы.
Главный экран помещаем в отдельный Frame и задаём понятные названия ключевым группам и элементам, например:
- Block 01
- Header
- Slider
- Btn Cost
- Btn Call
- BG
- Logo
Мастер-компоненты храним отдельно, а внутри самого лендинга используем их экземпляры.
После такой подготовки первый экран становится не просто завершённым визуально, но и технически готовым к продолжению работы. Найденные цвета, типографика, эффекты, компоненты и принципы композиции можно последовательно переносить в следующие блоки лендинга.
