Главное о кейсе
Эффектный имиджевый сайт укрепляет статус производителя бытовой фольги № 1 в России.
Как проект изменил жизнь пользователей
Сайт презентует 3 бренда бытовой фольги для разной ЦА. Благодаря прозрачному описанию продуктов пользователи могут подобрать подходящий себе бренд фольги.
Бизнес-задача и ее решение
Цель: создать эффектный имиджевый сайт для привлечения бизнес-партнеров и усиления статуса лучшего производителя бытовой фольги в России.
Задачи:
1. Рассказать о разных видах фольги, способах ее применения и преимуществах.
2. Создать привлекательный визуал, соответствующий уровню продукции лидера рынка.
3. Презентовать три бренда компании для разных ЦА.
Решение:
1. Разработаны посадочные страницы для трех брендов компании с разной ЦА:
•«Саяночка» — народный бренд с отсылкой к советским временам;
•«Саянская фольга» — семейный бренд, полюбившийся миллионам покупателей;
•«Sayana» — премиальный бренд с заботой о каждой детали.
Для каждого бренда мы использовали уникальное цветовое кодирование и графические элементы, при этом единый набор компонентов на посадочных страницах делает их частью единой дизайн-концепции.
2. Для раздела с рецептами мы провели масштабную фотосессию и написали инструкции по приготовлению блюд с использованием фольги: 15 рецептов с видео-уроками и сотнями фотографий.
3. Эффектная визуальная графика отражает главные преимущества фольги. Пошаговая анимация содержит четыре этапа жизненного цикла фольги и описывает ее ключевые характеристики: безопасность, надежность, термостойкость, экологичность.
Крафт (мастерство), реализация, технические детали
1. Для анимации загибающегося края фольги на главной странице мы вручную подготовили раскадровку из 40+ кадров.
2. За эффектный интерфейс отвечают следующие плагины и библиотеки:
•locomotive Scroll — для плавного скролла;
•gsap — для поэкранной анимации элементов на сайте;
•select2 — для реализации выпадающих списков (селектов);
•magnific popup — для реализации попапов (всплывающих окон);
•parsley.js — для валидации полей;•swiper — для реализации слайдеров.
Скриншоты