{"id":11244,"title":"\u0420\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f, \u043b\u043e\u043f\u043d\u0435\u0442 \u043b\u0438 \u0440\u044b\u043d\u043e\u043a \u0418\u0422 \r\n ","url":"\/redirect?component=advertising&id=11244&url=https:\/\/vc.ru\/promo\/353949-razbiraemsya-lopnet-li-rynok-it&placeBit=1&hash=d208029863fe4571a57bd41458f0ed509048b262392aaffae456a4ea928923a5","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 комментариев
Популярные
По порядку
Написать комментарий...
Yuri Istomin

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

Ответить
1
Развернуть ветку
Chipsa

вроде да

Ответить
–1
Развернуть ветку
Alena Tikhonova

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

Ответить
3
Развернуть ветку
Evgeniy Kasyanov

Are you over 18?

Ответить
1
Развернуть ветку
Dear Moscow,

Born in Moscow
производится и разливается на Брянском водочном заводе
Эээээ...

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

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

Ответить
1
Развернуть ветку
Chipsa

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

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

Ответить
0
Развернуть ветку
Нужный корабль

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

Ответить
0
Развернуть ветку
Андрей Крамарь

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

Ответить
0
Развернуть ветку
Antsiforov Stanislav

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

Ответить
1
Развернуть ветку
Chipsa

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

Ответить
0
Развернуть ветку
Antsiforov Stanislav

12 про макс

Ответить
0
Развернуть ветку
Chipsa

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

Ответить
0
Развернуть ветку
Antsiforov Stanislav

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

Ответить
1
Развернуть ветку
Chipsa

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

Ответить
0
Развернуть ветку
Antsiforov Stanislav

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

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

Ответить
0
Развернуть ветку
Anton T.

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

Ответить
1
Развернуть ветку
Нужный корабль

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

Ответить
–2
Развернуть ветку
Game Topia

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

Ответить
0
Развернуть ветку
Game Topia

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

Ответить
0
Развернуть ветку
Chipsa

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

Ответить
0
Развернуть ветку
Chipsa

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

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

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

Ответить
0
Развернуть ветку
Game Topia

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

Ответить
0
Развернуть ветку
Chipsa

Да

Ответить
0
Развернуть ветку
Game Topia

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

Ответить
0
Развернуть ветку
Chipsa

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

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

Ответить
0
Развернуть ветку

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

Развернуть ветку
Yaroslaff Chekunov

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

Ответить
0
Развернуть ветку
Yaroslaff Chekunov

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

Ответить
0
Развернуть ветку
Читать все 27 комментариев
Субботний самопиар на vc.ru

Делимся в комментах ссылками на свои проекты и скидками для читателей vc.ru!

Просмотр сетки ордеров
Я не смог найти работу, поэтому создал сервис для поиска стажировок и вакансий для молодых специалистов

Привет! Меня зовут Коля. Я создал сервис «Юниор» для поиска стажировок и вакансия для начинающих специалистов. В этой статье я расскажу, почему это важно и как развиваю сервис.

С днём рождения, NTA!
Я запарился искать цветовые палитры и создал Palitra App

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

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

Как изменился «AliExpress Россия»: рассказывают «старички» маркетплейса.

Ритейл в VR

Retail VR позволяет покупателям размещать 3D-модели продуктов в магазине перед покупкой. Покупатели могут получить доступ к этой визуализации дополненной реальности (AR) через камеры своих смартфонов, чтобы накладывать AR-контент непосредственно в точке продажи покупателей (POS). Компания пространственных данных Matterport усердно работает над…

Биржевой стакан в мобильном приложении БКС Мир инвестиций
null