F-паттерн
Это распространённая схема просмотра веб-страницы, при которой взгляд сначала движется по верхней части контента горизонтально, а затем постепенно спускается вниз, возвращаясь к левому краю.
Что в видео-уроке:
В уроке оформляем четвёртый блок лендинга с бесплатными образцами упаковки. Выстраиваем текст и визуал в шахматной композиции, собираем коллаж из нескольких флаконов и тюбиков, вырезаем объекты, добавляем реалистичные тени и продолжаем визуальные приёмы главного экрана.
Чередуем текст и визуал между блоками
Четвёртый блок посвящён бесплатным образцам упаковки. Его структура достаточно простая: крупный заголовок, поясняющий текст, CTA и визуальная композиция из образцов продукции.
Текст размещаем справа, потому что в предыдущих секциях значительная визуальная масса уже находилась с другой стороны. Такое чередование помогает создать динамику и не перегружать одну область страницы.
При просмотре сайта пользователь не читает каждый экран строго построчно: взгляд постоянно перемещается между заголовками, изображениями и отдельными смысловыми фрагментами. Поэтому чередование схем «текст — изображение» и «изображение — текст» помогает направлять взгляд и делает длинную страницу легче для восприятия.
Настраиваем текстовую часть
Заголовок «Получите бесплатные образцы и протестируйте нашу упаковку» получается достаточно длинным, поэтому распределяем его примерно на четыре строки и занимаем под текст около половины модульной сетки.
Для пояснения используем более спокойное начертание, чтобы сохранить иерархию относительно крупного заголовка. Если существующий Subtitle слишком выразительный, можно создать дополнительный Regular-вариант.
CTA «Заказать образцы» строим на уже созданной системе кнопок. Повторяющиеся кнопки удобно оформлять через компоненты: конструкция и стилистика сохраняются, а текст внутри экземпляра можно менять под конкретное действие.
Выбираем визуал для блока
Задача изображения — поддержать предложение получить образцы. Простая фотография производства или одного флакона может выглядеть слишком нейтрально и недостаточно связываться с текстом.
При этом не стоит снова показывать только коричневые стеклянные флаконы: это может создать ложное впечатление, будто производитель работает преимущественно с одним видом упаковки.
Поэтому лучше показать несколько разных образцов — пластиковые и стеклянные банки, тюбики и флаконы. Визуал должен демонстрировать разнообразие продукции, но оставаться достаточно чистым, чтобы не перегружать небольшой блок.
Собираем композицию из нескольких изображений
Подходящую фотографию с готовой композицией найти не всегда получается. В таком случае можно собрать собственный коллаж из нескольких источников.
Подбираем объекты разных форм и материалов, проверяем их сочетание и постепенно убираем лишнее. Важно не пытаться использовать все найденные изображения одновременно: каждый новый флакон должен выполнять конкретную композиционную задачу.
Объекты сопоставляем по масштабу и перспективе. Они должны выглядеть так, словно действительно стоят рядом, а не были случайно собраны из разных фотографий.
Если один элемент слишком крупный, яркий или контрастный, он начинает перетягивать внимание. Поэтому размеры корректируем не только относительно реальных пропорций упаковки, но и относительно её визуального веса в общей композиции.
Вырезаем объекты через маску
Для точной обтравки открываем изображение в графическом редакторе через плагин и добавляем маску. Контур удобнее строить инструментом Pen: на прямых участках достаточно обычных точек, а на изгибах формируем плавные кривые.
Необязательно добиваться идеальной точности на уровне каждого пикселя. Главное — получить аккуратный естественный край без заметных выступов исходного фона.
После создания контура превращаем его в выделение и слегка растушёвываем край. Это помогает избежать жёсткой пиксельной границы.
Работать через маску удобнее, чем безвозвратно стирать изображение: при необходимости скрытые участки можно вернуть кистью и затем снова скорректировать.
Добавляем объектам реалистичные тени
После удаления исходного фона объекты могут выглядеть так, будто просто наклеены на белую поверхность или висят в воздухе. Чтобы вернуть им объём, добавляем тени.
Главная задача — визуально поставить упаковку на общую плоскость. Тени не должны быть одинаковыми чёрными пятнами с жёсткими краями. В реальном освещении они различаются по плотности и степени размытия.
Для каждого объекта можно настроить отдельную тень, скорректировать её смещение и прозрачность, а затем дополнительно смягчить через размытие по Гауссу. Через маску и градиент часть тени можно постепенно растворить.
Так отдельные элементы начинают восприниматься как единая предметная композиция.
Сохраняем связь с остальным лендингом
Когда основная композиция готова, возвращаем один из графических приёмов главного экрана — тонкую изогнутую линию.
Важно не повторять её буквально в каждом блоке. Повторение работает лучше, когда элемент появляется периодически и поддерживает ритм страницы, а не превращается в постоянный декоративный шаблон.
В четвёртом блоке линия помогает связать текст об образцах с визуальной частью. Дополнительные ответвления и сложные траектории оказываются лишними, поэтому оставляем более простую форму.
В результате блок продолжает общую систему сайта за счёт знакомых цветов, типографики, кнопок и графических деталей, но сохраняет собственную композицию.
Коллаж должен выглядеть как единая фотография
Качественное коллажирование строится на незаметности монтажа. Пользователь не должен сразу видеть, что композиция собрана из нескольких разных источников.
Для этого важно согласовать масштаб объектов, направление света, положение относительно общей плоскости, цвет и характер теней. Если эти параметры работают вместе, отдельные изображения начинают восприниматься как единая фотография.
Именно поэтому даже сравнительно небольшой блок может потребовать много времени: основная работа заключается не в размещении текста, а в поиске подходящих изображений, их обтравке, компоновке и приведении к единой визуальной системе.
