Сайт «Молочной Культуры»
Проект очень хороший. Пример того, какую политику должен проводить потребительский бренд в отношении покупателей. В нашем случае — пользователей.
Начало
В центре сегодняшнего проекта — особенный продукт, «молоко в стакане с носом». Кроме молока, есть ряженка, простокваша, кефир, йогурт и ацидофилин — особенный, полезный для пищеварения, молочный продукт. Все производится по экологическим стандартам на добротном оборудовании.
Фотографии сделаны на молочном заводе компании, в поселке Сельцо Волосовского района (это в Ленинградской области).
На крышку каждого стакана ставится особая маркировка, о каждом новом поступлении бренд заботливо сообщает в своих соцсетях.
Итак, Оксана, наш директор московского офиса, привозит нам все образцы стаканов в качестве материала:
Концепция
Предлагаем центральную концепцию: стакан молока пролетает с первого экрана к последнему, попутно проходя через все этапы производства.
Концепция главной страницы сайта: стакан проходит через все технологические этапы и оказывается в руках потребителя
Каждый продукт, молоко, ряженку и так далее, мы решили кодировать цветом. Даже провели небольшой социальный опрос: с каким цветом у кого ассоциируется конкретный продукт. Например, выяснили, что кефир для большинства — это сиреневый, а йогурт — розовый. В результате у нас на главном промо-слайдере стаканчики сменяются вместе с плавной сменой фонового цвета. Цвет наследуется и дальше, в каталоге, например.
Алексей
Дизайнер
Переходим к реализации. Каждый экран главной страницы — особенный.
Дизайн
На промослайдере размещаем вот такие кликабельные переключатели-иконки
с подсказками:
с подсказками:
Фишка — цвет подложки наследуется для оформления фирменных элементов сайта
Со стаканами отдельная история. Решаем, что это скучно — если статичная картинка будет путешествовать по экрану. Продукт нужно показать во всей красе и со всех сторон. Берем 3d-модель — и понеслось.
Пришлось вспомнить 3D-пакеты, но в итоге поставили свет, натянули текстуру, настроили сцену и — часы рендеринга на отдельной машине. Модель вращалась вокруг заданной оси, рендерились 2D-изображения. Отобрали в итоге тридцать кадров, ужали каждую картинку до 60 КБ. Кадры пошли на «монтажный стол» к верстальщикам, дальше уже их магия.
Алексей
Дизайнер
Следующий экран показывает процесс производства. От заказчика пришли просто великолепные фотографии, всем бы такие. Рассказываем о технологии бережной пастеризации с помощью вот такой схемы:
На верстке у нас все это еще и двигаться будет, а пока продолжаем делать макеты. Третий экран — используем показательную статистику о производстве «Молочной культуры».
Финальный экран — стакан падает в руку, выводится ключевой посыл про то, что молоко можно и нужно пить не только дома или в офисе. Почему бы не взять удобный стакан с собой?
Всегда приятно работать на проекте, где заказчик готов к новым идеям, это дает простор для творчества. И когда живо участвует в проекте — мы были очень рады, когда нам пришел целый пакет упаковок стаканов. Удобные, даже в руках подержать приятно. И на крышке действительно выводится погода. Пока
мы разрабатывали главную страницу, у заказчика запустилась рекламная кампания про «стакан с носом», и на нашей 404 мы использовали брутального мужчину из этой кампании. Посмотрите обязательно!
мы разрабатывали главную страницу, у заказчика запустилась рекламная кампания про «стакан с носом», и на нашей 404 мы использовали брутального мужчину из этой кампании. Посмотрите обязательно!
Екатерина
Руководитель проекта
Что еще нужно для успешного сайта бренда? Добавляем каталог с цветовым кодированием разделов (цвет наследуется с главного слайдера). Проектируем страницу с нескучным рассказом о компании. Откуда, например, можно узнать, как с «Молочной культурой» связан барон Николай Корф, живший в начале 19-го века.
Рисуем внутренние страницы сайта. Скоро счастливый финал, не переключайте
Тот самый нос в молоке, из рекламной кампании «Молочной культуры». Украшает 404-ю и отпугивает волков от пастбища.
Верстка и код
Практически все элементы анимированы: от самого стакана до маленького текстового блока с информацией о продукте.
Молочная культура — мой любимый проект :) Потому что там много анимации. Для некоторых использовала Animate.css, эта штука сильно облегчает жизнь, над другими пришлось поломать голову. Старалась сделать вёрстку максимально «жизненной». Например, стаканчик парит с нелинейной скоростью (привет, гравитация!). Для создания анимации в каталоге пришлось понаблюдать за реальной кружкой. Всё динамично и гибко, вёрстка адаптируется под разные разрешения. Многие мелкие элементы созданы при помощи масок, что позволяет легко менять их цвет.
Дарья
Разработчик
Для анимации вращения было использовано 30 отдельных кадров. Чтобы они не грузили систему — мы сжали каждый PNG до 60 КБ. Чтобы повысить комфорт пользования сайтом — добавили прелоадер. А чтобы пользователь
не скучал, ожидая загрузки, сделали прелоадер забавным.
не скучал, ожидая загрузки, сделали прелоадер забавным.
Заказчик сразу обозначил нижнюю планку креативности: «если вы предложите стакан, наполняющийся молоком, то мы сразу скажем нет. Поэтому посоветовались с разработчиком, решили, что жующая корова — отличная свежая ассоциация для лоадера на сайте молочной тематики.
Даниил
Дизайнер
Сделать вращение и движение вниз — только с виду простая задача. Например, на экране, где стакан проходит сквозь схематичную систему пастеризации, пришлось порезать картинку на кусочки и настроить отдельно анимацию для них. Аналогично — с финальным кадром.
У нас была куча отрендеренных кадров (30 штук), для каждого из 6 стаканов. Пока лоадер крутится — они подгружаются, затем анимация отрисовывается на canvas. На последнем кадре с рукой целых три слоя: палец, тень от пальца, которая кладется поверх стакана, и сама рука. Объекты заднего и переднего плана движутся с эффектом параллакса автоматически, создавая кинематографичный эффект.
Иван
Руководитель отдела программирования
Другие страницы тоже непростые: иконки анимированы, стаканы движутся
по наведению. Мелочей много, все приятные.
по наведению. Мелочей много, все приятные.
В формах скрытая антибот-проверка, посетителю не требуется вводить капчу. Карта умеет угадывать местоположение пользователя и подбирать масштаб так, чтобы было видно все точки в городе, где продается «Молочная культура». Там же есть поиск по адресу или станции метро — варианты сразу появляются на карте, как только пользователь начал вводить символы в поле.
Евгений
Разработчик
Результат
Один из самых ярких проектов за последнее время, наслаждайтесь: dairyculture.ru