{"id":8721,"title":"\u0427\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0437 \u0440\u044b\u0431\u044c\u0435\u0439 \u0447\u0435\u0448\u0443\u0438","url":"\/redirect?component=advertising&id=8721&url=https:\/\/vc.ru\/promo\/316632-odezhda-kotoraya-rastet-vmeste-s-rebenkom-biotoplivo-i-krossovki-iz-chaynogo-griba&placeBit=1&hash=3f7bfd5e764a97a666a0f91fc9e9278a2147bac49abdacebb6449b781d4d5ca0","isPaidAndBannersEnabled":false}
Дизайн
Chipsa

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

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

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

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 комментарий
Популярные
По порядку
Написать комментарий...

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

31

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

0

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

3

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

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

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

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

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

1

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

0

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

9

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

1

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

6

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

1

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

–3

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

16

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

1
Парадный каякер

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

0

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

1

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

4

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

2

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

5

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

2

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

0

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

1

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

1

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

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

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

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

0

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

3

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

1

<3

0

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

1

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

1
Парадный каякер

Прикольна :3

1

Не показывайте РКН

1

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

1

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

1

В закладки 👌📑 whatever it means 🧐

1

ахахаха

0

Круто!

1

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

0

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

1

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

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

0

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

1

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

0

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

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

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

0

Синька зло

0
Читать все 41 комментарий
Мысли создателя FastAPI Себастьяна Рамиреса из интервью Evrone

Себастьян Рамирез — энтузиаст open source, создатель таких популярных инструментов, как FastAPI, Typer и SQLModel. В интервью он поделился мнением о собственных проектах, образовании для разработчиков и собственной популярности в Twitter. Полный текст доступен по ссылке.

Что там с видеорегистраторами: где за них штрафуют, а где — дают скидку на страховку

Регуляторы вновь в деле. На этот раз они могут затронуть видеорегистраторы. Расскажу о ситуации с точки зрения страхового эксперта.

MIKI Yoshihito / Flickr / CC BY 2.0
Омикрон проверит работоспособность стратегии покупки акций на спадах

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

Опыт возврата денег за обучение дизайну у Yakovlevv.com. Тварь я дрожащая или право имею?
Что такое digital nomad виза и как ее получить?

Одним из плюсов жизни цифрового кочевника (digital nomad) является возможность попасть в страны, закрытые для всех туристов во время пандемии. Ещё digital nomad виза, которую иногда также называют визой удаленного работника, дает право проживать и работать в определенной стране на протяжении большого периода времени. В статье мы расскажем о ее…

Сервис «Кухня на районе» отменил бесплатную доставку еды Статьи редакции

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

Российско-швейцарская WayRay представила свой первый прототип электромобиля с AR-остеклением Статьи редакции

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

WayRay Holograktor WayRay
Минэнерго включило в правила для субсидий на зарядные станции медленную зарядку и четыре выхода для электромобилей Статьи редакции

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

Новые гарантии для одиноких родителей

Государственная Дума РФ 9 ноября 2021 года приняла в третьем чтении закон, предоставляющий дополнительные гарантии отдельным категориям работников, имеющих несовершеннолетних дней, и вносящий поправки в Трудовой Кодекс РФ.

Бизнесменам разрешат перевести личные фонды в российские офшоры

Согласно проекту поправок Минэкономразвития РФ к закону "О международных компаниях и международных фондах" министерство планирует разрешить бизнесменам регистрировать в так называемых русских офшорах - специальных административных районах (САР) в Калининграде и Владивостоке - личные фонды и трасты.

null