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

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

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

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 — Никита Исаев, Валерий Плаксин

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

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

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

135
41 комментарий

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

34
Ответить

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

Ответить

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

11
Ответить

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

1
Ответить

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

2
Ответить

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

18
Ответить

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

1
Ответить