Креативный прогревающий лендинг с кастомными иллюстрациями и геймдизайном для уникального криптопроекта Dogs Kombat

Вне зависимости от тематики продукта, мы всегда идем от целей бизнеса и ищем оптимальные решения. В этом проекте логлайн был задан самим заказчиком — он хотел создать новый мир, объединив эстетику Mortal Kombat и собак. Такой креативный вызов — мечта для любой команды, но мы, как всегда, начали с аналитики.

1. Провели несколько созвонов с заказчиком, чтобы на 100% погрузиться в концепцию: не просто байт на покупку новой монеты на пресейле, а последовательное вовлечение в продуманную игровую механику с покупкой уникальных персонажей, монетизацией игрового опыта, апгрейдом внутриигровых активов (оружия и инструментов) и даже возможностью продать персонажа как NFT на торговых площадках OpenSea или Rarible.
2. Изучили рынок, чтобы убедиться, что сама идея не имеет прямых аналогов и уникальна для ниши.
3. Зафиксировали общие тенденции в презентации криптопродуктов: прозрачный флоу, визуализация потенциального профита, понятные графики и диаграммы, high-end дизайн, элементы геймификации, понятные тексты, сокращенные до сути. Собрали креативные фишки для вдохновения и, наоборот, неудачные решения, усложняющие пользовательский путь.
4. Определили сегменты целевой аудитории и сформулировали подробные психо-эмоциональные портреты. Учли географические, демографические, социо-экономические, культурные, психографические и поведенческие характеристики, чтобы перенять боли и возражения пользователей и начать мыслить, как они.
5. С фразой «это по работе» всей командой зарубились в Mortal Kombat, чтобы максимально погрузиться в файтинг-вайб, вспомнить мелкие нюансы и детали игры, а потом точно перенести их на сайт, погружая пользователей в увлекательный сеттинг продукта.

Все данные систематизировали в Mind Map и перешли к разработке интерактивного прототипа.

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

Так, в начале идет нарратив о мире и персонажах, объяснение игровой механики, краткий тизер фич и интригующий клиффхэнгер на следующий скролл. Далее — более подробное знакомство с тем «Как это работает»: презентуем героев, знакомим с их возможностями, демонстрируем варианты оружия и инструментов. На этом этапе часть пользователей уже эмоционально вовлечена в сюжет и готова играть — ни слова больше, вот конверсионная кнопка! Для части ЦА все же важно понимать, что такое DK токен и безопасны ли инвестиции — значит, следующими блоками закрываем возражения о надежности сервиса. Рассказываем об игровой монете и ее преимуществах, расписываем токеномику и roadmap, открыто показываем партнеров проекта, авторитетных в мире криптоинвесторов.

Прототип будущего лендинга готов — переходим к текстам. Таск определили так: донести идею проекта до аудитории минимальным количеством текста. ЦА — пользователи, которые привыкли к игровому TOV: интерфейс не перегружен символами, а каждое слово несет прикладную ценность.

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

И да, эстетика Mortal Kombat — это ведь не только про визуал, но и про тексты. Адаптировали культовые фразы из игры, чтобы со старта настроить пользователей на нужный вайб. HELP DOGS KOMBAT WIN! FINISH HIM! FIGHT! Эти сохранившиеся в кэше слова вызывают бессознательный отклик еще до осознанного мыслительного процесса и создают ту самую инстинктивную связь пользователя с продуктом.

Вся команда Ninen — инхаус, поэтому можем параллелить процессы разработки и ускорять этапы.

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

Когда первый драфт был готов, провели тест на фокус-группе. Поняли, какие иллюстрации точно передают темперамент своих героев, а какие нужно доработать. Следующий драфт, еще один тест, презентация заказчику — персонажи утверждены!

«Сделать так, чтобы самим хотелось рассматривать каждый элемент» — примерно с такой установкой мы подошли к трансформации прототипа в дизайн-макет. Хотя стилистика уже была задана иллюстрациями, все равно провели UI-аналитику рынка, чтобы выделить основные визуальные тенденции и отстроиться от попсовых решений.

Анализировали не только сайты в криптотематике, но и в целом современный игровой дизайн:

• какие визуальные языки используют чаще,
• с помощью каких инструментов оживляют интерфейсы,
• какие фичи активнее всего юзают пользователи.

По результатам аналитики собрали дизайн-систему с описанием сенсорных правил и графических принципов сайта и приступили к отрисовке концепций первого экрана.

Получили 4 принципиально разные концепции:

• каждая отражала философию проекта,
• учитывала визуальные предпочтения ЦА,
• отстраивала от стандартных решений в нише, но содержала свои фишки в компоновке, цветографике, визуальных акцентах, стилизации элементов.

Чтобы точно донести логику каждого из четырех дизайн-решений, организовали созвон с командой заказчика и презентовали концепции. С первого раза согласовали стилистику экрана и перешли к отрисовке всей страницы.

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

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

Отдельно нужно сказать об интеграции на сайт узнаваемых элементов из Mortal Kombat. Инспир для логотипа, оформление заголовков в стиле от-блока-к-блоку уменьшающейся полосы здоровья, узнаваемые позы персонажей, визуальные стили, острые фигуры и формы, резкие скошенные линии, шрифт текста в футере — такие мелкие, часто не сразу заметные, детали инстинктивно вызывают прямые ассоциации с культовой игрой, усиливают степень эмоциональной привязки пользователя к проекту и его вовлечения в воронку — превратить свои цифровые активы в чемпионов.

Ииииии наконец FATALITY. Готовы? Мы решили довести соприкосновение сайта с пользователем до абсолюта — добавили фоновую музыку, усиливающуюся в формах, и звуковое сопровождение конверсионных элементов. Так, при наведении на закрытую карточку персонажа можно услышать, как он произносит свое имя (да-да, как в настоящем Mortal Kombat!), а при наведении на кнопку FINISHED! вы действительно услышите знакомый звук.

Frontend-разработчик получил предельно полное ТЗ на верстку — логика, анимация всех элементов, скрытые тексты, дополнительные требования и адаптивная версия первого экрана — и приступил к переводу дизайна в код со строгим Pixel Perfect подходом.

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

Финальный вызов — выдержать тонкий баланс между качеством иллюстраций и производительностью сайта, ведь проект строится по законам Kombat Kontinues с непрерывной активностью. Верстальщик выкрутил свои скиллы на максимум и сделал невозможное: сохранил каждый пиксель Full HD персонажей, при этом сайт загружается буквально за несколько секунд.