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

О проекте

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

Концепция

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

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

Дизайн

Если статичная картинка стакана будет путешествовать по экрану — это будет скучно. Продукт нужно показать во всей красе и со всех сторон, поэтому взяли 3d-модель — и за дело.

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

Третий экран — показательная статистика о производстве «Молочной культуры».

Финальный экран — стакан падает в руку, выводится ключевой посыл про то, что молоко можно и нужно пить не только дома или в офисе. Почему бы не взять удобный стакан с собой?

Верстка и код

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

Чтобы повысить комфорт пользования сайтом — добавили прелоадер. А чтобы пользователь не скучал, ожидая загрузки, сделали прелоадер забавным.

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

Подробнее о процессе разработки читайте в блоге scrum-студии «Сибирикс».