{"id":8499,"title":"vc.ru \u0438\u0449\u0435\u0442 \u0432\u044b\u043f\u0443\u0441\u043a\u0430\u044e\u0449\u0435\u0433\u043e \u043f\u0440\u043e\u0434\u044e\u0441\u0435\u0440\u0430 ","url":"\/redirect?component=advertising&id=8499&url=https:\/\/vc.ru\/team\/314459-vypuskayushchiy-prodyuser-kreativnogo-otdela&placeBit=1&hash=34698330acc58f51615fd71105e84a558eebd5a4f60d32de70f3a794ef4ca846","isPaidAndBannersEnabled":false}
Дизайн
Chipsa

Рождена в Москве для употребления за рубежом: кейс по разработке сайта экспортной русской водки

495 Vodka рождена в Москве. Премиальный напиток, который сделан для зарубежного рынка. 495 – это отсылка к коду города, а слоган Born in Moscow подчеркивает высокий статус продукта.

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

Справились ли мы с этой задачей? Давайте посмотрим — ссылка на сайт.

«Vodka 495 производится и разливается на Брянском водочном заводе, расположенном 350 км к юго-западу от Москвы».

Независимо. От художника

Фирменным стилем проекта занималась Юлия Попова, независимая художница из столицы, которая нарисовала главных героев этикетки. На ней изображен силуэт обычного москвича на фоне узнаваемых московских мест: здания МГУ и старой телевизионной башни. Рядом на столе стоит винтажный телефонный аппарат. Все это создает подсознательную связь с именем бренда.

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

Кейс сайта про альтернативное молоко, который победил в номинации «Лучший дизайн» по версии Tagline Awards 2020-2021 – Ссылка.

Секреты практически идеального проекта

Маша Андреенко, менеджер проекта 495 Vodka, рассказала о том, почему этот проект считает практически идеальным:

Это был мой первый проект сайта про алкогольную продукцию. И вот почему я считаю, что это практически идеальный проект по своим условиям (по крайней мере для меня):

  • Четко составленное ТЗ с описанием функций и требований к сайту, как визуальных так и технических.
  • Красивые и качественные рендеры, фотографии с фотосессии, видео и реальная готовность доснять нужные материалы.
  • Чистовой текст для сайта на старте проекта (соответственно дизайн изначально разрабатывался с его учетом).
  • Интересная и продуманная история.
  • Экологическая политика бренда.

Задача проекта — сделать сайт с уникальным дизайном, который бы ассоциировался с премиальным продуктом российского происхождения, и нес в себе ДНК бренда. Изначальными референсами были longshotfeatures.com, donpaparum.com, bedlamvodka.com.

Дизайнер проекта, Софья Тресковская, отрисовала много дополнительных иллюстраций для сайта, что значительно добавило оригинальности, но увеличило сроки проекта. Изначально клиент поставил жесткие временные рамки, но уже по ходу дела нас посещали новые интересные идеи, требующие дополнительных ресурсов. В итоге мы смогли выиграть время, чтобы сделать проект более продуманным и креативным.

Уложились ли в итоге в сроки? Честно, не совсем. Наступила пандемия, возникли сложности на производстве заказчика, из-за чего он временно приостановил проект. Так у нас появился буфер на доведение проекта до идеала. Были трудности в связи с тем, что пришлось сменить дизайнера проекта, но все прошло практически безболезненно (Спасибо, Эмиль!).

Особенности верстки проекта глазами верстальщика

Рома Баранов и его речь.

Первое впечатление от дизайна — WoW! Мне надо это сделать? Сразу возникла мысль, что придется прыгать выше головы и использовать библиотеки, с которыми я еще не работал. Впервые я задействовал Locomotive scroll, GSAP, BarbaJS. Сейчас расскажу об основных трудностях, которые я встретил, и как их решил.

BarbaJS и Locomotive scroll

Barba.js — это небольшая со своими нюансами библиотека, которая помогает создавать плавные переходы между страницами. Barba.js заставляет веб-сайт работать как SPA (Single Page Application) и помогает уменьшить задержку перехода между страницами, минимизировать HTTP-запросы браузера и улучшить пользовательский опыт.

Locomotive Scroll обеспечивает плавную прокрутку с поддержкой эффектов параллакса, переключения классов и запуска обработчика событий, когда элементы находятся в области просмотра. Кастомный скролл считает высоту секции при загрузке страницы, а также пересчитывает на resize и прямой вызов. При переходе между страницами Barba запросом сначала стягивает контент следующей страницы, а потом удаляет контент текущей страницы, из-за чего высота страницы рассчитывается неверно, если ничего не предпринять. Опять же, помимо отзывчивых разработчиков на сайте Barba.js, есть отличная документация, в которой рассмотрен случай взаимодействия с Locomotive scroll.

Также с Locomotive scroll была другая проблема: я использовал относительно новый плагин для GSAP — GreenSock. Он анимирует элементы по скроллу и естественно, если вы используете кастомный скролл, надо обязательно указать параметр scroller (благо у них в документации об этом написано).

Вылет самолёта на главной

То, как вылетает самолет, а следом за ним идет следующая секция другого цвета, вызвало проблемы. Если анимацию привязать на скролл, то виден переход секции с белым фоном на секцию с черным. Идея дизайнера заключалось в том, что стык секций не должен быть виден, контент должен появляться на белом облаке. Я хотел это сделать за счет того, что облако перекрывает стык белого цвета, как и следующая белая секция. Если сделать так, что она выплывает после того, как облако заполнит весь экран и не будет видно перехода, то будет затяжной момент, когда пользователь видит на экране только это белое облако без контента, что по моему мнению не очень хорошо. По итогу мы нарисовали облака на стыке блоков, благодаря чему скрыли ровный стык и сделали переход интересней.

Просадки fps

Главной проблемой, из-за которой я был готов отказаться от кастомного скролла в начале проекта — просадки fps. В первое время он был в районе 15-18. Со временем я смог поднять показатели до ~ 30, что было более-менее приемлемо, но все равно недостаточно. В конечном итоге на все анимируемые элементы, которые в основном крутятся или двигаются, я повесил свойство will-change: transform; По итогу это дало прирост до 60 фпс с незначительными просадками на больших svg файлах.

Слайдер с бутылками

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

Дерево в футере на главной

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

Проверка возраста пользователя

Когда я поставил на сайт эту проверку, у меня сломались абсолютно все скрипты. В итоге, чтобы нормально расписать логику того, как показать прелоадер, подтверждение возраста и анимацию на странице (чтобы она не проигрывалась до того, как возраст будет подтвержден), пришлось писать в Slack разработчикам плагина. Они, кстати, очень активно отвечают и там, и в разделе Issues на GitHub.

Также нужно было придумать, когда показывать подтверждение, и где хранить информацию о нем. Первая мысль — cookie. Есть только одно "но". В теории одним устройством может пользоваться несколько человек: совершеннолетний пользователь заходит на сайт и подтверждает возраст. Проходит время и на сайт заходит, например, его ребенок — cookie теряют свою актуальность. На некоторых сайтах алкогольных производителей окно подтверждение появляется в принципе при каждом обновлении страницы. Решением было хранить информацию о подтверждении в сессии.

Картины с рамками

Недооцененной проблемой оказались картины с рамками. Естественно, вариант сделать это просто цельной картинкой не рассматривался в принципе, так как в дальнейшем могла возникнуть необходимость поменять их в админке. Сначала я метался между mask и clipPath, потом становился на масках, подготовил их, и вроде бы все было хорошо, пока в один момент я не зашел на сайт с Safari: картины при скролле крутятся, у сафари начинает кружиться голова, и маска бесконечно слетает. Еще на одной из страниц со слайдером первая картина выглядит хорошо, но начинаешь листать слайдер и все опять слетает. В общем стало ясно, что у safari с mask проблемы со свойством transform. Пришлось переделать все на ClipPath. Еще оказалось, что дизайнер видел слайдер иначе: в изначальной реализации просто перелистывали картины, в конечной листается только полотно, рама стоит на месте.

И ещё напоследок две небольшие трудности

1) Проблемы доставила детальная страница бутылки водки: надо было создать эффект будто человек листает слайдер, а не переходит между страницами.

2) На сайте была целая эпопея со шрифтами, сейчас на сайте 6 шрифтов (чегоооо?), в основном каждого по одному начертанию, но все равно сама мысль о наличии такого количества вызывала отторжение, казалось, что это слишком много. После всех аргументов дизайнера сомнений не осталось: это и вправду было наилучшим решением.

Что в итоге?

Сайт мы запустили месяц назад, взяли Special kudos на CSSDA, Honorable mention и mobile excellence на Awwwards.

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

Команда проекта:

Дизайн — Софья Тресковская, Эмиль Измайлов

Фронтенд — Роман Баранов

Бэкенд — Владислав Коробов

Дизайн упаковки — Чеслав Мерк

Иллюстратор — Юлия Попова

Арт-дирекшен — Александр Педченко

Менеджмент — Мария Андреенко

Заходите в наш Instagram, где мы каждую неделю рассказываем о новых дизайн-концепциях, запущенных проектах и других новостях студии.

#сайты #вебдизайн #вебразработка

0
27 комментариев
Популярные
По порядку
Написать комментарий...

Are your 18 years or older?
Это точно так по-английски пишется?
4 в лого, как 1.

1

вроде да

–1

1. Должно быть 'you' вместо 'your'.
2. Также необходимо либо убрать 'years', либо добавить 'old' после 'years'.  

3

Are you over 18?

1

Born in Moscow

производится и разливается на Брянском водочном заводе

Эээээ...

для употребления за рубежом: кейс по разработке сайта экспортной русской водки

495 – это отсылка к коду города

Многие ли за рубежом знают, что 495 — это телефонный код Москвы?

Не уверен, что +7 международный-то поймут.
Тем более, в наше время зумеров, которые по телефону вообще разговаривать боятся.

1

Странное у вас мнение о зумерах конеш))

Ну не должны они прямо знать, что 495 это код города Москвы, это отсылка, которая не должна быть на 100% очевидна. Достаточно намёка.

0
Уполномоченный файл

Лучше намекните им, что 495 - это количество полов.

0

Зумер у тебя женщину увел?)

0

Жалко конечно, что в Microsoft Edge на айфоне лагает, не думал что будет какая-то разница.

1

А какая модель айфона?

0

12 про макс

0

хмхмхмхмххм у меня на 11 не лагает

0

Не призываю что-то чинить, думаю заказчик вообще не вкурсе о существовании Microsoft Edge на iOS, просто сам сегодня узнал о том, что он может показывать неправильно. 

1

Но мы всё равно подумаем, спасибо за обратную связь)

0

Возможно это было не самое удачное определение пользовательского опыта (очевидно)

Просто прокрутках с подёргиваниями, не плавностями как в сафари и некоторые элементы ведут себя не так как задумывалось.

0

BarbaJS чудо как хороша

1
Уполномоченный файл

Всё правильно сделали - чёрные фигуры на этикетке, таки да - black-мать-их-lives-matter. Но почему проигнорированы славные заднеприводные традиции?!
Я щетаю, хотя бы пробки должны быть в палитре LGBT-фрэндли.

–2

Сколько стоит такой сайт? Сколько время ушло на его создание? Подобная цветовая палитра и арт-стиль не ассоциируется с трауром? А у тех стран, для которых это предназначается? Арт svg - 😱 сто процентный черный - 😱 . Только у меня тетка в маске и перевернутой бутылкой, на фоне ковида, унынье вызывает? ред.

0

Зачем кастомный скролл? Чем цсс переходы + intersection observer не устроил? 

0

Что подразумевается под css переходами? Кастомный скролл используется не для анимации в основном, а просто для эстетики, сами же анимации мы контролируем через GSAP и его плагин ScrollTrigger, по мнению разработчика это удобнее и гибче нежели IntersectionObserver

0

Потрачено было около 650 часов времени работы специалистов. Срок зависит от различных факторов — сколько специалистов работают параллельно, есть ли простои в проекте, и т.д. За стоимостью часа и деталями пишите в почту info@chipsa.ru.

В этом проекте мы занимались разработкой сайта, заказчик пришёл к нам уже со стилем. Возможно такие ассоциации и будут, но может быть это наоборот предаст изюминки и оригинальности продукту. 

А что за тётка в маске?

0

В статье картинка иллюстрирующая рамку .. это же скрин сайта? Я просто на сам сайт даже не заходил.

0

Да

0

И вот она у вас с ковидом не ассоциируется? Сайт траурный, если ещё кто-то от ковида умер, то эта картинка только отпугнёт. Мрут в основном взрослые, то есть, ЦА. 

0

Ну мы тут сейчас субъективно только можем обсудить этот вопрос. Пока вы не сказали, не ассоциировалось))

На самом деле стерильное производство имеет под собой обязательное ношение маски, и такое фото говорит именно об этом.

0

Комментарий удален

Народ вы все с состава сбежали? Ни капли объективности.

0

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

0
Читать все 27 комментариев
О прекрасном: графовая аналитика в 3D

Порой Data Scientist’ам приходится иметь дело с графами. Чаще всего это дело не такое уж и сложное, но бывают разногласия, которые начинаются при представлении результатов заказчику данного графа, ведь у каждого своё представлении о прекрасном. Особенно, когда дело касается расположения узлов.

Бакальчук резко ответила на жалобы продавцов Wildberries во время сессии форума "Россия зовет"
На сайтах с эквайрингом от ПСБ появился Yandex Pay

Покупатели с аккаунтом «Яндекса» смогут оплачивать покупки, не вводя данные карты.

И снова Яндекс такси

Не первый год регулярно беру машину в аренду

И вот снова Яндекс веселит

Выполнил за ноябрь план по баллам на золото, а присвоили серебро, при этом поддержка говорит, что все так и должно быть и изменить невозможно

Эксперимент: оформляем банковские карты без бумажных документов

Оформление затянулось, но проект все равно продолжили развивать.

Илон Маск отправил сотрудникам письмо о риске банкротства SpaceX из-за медленного производства двигателей — CNBC Статьи редакции

Компании нужно ускориться, чтобы запускать ракеты минимум раз в две недели в 2022 году, написал Маск.

Минэкономразвития РФ приняло предложения РСПП по совершенствованию рынка интеллектуальной собственности

На актуализации плана дорожной карты ТДК (трансформация делового климата) «Интеллектуальная собственность» в соответствии с пожеланиями бизнес-сообщества настоял первый заместитель председателя правительства Андрей Белоусов.

«Яндекс» попросил ЦБ «принять меры» из-за фальшивого сайта «Яндекс-банка» Статьи редакции

Домен зарегистрировало частное лицо на следующий день после объявления о переименовании «Акрополя».

Онлайн-санаторий для сотрудников: как помочь команде справиться с выгоранием

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

null