Как мы строили блокчейн завод. Кейс: Промо-сайт для Web3-агентства

Расскажу, как мы с командой делали сайт для польского агентства web3 разработки. Внутри: Portal 2, отсылки на Матрицу, много анимаций и немного вау-эффекта.

К нам обратились наши партнёры — канадское агентство Маркетика — с задачей разработать промо-лендинг для компании Blocklabs. Блоклабс занимается разработкой в сфере Web3 — запускает крипто-кошельки, промо для NFT и делает прочие технологичные интересности.

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

Придумать что-то новое в сайте для IT достаточно сложно: в сфере уже сложились визуальные и смысловые каноны: в основном темная тема, какие-то 3D-шки, «концептуальные» заголовки… Мы стали думать, как реализовать на нашем сайте и сделать «по-другому», но при этом выдержать типичную для сфере стилистику. В ходе мозгового штурма мы пришли к 3-м концептуальным идеям, которые могли стать основой сайта.

В этой концепции мы хотели выразить Web3 как необъятный и современный мир, в центре которого находится наш бренд — Блоклабс. В этой вселенной он — самая яркая галактика. Каждая звезда и планета в космосе имеет свою сложную структуру — также, как услуги и направления деятельности компании.

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

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

Первая концепция показалась клиенту слишком простой и традиционной для индустрии, а вот варианты 2 и 3 ему понравились. Мы решили объединить их в единый концепт.

После этого мы начали думать, как конкретно выразить блокчейн «в понятных иллюстрациях» и нащупали образ конвейера, по которому едут блоки. Блоки информации. Чтобы сделать сайт более эмоциональным, на сайт также было решено добавить персонажа, который от своего лица будет презентовать Блоклабс пользователю.

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

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

Придумать оригинального героя было не просто, но вдохновившись образами роботов в поп-культуре и видеоигрой Portal 2, мы нашли нашего виртуального проводника.

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

В результате у нас появился динамичный сайт изометричными иллюстрациями и концептуальной анимацией в каждом блоке. Для акцента мы добавили желтое свечение (фирменный цвет блоклбаса) — чтобы передать через него эффект голограммы.

Всем этим мы создаём ощущение соприкосновения с технологиями будущего и помещаем пользователя в атмосферу производства чего-то совершенно нового.

Каждый блок (такая остановка в процессе экскурсии) дополняет рассказ о компании, услугах и преимуществах сотрудничества с Блоклабс.

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

Затем пройтись по коридору из разных цехов — наших услуг.

Увидеть стену, расписанную кейсами и логотипами партнёров бренда.

Вернуться через игровой портал на фабрику и узнать больше про компанию и её процессы.

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

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

После запуска сайт попал в подборку лучших проектов на Тильде.

Посмотреть работающий сайт можно здесь — www.blocklabs.eu

А заказчик вместе с новым сайтом получил существенное пополнение своего фирменного стиля и визуального ДНК бренда.

Егор Митькин — креативная концепция, копирайтинг

Мария Ищенко —креативная концепция, арт-дирекшн

Елена Бобина — креативный директор

Кристина Ткаченко — руководитель проекта

Дмитрий Нестеров — дизайнер

Михаил Ткаченко — вёрстка на Tilda Publishing