Задача звучала просто, лендинг для новой марки яиц. Сложность была в ограничениях. У бренда была упаковка и три цвета, а страница получалась длинной, с пользой продукта, ассортиментом из больше чем десяти упаковок, магазинами, отзывами и производителем. Расскажем, как мы растянули маленький фирменный набор на большую страницу, чтобы она не стала однообразной и выдержала рост линейки.
Проект делали для агентства Эврика. Наша часть была в проектировании и дизайне, вёрстку и разработку вело агентство. Поэтому в статье нет кода, а есть решения на уровне макета и передачи в разработку.
Исходные данные
Заказчик крупный производитель куриного яйца, новая марка выходила к молодому городскому покупателю. От бренда у нас было:
упаковка с крупной рукописной надписью;
жёлтый, тёмно-зелёный и светлый бежевый;
силуэт яйца и мазки кисти как графические элементы.
И два требования. Первое, сайт должен разговаривать с горожанином, а не с любителем деревенской эстетики, на которой держится вся категория. Второе, новые виды упаковки должны добавляться без перерисовки.
Роли цвета вместо новых оттенков
Три цвета на длинной странице дают монотонность, если каждому закрепить одну роль. Добавлять новые оттенки мы не стали, это размыло бы бренд. Вместо этого цвета меняются ролями от блока к блоку.
Роли видны на экранах сайта. Цвета замерены пипеткой по макетам, значения приблизительные из-за сжатия картинок.
Блок сайта | Фон | Текст и акцент |
|---|---|---|
Первый экран, ассортимент, отзывы | светлый бежевый, около #F8F6E2 | заголовки тёмно-зелёные, рукописные подписи жёлтые |
Производитель, открытое меню | жёлтый, около #F8B800 | тёмно-зелёный |
Рамки, плашки, кнопки на жёлтом | тёмно-зелёный, около #1B3A2B | светлый текст |
Светлые блоки несут основной объём, жёлтые встают там, где нужно остановить взгляд, на экране о производителе и в меню. Тёмно-зелёный держит рамки, плашки и кнопки на жёлтом фоне, а на светлом кнопка становится жёлтой. Палитра остаётся той же, что на полке, а страница не сливается в одно полотно.
Два шрифта, два голоса
Пара шрифтов работает на контрасте. Рукописный Sunless Day отвечает за имя бренда и эмоциональные фразы, узкий плотный Roboto Flex в верхнем регистре за смысловые заголовки. Разнообразие страницы держится на том, как эти два голоса сменяют друг друга, а не на количестве начертаний.
Фотография как отправная точка
Весь визуальный ряд строился от фотостиля. Вместо полей и куриц люди в городе: бег, зарядка, перекус в парке. Сначала собрали набор кадров, потом под их настроение подбирали фоны блоков и размещение текста. Кадры стоят в карточках со скруглёнными углами на цветном фоне.
Карточка упаковки как единица масштабирования
Требование «новые упаковки без перерисовки» решалось одной карточкой. Каждая позиция описывается одним набором полей, и макет рассчитан на то, что меняются данные, а не вёрстка:
Поле | Пример |
|---|---|
Категория | Отборное, Экстра, Первая категория |
Количество в упаковке | 6, 10, 20 штук |
Фото упаковки | обтравка на светлом пятне |
Пищевая ценность | калорийность, белки, жиры, углеводы |
Срок годности и условия | 25 дней |
Цвет и вес яйца | белый, 65–74,9 г |
Новая упаковка это новая запись с теми же полями, сетка ассортимента от этого не меняется.
Порядок блоков
Структура собрана из вопросов покупателя в том порядке, в котором он их задаёт. Сначала он спрашивает, зачем ему этот продукт, потом какую упаковку взять и где купить, последним, можно ли верить новому имени. На последний вопрос отвечают два блока, отзывы в вертикальных видео и экран о производителе с картой регионов и объёмом производства. Доверие к незнакомой марке переносится на известную компанию за ней.
Передача в разработку
Разработку вело другое агентство, и это определило, как мы сдавали работу. Статичных макетов для страницы с анимацией мало. Разработчик видит начало и конец, но не видит, как блок появляется. Поэтому поведение страницы мы собрали на мокапах телефона и десктопа, отдельно проверили прелоадер и переходы между блоками, и только после этого отдали проект в вёрстку. Видео этих проверок лежат на странице кейса.
Что вышло и чего мы не знаем
Сайт запущен, у бренда появилась витрина, где о продукте можно узнать больше, чем написано на коробке. Кейс на Dprofile получил отметки «Лучшее» и «Лучший интерфейс».
Цифр по продажам у нас нет. Лендинг не продаёт напрямую, а данные сетей остались у производителя. Поэтому оценивать эту работу через конверсию мы не берёмся.
Что можно забрать
Маленькую палитру на длинной странице спасает смена ролей цвета, а не новые оттенки.
Если бренд будет расти линейкой, проектируйте карточку позиции как запись с полями. Тогда рост не требует нового дизайна.
Когда разработку ведёт другая команда, отдавайте не только макеты, но и прототип поведения. Анимацию словами не описать.
Кейс целиком, с видео прототипов: страница проекта. Макеты одной лентой собраны на Dprofile.
