Роман Чигирёв

Сделали панорамный промо-сайт для водки «Русский лес»

Для группы компаний «Даймонд» мы делаем уже третий промо, до этого были Valenki и Kasatka, оба успели побывать номинантами конкурсов сайтов и даже завоевать призовые места.

Задачи проекта

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

Анализ и идеи

Название само по себе наталкивает на мысль сделать промо с элементами типичного русского пейзажа. Заказчик вносит свое предложение — горизонтальный сайт в виде «бородинской панорамы», простор и русский дух. Подбираем референсы:

Дальше начинается работа дизайнера: ему предстоит сделать из всего этого цельную картину.

Решение

Быстро набрасываем общую композицию. Здесь и дальше кликайте на картинку, чтобы все рассмотреть:

Каждый квадратный сантиметр работы — это долгий труд дизайнера, можно сказать, что работа на 80% — мэтт-пейнтинг, на 20% — веб-дизайн. Немного рабочего процесса, грубые начальные коллажи:

Концепция постепенно движется к более-менее цельному виду:

Полотно получается 10 000 пикселей в ширину. Идет на рекорд.

По ходу работы Фотошоп пару раз ложился намертво. Дизайнер давал милые названия испорченным макетам. Хорошо, что были резервные копии, о да.

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

Получаем обратную связь, учитываем пожелания заказчика, корректируем картинку:

Добавляем элементы интерфейса, плашки с текстом, всплывающие окна и меню. Макет почти готов.

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

Это наш третий совместный проект с группой компаний «Даймонд», и третий промо водки, который я веду :) В «Русском лесе» очень много работы дизайнеров, каждое деревце кропотливо вырезалось, ретушировалось, монтировалось в сцену.

Сайт не может быть статичной картинкой, поэтому мы будем оживлять макет.

Верстка

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

Какие задачи предстояло решить:

  1. Ужать графику без потерь качества. Картинка была очень «тяжелой», нужно было все оптимизировать (причем не только для десктопа, но и для мобильных устройств).
  2. Сделать эффект параллакса. У нас панорамное фото, с явным разделением на планы — параллакс напрашивается сам собой.
  3. Анимировать мелкие элементы. Это ведь лес на берегу реки, поэтому листья будут падать, а вода течь.

Дарья справляется с задачей на отлично с плюсом.

Дарья разработчик

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

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

Результат

Готовый сайт, с новогодним слоном-логотипом: rusles-vodka.com/ru. Кстати, есть английская версия.


 

Что еще почитать по этой теме

Прототип и ТЗ, или Откуда растут сайты
01 Марта 2016
Отвечаем на вопросы, которые вы стесняетесь задать. Включая популярные «Что это за фигня?» и «Нафига мне эта фигня?»
Агрегация требований. Как и, главное, — зачем
24 Февраля 2016
Если руководитель проекта не торопится писать ТЗ и говорит о какой-то непонятной агрегации требований, возможно, на это есть причины. Не в курсе, что это за агрегация? Листайте вниз.
Долгий путь дизайна
14 Марта 2016
Почему дизайнера нужно слушаться, а идеальный дизайн — только один? Срываем покровы.

У вас есть проект?

Давайте обсудим его. Продумаем. И сделаем!

Заказать клёвый проект
Заявка отправлена
Спасибо, ваша заявка отправлена. Эксперт студии Сибирикс свяжется с вами в ближайшее время для уточнения подробностей.