Разрабатываем главный экран и продуктовую композицию. Часть 1

Это готовый файл или шаблон, чаще всего в формате PSD, который позволяет представить объект в реалистичном виде и использовать его как основу для визуала.

Это визуальный приём, имитирующий матовое или прозрачное стекло с помощью полупрозрачных заливок, размытия, бликов, границ и других эффектов.

Это компактный элемент навигации, который скрывает пункты меню и открывает их после взаимодействия пользователя.

В уроке приступаем к дизайну главного экрана сайта производителя упаковки. Настраиваем сетку, хедер, типографику и CTA, подготавливаем изображения продукта через мокапы и плагин Photopea и формируем центральную композицию со слайдером и стеклянными элементами.

Работу начинаем с десктопной версии шириной 1920 px. В рамках проекта используем Full HD как основное рабочее разрешение и создаём Frame с запасом по высоте, чтобы постепенно наращивать страницу.

Для этого проекта выбираем более широкий контейнер — 1440 px вместо привычных 1100 px. Он позволяет использовать больше пространства, но при этом не растягивать весь контент на ширину экрана.

Сетка остаётся 12-колоночной с расстоянием около 20 px между колонками. После настройки её сразу сохраняем как Grid Style, чтобы повторно использовать в проекте.

Из пожеланий заказчика известно, что ему близка тёмная стилистика. При этом весь сайт необязательно делать тёмным, поэтому начинаем именно с тёмного главного экрана, а следующие секции позже можно будет чередовать со светлыми.

В качестве первого фонового оттенка берём тёмный фирменный цвет из логотипа. В дальнейшем его можно дополнительно затемнить, если композиции потребуется больше глубины.

Из нескольких предоставленных версий логотипа выбираем цветную, которая сохраняет достаточную контрастность на выбранном фоне.

В хедере размещаем логотип, телефон, e-mail и две основные кнопки. Для кнопок сразу используем Auto Layout, чтобы удобно управлять внутренними отступами и размерами.

Полное меню также проверяем непосредственно в композиции. При большом количестве длинных пунктов оно начинает перегружать строку даже внутри контейнера 1440 px.

В такой ситуации лучше отказаться от второй строки навигации и убрать пункты в бургер-меню. Для лендинга компактный однострочный хедер будет восприниматься аккуратнее, чем несколько уровней информации.

Логотип сразу превращаем в компонент. Даже если текущий проект одностраничный, это полезная практика работы с повторяющимися элементами. Главный компонент переносим в отдельный Frame, а внутри сайта используем его экземпляр.

Главный заголовок исходно звучит как «Упаковка для косметики и парфюмерии от производителя». Чтобы получить более выразительную композицию, его разделяем на две смысловые части без добавления нового содержания:

• «Упаковка от производителя» — основная мысль;
• «Для косметики и парфюмерии» — уточнение.

Первую часть делаем визуальной доминантой: используем более крупный и выразительный шрифт. Вторую уменьшаем и набираем другой гарнитурой с более спокойным начертанием. Так заголовок не воспринимается как четыре одинаково громкие строки.

Для основного текста выбираем размер около 18 px и увеличиваем значение парамтера Line Height примерно до 130%, чтобы многострочный текст оставался комфортным для чтения.

Основную кнопку «Рассчитать стоимость» выделяем фирменным зелёным цветом.

Внутренние отступы определяем через уже знакомые ориентиры относительно размера шрифта, но не воспринимаем полученные значения как строгую математическую формулу. После расчёта их обязательно проверяем визуально и при необходимости округляем или немного уменьшаем.

При размере текста 18 px горизонтальные отступы получаются ориентировочно около 40–50 px, вертикальные — около 20 px.

На этом этапе точную композицию ещё не фиксируем. Сначала собираем все основные элементы, а затем возвращаемся к расстояниям и выравниванию.

На главном экране обязательно показываем сам продукт — упаковку.

Первоначально можно рассмотреть коллаж из множества банок и флаконов с разноплановостью, но для крупного производителя такое решение рискует стать слишком шумным.

Поэтому выбираем более спокойный вариант: один крупный флакон становится главным объектом, а рядом располагаются небольшие превью других форм упаковки. Визуально это напоминает слайдер, в котором пользователь может переключаться между разными видами продукции.

Так мы одновременно демонстрируем ассортимент и сохраняем один сильный фокусный объект.

Поскольку готовых фотографий продукции заказчика пока нет, используем стандартные формы упаковки из стоков и мокапов.

Подходящие материалы можно искать на Freepik и в специализированных библиотеках мокапов. PSD особенно удобен тем, что часто содержит объект, фон, этикетку, тень и другие элементы на отдельных слоях.

Если Photoshop недоступен, PSD можно открыть через плагин Photopea и получить необходимый объект для дальнейшей работы в Figma.

Для запуска Photopea из Figma сначала выделяем любое растровое изображение, а затем открываем плагин. PSD-файл загружаем уже непосредственно в рабочую область Photopea.

После открытия можно отключить фон, этикетку, исходную тень и другие ненужные слои, оставив чистый флакон. Через сохранение результат передаётся обратно в выбранное изображение в Figma.

Так мы получаем изолированный продукт без необходимости вручную обтравливать объект.

Готовый мокап не всегда автоматически вписывается в новую композицию. Например, на тёмном фоне светлый край бутылки может выглядеть слишком искусственно и перетягивать внимание с текста.

Сначала можно попробовать Inner Shadow непосредственно в Figma. Но если тень начинает нежелательно окрашивать другие части объекта, удобнее вернуться в Photopea.

Там создаём внутреннюю тень, подбираем её оттенок под сам флакон и направление освещения, а при необходимости отделяем эффект в отдельный слой и ограничиваем его маской. Так затемнение можно убрать, например, с дозатора и оставить только на корпусе.

Подобным способом корректируем противоположный край, чтобы объект сохранял объём, но не имел резкой белой границы.

Для дополнительных элементов используем геометрию, которая ассоциативно перекликается с логотипом бренда.

Под главным флаконом появляется крупный зелёный полукруг, а вокруг — небольшие круглые элементы с превью других видов упаковки. Такое повторение формы создаёт дополнительную связь между айдентикой и продуктовой композицией без прямого копирования логотипа.

При этом маленькие элементы не должны конкурировать с главным флаконом. Он остаётся центральной визуальной доминантой, а остальные только поддерживают идею слайдера.

Прямая горизонтальная граница тёмного первого экрана начинает спорить с большим количеством округлых форм.

Поэтому нижнюю часть можно слегка изменить инструментом Pen и сделать мягкой дугой. Важно не превращать её в активную волну: такой характер уже может быть слишком лёгким для серьёзного производителя.

Небольшое плавное скругление продолжает геометрию полукругов, но сохраняет более строгий характер дизайна.

Для небольших элементов слайдера пробуем Glassmorphism. Его собираем из нескольких слоёв:

• полупрозрачной зелёной заливки;
• Blur;
• небольшой тени или свечения;
• лёгкой зернистости;
• радиального блика;
• полупрозрачной градиентной обводки.

Размытие и тень помогают показать разноплановость: чем сильнее размыт объект, тем дальше он может восприниматься относительно основного флакона.

Зернистость используем очень деликатно, чтобы она только добавляла фактуру матового стекла. Радиальные и линейные градиенты создают локальные блики и ощущение объёма.

В результате получаем не просто плоский зелёный круг, а полупрозрачный технологичный элемент, который поддерживает современный характер производителя.

На этапе поиска композиции необязательно сразу привязывать каждый объект к сетке и высчитывать все расстояния.

Сначала определяем основные отношения: где находится текст, какой объект является визуальной доминантой, как устроен условный слайдер и какие формы поддерживают общую стилистику.

После того как композиционная идея работает, возвращаем модульную сетку, проверяем оптический баланс, расстояния и размеры и доводим главный экран до аккуратной системы.

Таким образом, первый экран постепенно получает основной характер проекта: тёмную технологичную базу, фирменные зелёные акценты, крупный продуктовый визуал, мягкую геометрию и умеренные стеклянные эффекты.

Перейти к следующему уроку