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

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

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

Работы начались с создания сайта-заглушки, пока основной находился в разработке. В качестве главного «героя» мы решили использовать таблетку, которая является первым разработанным продуктом 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/.

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

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

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

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

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

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

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

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

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