Любятово

1. Вводная задача от заказчика, проблематика, цели

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

Чтобы учесть требования каждого и при этом не превратить проект в бездушные страницы с типовыми блоками, нужна готовность к экспериментам и открытость к новому. И у нашего заказчика на проекте для «Любятово» они были.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

На старте проекта у заказчика уже был корпоративный сайт, но серьезные изменения в корпоративной структуре потребовали его обновить. Дело в том, что до 2023 года группа компаний «Любятово» входила в концерн «Келлог РУС» — российское представительство компании Kellogg’s, крупнейшего мирового производителя сухих завтраков и печенья. Тех самых, которые мы часто видим в американских фильмах.

Аналитика

В 2023 году компания Kellogg’s ушла из России, как и многие зарубежные бренды, поэтому российскому представительству потребовался собственный сайт: текущая версия была создана по шаблону сайта головной зарубежной компании. Требовался отдельный интернет-проект, чтобы работать на рынке самостоятельно: под своим брендом и по своим правилам.

Теперь 5 ведущих брендов компании — «Любятово», UNICORN, Dinosaurus, Extra и Chocozavr — собрались под единым и очень привычным названием флагманского бренда «Любятово». И о каждом из брендов и его товарах предстояло рассказать на новом сайте.

На аналитике мы изучали не только потребности конечных покупателей и пользователей сайта, но и требования большой группы стейкхолдеров: это генеральный директор, HR-ы, бренд-менеджеры 5 брендов (и у каждого — своя рабочая группа), специалисты по связям с общественностью, менеджеры по продажам. Важно было учесть и интересы производства. И конечно, не забыть про пользователей.

Дизайн главной страницы

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

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

Фишкой альтернативной главной сделали 3D-анимацию высыпающихся хлопьев — самого символичного продукта из линейки брендов «Любятово», который отсылает к тёплым семейным и очень счастливым завтракам. Чтобы создать реалистичную 3D-модель, мы смоделировали отдельно саму упаковку и отдельно хлопья — у каждого элемента настраивались цвета, текстура, фактура и положение.

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

Вёрстка была интересной: много анимированных блоков с интересными переходами друг к другу. Чтобы сделать всё по красоте, использовали Scroll-driven Animations API, которое позволяет создавать CSS анимацию, зависимую от положения скролла на странице. Одна беда — API относительно свежее и пока слабо поддерживается браузерами. Вдохновившись этой технологией, мы создали свою наработку. Именно она помогла нам реализовать большую часть анимаций в вёрстке.

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

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

3. Результаты сотрудничества

Внутренние страницы

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

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

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