Farbe: красивый сайт для производителя штукатурок

Сделали сайт для крутого производителя штукатурок, грунтовок и красок марки Farbe.

Задачи

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

2. Увеличить количество заказов, сделанных на сайте.

3. Разработать сайт, который корректно отображается на всех устройствах.

Дизайн

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

Мы сразу поняли, каким будет дизайн. Что будет вау, красота, и в центре — банка с продукцией Farbe. Осталось только правильно эту идею упаковать в макете.

У нас было несколько вариантов промоблока и некоторых внутренних страниц.

Кроме главной, долго и дотошно разрабатывали страницу товара. У Farbe немного товаров, но каждый нужно было презентовать сильно, с фейерверком и оркестром.

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

Варианта было два: или делать более стандартную для ecommerce страницу с блоком «Купить» в верхней части, или же сначала долго рассказывать пользователю, чем хороша продукция, и показывать ему красивые картинки. В итоге сделали оба варианта: галочкой в админке можно вывести тот или иной блок наверх. Теперь смотрим на конверсию.

Заказчик был готов к креативу — и это очень хорошо. Вон, какая 404 страница получилась!

Разработка

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

Следующий наш самый любимый блок на главной — с предложением заказать образцы продукции. Для анимации движения предметов здесь использовали parralax.js. Мы немного доработали его и «научили» не только перемещать предметы вверх и вниз, но и поворачивать их.

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

И, как и планировалось с самого начала, сайт сделали адаптивным. Мы долго и упорно калибровали его, чтобы он хорошо смотрелся и на широкоэкранных мониторах, и на ноутбуках, и на мобилках. Заходите и смотрите.