Промо-сайт премиального бренда ламината La Moena

Главное о кейсе

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

Для удобства подбора ламината мы сделали:
• калькулятор, который помогает рассчитать количество упаковок ламината в зависимости от площади помещения и вида укладки;
• карточки товаров с демонстрацией ламината в интерьере и детальным описанием характеристик;
• pdf-инструкции по укладке и эксплуатации ламината на разных языках.

Как проект изменил жизнь пользователей

Для удобства подбора ламината мы сделали:
• калькулятор, который помогает рассчитать количество упаковок ламината в зависимости от площади помещения и вида укладки;
• карточки товаров с демонстрацией ламината в интерьере и детальным описанием характеристик;
• pdf-инструкции по укладке и эксплуатации ламината на разных языках.

Бизнес-задача и ее решение

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

Решение:
1. Калькулятор помогает рассчитать необходимое количество упаковок ламината в зависимости от площади помещения и вида укладки.
2. При наведении на карточки товаров появляется демонстрация ламината в интерьере.
3. Детальные страницы товаров содержат полное описание характеристик и pdf-инструкции по укладке и эксплуатации ламината на разных языках.
4. В основе концепции — фирменный паттерн бренда в виде текстуры среза дерева.
5. Сайт пронизывает динамичная текстовая верстка. Акцент сделан на фотоконтенте и типографике, которые подчеркивают богатую историю и премиальность бренда.

Крафт (мастерство), реализация, технические детали

6. За эффектные анимации и интерфейс отвечают следующие плагины:
•locomotive scroll — для кастомного и плавного скролла;
•gsap + gsap ScrollTrigger + locomotive scroll — связка библиотек для реализации сложной анимации, завязанной на скролле, с перерасчетом положений и размеров отдельных элементов страницы;
•Barba.js — для реализации подобия SPA, когда происходит бесшовный переход между страницами без полной перезагрузки;
•gsap — для анимации отдельных элементов;
•Vue.js — для реализации отдельных компонентов.
7. Сайт наполнен анимациями ручной работы, где frontend-разработчик до пикселя вычислял переходы между экранами, положения, размеры и траектории движения каждого элемента.

Скриншоты