Привет, на связи Madebymad! В этой статье мы делимся тем, как сделали айдентику, дизайн и разработку сайта для экзотической метавселенной Gakko. Наш опыт будет интересен как тем, кто запускает или уже запустил NFT-проекты, так и другим digital-агентствам.
Gakko — это мета-франшиза, построенная вокруг фантастической вселенной, по которой на гигантском космическом корабле путешествуют иронично-загадочные тинейджеры. Размах у проекта тоже космический: от построения сообщества и выпуска NFT до дропов мерча и оффлайновых ивентов.
Гакконийцы пришли к нам с проработанным игровым миром, крутым дизайном персонажей, а еще с ворохом идей, — и команда Madebymad упаковала весь этот космос в визуальную коммуникацию и сайт проекта.
Web3-проекты возникают на стыке креатива и коммерции. У них есть важное отличие от обычных стартапов: здесь с самого начала важен перформанс. MVP-подход для подобных проектов не работает, поэтому с первой итерации нужно думать о том, чтобы техническая составляющая и визуальная коммуникация были максимально убедительными.
Еще одно отличие — Web3-проекты почти всегда технически более сложные. Gakko не просто спровоцировал нас использовать скиллы по максимуму, — многое пришлось переосмысливать по ходу, быть максимально гибкими.
У Gakko есть важные принципы, которые повлияли на ход проекта:
Всё везде и сразу. Gakko — очень динамичный проект, во-первых, над ним работает множество креативных супергероев: художников, сторителлеров, дизайнеров самых разных специализаций, и не только. Во-вторых оунеры проекта максимально погружены в процесс и обеспечивают моментальную обратную связь. Всё это приводит к тому, что объем работы экспоненциально меняется с каждой новой вводной.
Вижу цель - не вижу препятствий. Когда вы космо-тинейджер, вас мало волнуют ограничения, в том числе — технологические. Для Madebymad это означало постоянную генерацию нетривиальных решений, которые обеспечат креативный полет гакконийцев в реалиях Земли 2023 года.
Коллаб без границ. Gakko — это сеть, в которой на результат влияет каждый создатель контента. В их числе и Madebymad, — мы получали процент от продаж, что послужило отличной мотивацией в дополнение к профессиональной. Такой горизонтальный подход максимально вовлекает всю команду в работу на результат — с другой стороны, это иногда приводит к слишком горячим дискуссиям и спорам. Нужно уметь грамотно его модерировать.
Мы переосмыслили организацию проекта, — как в процессном плане, так и в техническом. Это позволило нам пройти космическую одиссею на максимальной скорости, уворачиваясь от всех возможных монстров и астероидов.
Последовательность – для слабаков
Gakko родилась как сюжет, который объединил вокруг себя креативных людей, оброс артом и историей. Сторителлинг — смысловое ядро и главное отличие Gakko от других подобных проектов. При этом, понимание коммуникаций оставалось скорее на уровне ощущений и эмоций. Требовалась четкая система координат, по которой мы все — и Madebymad, и команда Gakko, — могли бы синхронизироваться и выстраивать работу. Поэтому в качестве нулевого этапа совместной работы мы собрали команду в рамках онлайн-сессии и свели ощущения и эмоции участников о проекте в единую платформу — brand mood.
Обычно такая платформа формируется в самом начале проекта, — и уже от неё развивается история, создаются арты, проектируется айдентика и прочее. С Gakko вышло иначе: нам нужно было объединить уже готовые разрозненные, яркие наработки и синхронизировать команду. Для этого мы провели фасилитируемую сессию по сценарию, который мы уже использовали с продуктовыми командами стартапов и больших брендов, — подход оказался эффективным и для менее структурированного арт-коллектива.
Мы попросили команду описать короткими тегами мысли и эмоции, которые возникают от Gakko. Первым этапом — в индивидуальном формате мозгового штурма, вторым — коллективно, с питчингом каждой идеи и обсуждением в формулировке «Да, и…». То есть чужие предположения нельзя раскритиковать, — но можно докрутить. При этом, один из участников является только фасилитатором (таким участником стал я).
На выходе мы получили Miro-доску с множеством идей, развилок и вариантов, — далее из этого мы вместе с оунерами проекта выкристаллизовали единую систему координат Gakko. Эту систему — она же и есть brand mood — мы представили всей команде; и в дальнейшем она стала отправной точкой не только для этапов работы с Madebymad, но и для всего генерируемого арта, сторителлинга, звука, мерча, и прочей фактуры проекта.
После того, как мы с Gakko договорились об общем концептуальном понимании, запараллелили три независимых потока: создание айдентики (логотип, принципы композиции, колористики и типографики), UX/UI-дизайн и разработку сайта. Опираясь на brand mood, мы сформировали уже более конкретный мудборд — на его основе разработали лого и заложили концепцию коммуникации, которая затем была воплощена нами в UI сайта.
Параллельно с дизайном мы запустили разработку — благодаря этому техническая часть уже была готова к тому моменту, как были закончены UI-элементы. Дизайнерские решения легли на подготовленный движок. По факту, мы сократили время разработки полноценного продукта вдвое без компромиссов по качеству — за счет воплощения так называемого concurrency из мира программирования в реальном проекте.
Песнь визуала и технологий
Когда Gakko передали нам видео, аудио и изображения, мы поняли, что сайт грозит превратиться в сверхмассивную черную дыру. В космосе пропускная способность интернета ограничивается только скоростью света, — но на земле всё немного иначе. Контент в разрешении 4К весит очень много, и если им наполнен весь сайт — загрузка страниц становится неподъемной.
На первый взгляд, очевидное решение — сжатие медиа. Но если в случае с аудио можно закрыть глаза (и прикрыть уши) на потерю качества, то сжатие визуального контента наносит явный ущерб восприятию. Поэтому нам пришлось искать другие способы.
Идея сделать «интерфейс в интерфейсе» возникла спонтанно на одном из первых звонков с 3D-художником, когда он показал вместо простой сцены модель кабины космического корабля. Использование подставленных видео вместо WebGL расширило наши возможности, но потребовало более детальной проработки сценария — с пользовательской и с технической стороны.
Мы постоянно искали баланс, чтобы сделать сайт одновременно и легким, и вовлекающим. По каждому файлу бились за килобайты, поскольку контента было очень много. Например, вращающаяся сфера на главном экране весит меньше мегабайта, хоть и сделана на альфа-канале. Мы схитрили — показали на ней оси, что позволило сделать фреймрейт минимальным. При этом кажется, как будто она делает полный оборот.
Айдентика и сайт для Gakko позволили франшизе совершить гиперпространственный прыжок. Создатели успешно запустили коллекцию и распродали 5555 айтемов - NFT-образов гакконийцев. Мы дополнительно создали платформу для стейкинга этих NFT с возможностью получения наград. Помимо максимального творческого и технически сложного кейса, работа с Gakko дала нам возможность увидеть, как мета-идеология влияет на процесс разработки и дизайна. Мы нашли правильные решения, чтобы воплотить межгалактический креатив на земных технологиях.
В заключение хотим предложить небольшой чек-лист для тех, кто собирается делать web3-проекты с сильной креативной составляющей.
Кросс-дисциплинарная команда. Чаще всего в процессе выясняется, что технически сложные, необычные проекты требуют решений за рамками непосредственно дизайна. Вместо того, чтобы в спешке подключать и консолидировать дополнительные рабочие единицы, можно сразу обратиться к команде, которая так же уверенно себя чувствует в разработке, как и в визуальной коммуникации.
Бэкграунд и насмотренность. Если вы художник, — ищите тех, кто общается с вами как с художником, на одном языке. Арт-директор с художественным бэкграундом и вкусом сможет сделать для вас гораздо больше, чем обычный UI/UX-дизайнер. Даже если вам нужен просто UI/UX-дизайн.
Опыт в web3. Здесь всё очевидно. Вы не захотите тратить свое время, объясняя, что же именно вы собираетесь запускать.
- Фасилитация и структура. Если у вас нет опыта в создании digital-продукта — не страшно. Команда, которая умеет структурировать сложные творческие команды и фасилитировать креатив, поможет и поддержит.
Web3 открывает возможности, границ которым пока не видно. Это постоянно расширяющаяся вселенная, и мы в Madebymad будем рады поддержать новых пионеров этого космоса.
Если вы хотите поговорить на тему статьи, заказать у нас дизайн / разработку / всё вместе или устроиться в нашу компанию — свяжитесь с нами удобным способом.
Выглядит очень стильно, красавцы)
Впечатляюще 👍