Сегодня мы презентуем проект, которым гордимся и который просто ну очень здорово выглядит. Водка Valenki, встречаем!
Результат Процесс
Композитный сайт для водки Valenki в студию!
Сегодня мы презентуем проект, которым гордимся и который просто ну очень здорово выглядит. Водка Valenki, встречаем!

Задачи

Приятно работать с оформившимися брендами, у которых есть понимание задач. Итак, на входе у нас есть отличный бриф, от которого и пляшем:

  • Нужно разработать промо-сайт для бренда Valenki.
  • Основная цель главной страницы — оригинально и эффектно представить продукт.
  • Сделать ярко и эмоционально, с применением в дизайне русских мотивов в современном прочтении (по стилистике — «глазами иностранца»).

Сайт ориентирован на пользователей из России, стран СНГ и Европы.

Катерина
Екатерина Руководитель проектов

Valenki — это еще один продукт группы компаний «Даймонд». Первый проект, который мы делали для этого заказчика: промо для водки Kasatka.

Дизайн и контент

В этом случае главный этап работы — дизайн (и затем верстка, мы задумали напичкать промо замысловатой анимацией по самое горлышко).

Катерина
Антон Дизайнер

Это одна из самых сложных для верстки главных страниц, которые мы делали. Мы перебрали кучу идей, пока придумывали фишку для сайта — в итоге пришли к тому, что нужно хотя бы частично раскрыть настоящую русскую душу (Real Russian Soul).

Бутылка водки должна была пройти через сибирские морозы, чистейшую воду глубоких скважин, русскую баню и, наконец, упасть на мороз прямо в валенок, который является оригинальной упаковкой. По мере «полета» бутылки по бокам всплывают различные факты о производстве водки, на фоне параллаксятся кубики льда, капли и банная утварь. Бедные верстальщики, вы молодцы!

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

Теперь у нас есть все необходимое, и можно приступать к разработке цельной, оригинальной концепции. Делаем первые варианты.

Демонстрируем, немного дорабатываем. Главная получается очень симпатичной:

На промо будет еще несколько страниц, разрабатываем дизайн для них:

Изначально проект подразумевал, что раздел «О продукте» будет обычной текстовой страницей, однако мы решили и сюда привнести чуточку оригинальности.

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

Время еще одного ответственного этапа: пора оживлять сайт.

Верстка и анимация

На этапе дизайна мы подготовили все необходимые объекты, полупрозрачные текстуры и маски, теперь очередь разработчика — показать свое кун-фу.

Люба
Люба Разработчик и герой проекта

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

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

Большая работа сделана на отлично.

Разработка композитного сайта

1С-Битрикс, на котором сайт работает, недавно презентовал новую технологию: композитный сайт (вот здесь очень красочно, с видео и графиками производительности). Мгновенная загрузка страницы? Ну, мы не против же. Итого — оптимизируем сайт под композит: html-версия страницы сохраняется в html_pages, динамический контент подгружается после загрузки html-ей, в фоновом режиме. Пользователю комфортно, пользователь не ждет по 2-4 секунды, пока страничка загрузится. Рекомендуем.

Результат

Сначала удостоверьтесь, что вам есть 18: valenkivodka.com

Катерина
Екатерина Руководитель проектов

Это была правда большая работа, много ее было на дизайне, еще больше на верстке. Антон ко всему прочему здорово помог в самом начале — показывал сайты с подходящими нам эффектами, смотрели, выбирали, показывали заказчику. Для Любы это была первая верстка с параллаксом, но опытные программисты вовремя давали советы — поэтому все получилось прекрасно.