Бренд «Молочная культура» компании Волосовского района Ленинградской области формирует новую культуру потребления молочных продуктов.
Упаковку Рекпортал уже представлял, сейчас встречаем сайт «Молочной культуры» от scrum-студии «Сибирикс».
Концепция
Центральная концепция сайта выстраивается с акцентом на стакане молока, который пролетает с первого экрана к последнему, попутно проходя через все этапы производства, и оказывается в руках потребителя. На промо-слайдере размещаются кликабельные переключатели-иконки с подсказками.
Каждый продукт, молоко, ряженку, простоквашу, кефир, ацидофилин решено кодировать цветом. Кефир — сиреневый, йогурт — розовый, молоко — голубой. В результате на главном промо-слайдере стаканчики сменяются вместе с плавной сменой фонового цвета. Цвет наследуется и дальше, в каталоге.
Дизайн
Если статичная картинка стакана будет путешествовать по экрану — это будет скучно. Продукт нужно показать во всей красе и со всех сторон, поэтому пришлось взять 3d-модель и поработать.
Следующий экран показывает процесс производства. От заказчика пришли просто великолепные фотографии для рассказа о технологии бережной пастеризации с помощью вот такой схемы:
Третий экран — показательная статистика о производстве «Молочной культуры».
Финальный экран — стакан падает в руку, выводится ключевой посыл про то, что молоко можно и нужно пить не только дома или в офисе. Почему бы не взять удобный стакан с собой?
Верстка и код
Практически все элементы сайта анимированы: от самого стакана до маленького текстового блока с информацией о продукте. Вёрстку старались сделать максимально «жизненной». Например, стаканчик парит с нелинейной скоростью (привет, гравитация!). Всё динамично и гибко, вёрстка адаптируется под разные разрешения.
В формах скрытая антибот-проверка, посетителю не требуется вводить капчу. Карта умеет угадывать местоположение пользователя и подбирать масштаб так, чтобы было видно все точки в городе, где продается «Молочная культура». Там же есть поиск по адресу или станции метро — варианты сразу появляются на карте, как только пользователь начал вводить символы в поле.
Пока разрабатывалась главная страница, у заказчика запустилась рекламная кампания про «стакан с носом», и на 404 решено было использовать брутального мужчину из этой кампании.
Результат: www.dairyculture.ru
Смотрите также
Новый бренд «Молочная культура»
Источник — rekportal.ru
Поделиться мнением можно в нашем ТГ канале