{"id":14262,"url":"\/distributions\/14262\/click?bit=1&hash=8ff33b918bfe3f5206b0198c93dd25bdafcdc76b2eaa61d9664863bd76247e56","title":"\u041f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442\u0435 \u041c\u043e\u0441\u043a\u0432\u0435 \u0438\u043d\u043d\u043e\u0432\u0430\u0446\u0438\u044e \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u0434\u043e 1,5 \u043c\u043b\u043d \u0440\u0443\u0431\u043b\u0435\u0439","buttonText":"\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435","imageUuid":"726c984a-5b07-5c75-81f7-6664571134e6"}

Разработка сайта для калифорнийского производителя продуктов на основе каннабиса

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

С чего всё началось

25 февраля нам на Dribbble написал представитель компании Control Pharmacy: поинтересовался, готовы ли мы разработать лэндинг для их продуктов. Ему понравились наши работы в аккаунте и он был довольно хорошо настроен для сотрудничества с российской студией.

К слову у нас на Dribbble около 90% работ — реальные проекты, мы просто формируем портфолио и не вкладываем дополнительные расходы в развитие профиля

Старт проекта

Работы начались с создания сайта-заглушки, пока основной находился в разработке. В качестве главного «героя» мы решили использовать таблетку, которая является первым разработанным продуктом Control.

Таблетка была спроектирована по чертежам, которые отчасти помогли при моделировании. Мы взяли те же пропорции, а вот выдавливание надписи и разрушение оболочки выполняли по референсам, так как этого в чертежах не было.

Про дизайн

Стиль, в котором клиент представлял свой сайт, называется швейцарским. И это не просто стиль - это целая философия в дизайне, которая возникла еще в 20 веке. Ценности этого направления: минимализм, фокус на контенте, простые читабельные шрифты и порционная подача информации. Мы тоже следуем этим ценностям при создании сайтов, наверное поэтому наши работы и приглянулись американскому стартапу.

Пиксельный эффект

Нашему дизайнеру пришла интересная идея, которая, как нам казалось, была проста в реализации и могла выделить проект. Говоря о траве, мы понимаем, что эта тема вызывает множество дискуссий, ограничений, поэтому тут сразу приходит мысль о цензуре. Выводя продукты из пиксельной анимации, мы подчёркиваем тот факт, что каннабис в Америке начинает активнее входить в статус легализованного продукта.

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

Особенности разработки

Не обошлось без нашей любимой технологии WebGL, которая осуществляет пиксельный эффект.

Сноски для маленьких (с википедии)

WebGL - кроссплатформенный API для 3D-графики в браузере.

DOM-элементы - это независящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-, XHTML- и XML-документов, а также изменять содержимое, структуру и оформление таких документов.

Пикселизация

Пикселизация (и депикселизация) реализованы в WebGL. Наша задача состояла в том, чтобы синхронизировать DOM и WebGL. Для этого мы скрываем DOM-элементы (например, изображения, для которых мы применяем этот эффект), и показываем на их месте нарисованную на канвасе аналогичную текстуру, которую можно анимировать как угодно с помощью шейдеров. Чтобы не нагружать сайт мы использовали нативный WebGL, без библиотек. Кому интересно, можете посмотреть реализацию на студийном Codepen.

Маска на упаковке

На экране Products на изображении Control Genetics реализована маска — при ховере «просвечивается» состав продукта. Эффект реализован с помощью CSS (свойство mask-image плюс анимация кастомных свойств для позиционирования маски).

Ховер-эффекты с учетом направления (мыши)

Кнопки на сайте «понимают», с какой стороны на элемент “зашел” курсор мыши и с какой стороны вышел. Об этой технике узнали из статьи на CSS Tricks. Вот ссылка https://css-tricks.com/direction-aware-hover-effects/.

С какими трудностями столкнулись и как их решили

Асинхронное обновление позиций DOM- и WebGL-элементов

Современные браузеры обрабатывают скроллинг вне основного потока, в то время как JS выполняется в основном. Поэтому при скроллинге мы видим «скачки» WebGL-элементов, они не успевают обновлять свои позиции относительного HTML-элементов. Полностью нам это решить не удалось, мы рендерили в Canvas только в момент анимирования (в момент самой пикселизации/депикселизации), в остальное время мы видим обычный HTML-элемент. Таким образом, при скролле нет никаких скачков, есть небольшие проблемы при скроллинге в момент анимации, но это случается довольно редко.

Сайт дня

Сайт получил награды Website of The Day на Awwwards и CSS Design Awards — престижных конкурсах, на которых отбираются лучшие работы со всего мира. Также мы получили Mobile Excellence и Dev Award на всё том же Awwwards.

В российских конкурсах мы к сожалению не можем принять участия с этим сайтом из-за правового статуса продукта.

Какие выводы мы сделали

Мог ли как-то правовой статус продукта или бум его легализации в Америке повлиять на то, что наш проект получил столько зарубежных наград? Мы не знаем. Мы не планировали его как конкурсный, но в итоге получили награду, которой грезили уже не первый год (это мы про SOTD от Awwwards). Возможно всё дело в пиксельном эффекте, который редко встречается на сайтах, но в нашей работе был не только отлично реализован, но и хорошо подошел по тематике. Если у вас есть мысли на счёт формулы успеха данного проекта — милости просим в комментарии.

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

Дизайн — Анастасия Дианова

3D — Никита Исаев, Валерий Плаксин

Веб-разработка — Павел Мажуга, Иван Решетило

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

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

0
41 комментарий
Написать комментарий...
Rudolf Cunningham

Опять дизайн впереди функционала. Типичный веб в 2021.

Ответить
Развернуть ветку
Саша Антипов

Скоро начнут делать по другому. Это сейчас массовое явление вы же знаете!

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

да скоро начнём клепать продающие лендинг пейджи, надоело уже делать эти произведения искусства!

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

Как произведение - сайт клевый, вы топчики - тут вопросов нету.

Проблемы с которыми я столкнулся на сайте:

1) Медленно. Показать коробку - я жду какие-то доли секунды на просмотр эффекта пикселизации. Вроде как и не принципиально, но раздражает.

2) Неочевидно. Я то пришел на сайт, после статьи и знал что я хочу посмотреть, а вот как новый пользователь - ну я должен очень быть замотивирован, чтобы все это изучать. Я так понимаю это больше имиджевый сайт, поэтому конверсию от него никто и не требует.

3) Шумно. После нескольких минут на сайте - вентиляторы зашумели. WebGL в действии )

Ответить
Развернуть ветку
Саша Антипов

Хотел бы посмотреть, ожидаю от вас информации когда всё свершится.

Ответить
Развернуть ветку
Альберт Базалеев

Увидел статью, посмотрел другие публикации студии. Вижу, что все у вас по-взрослому, смело работаете с WebGL. Это уровень. Выносите вычисления в отдельные воркеры - мало кто до этого додумывается. Короче, молодцы!

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

Спасибо, стараемся)

Ответить
Развернуть ветку
Лилия Пользователь Google

Не все знают, но каннабис - это редко употребляемое название марихуаны)
Это я так, к слову

Ответить
Развернуть ветку
Павел Корчагин

Кто бы мог подумать.

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

Так он же без ТГК, это как безалкогольное пиво

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

не, он еще как с ТГК.
Если это медицинский, например, то на коробке (или наклейка на пачке) всегда указывает количество THC. Есть забористые - 24.5% максимум, что я встречал))
Просто есть с небольшими - 12-17% - процентом.
Ну, а рекреационная так вообще под 27-28%.

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

Конкретно тут - 100% CBD. То бишь ТГК фри)

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

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

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

Не отчаивайтесь, всему своё время

Ответить
Развернуть ветку
Антон Большаков

Это тот случай, когда нужно с заказчика брать не деньгами ))

Ответить
Развернуть ветку
Михаил Швец

Интересный у вас заказчик. Видимо хорошо у них дела раз есть деньги на классный сайт.

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

Работать с зарубежными клиентами всегда интересный опыт. Обычно это минимум правок и максимум положительных слов и эмоций от проделанной нами работы :)

Ответить
Развернуть ветку
Алексей Антонович

Очень классная реализация, спасибо за статью

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

Спасибо за столь приятный комментарий :)

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

Доставка международная есть?

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

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

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

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

Но я не понял метафору с пикселизацией: мне это показалось просто более оригинальным решением экрана уточнения возраста.
Как вы создавали этот эффект? Вы целенаправленно стремились донести эту идею, про легализацию, через пикселизацию и метафора тут - главная ценность? Или эта идея просто помогла дойти до такого решения?

Я это к тому, что кажется – немного посетителей считают эту идею, а воспримут это просто как интересный эффект.

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

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

Да как обычно идея снизошла до дизайнера из ниоткуда, а смыслы уже потом додумали)

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

ну оочень стильно ❤️

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

<3

Ответить
Развернуть ветку
Belosototsky-Wozniak Victor

Посмотрел как вы делаете - поймал мотивации ) успехов вам ! Вы крутые!

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

Не так давно вас нашёл. Тащусь от ваших работ.

Ответить
Развернуть ветку
Огурец Молодец

Прикольна :3

Ответить
Развернуть ветку
Аккаунт удален

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

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

Прекрасная работа! Браво

Ответить
Развернуть ветку
Лидия Меркулова

Молодец , хорошая статься

Ответить
Развернуть ветку
Аккаунт удален

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

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

ахахаха

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

Круто!

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

Классный кейс и крутой сайт!
Подробно расписали, вместе со ссылками, что не все разработчики делают. Большой "плюс" вам за это💪
Сайт получился очень интересно и живой😀

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

Мы не жадные, мы за коллективное развитие)

Ответить
Развернуть ветку
Егор Парфененко

Получилось хорошо!

А почему решили использовать webGL? Разве нельзя было сделать lottie анимацию?

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

Нам кажется, использование lottie недостаточно гибко в нашем случае. WebGL можно применить к любому элементу и настроить анимацию как угодно. Плюс это производительнее.

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

а коммуникация с клиентов как проходило?
Например ограничивались-ли вы только перепиской или были созвоны?
Как проходил брифинг проекта и итерационная презентация идеи, концепции, финального проекта?
Если были правки, то в какому виде вы получали?

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

Мы показывали именно общением по зуму, и бриф тоже был по зуму, итерационно мы не показывали, сразу показывали итоговый моушен.

Правки пару было устных и пару письменных. Вообще правок было оч мало и они в основном касались размера таблетки и ее текстуры.

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

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

Синька зло

Ответить
Развернуть ветку
38 комментариев
Раскрывать всегда