Проект

Руки Вверх Энергетик

Драйв и ностальгия в интерфейсе: 3D‑банка, неоновая типографика и путь на маркетплейс за 3 клика

Как мы спроектировали промо‑сайт для энергетика «Руки Вверх»: интерактивная 3D‑модель, эмоциональный дизайн под две аудитории и бесшовный редирект на Ozon и Wildberries

О проекте:

Полный цикл UX/UI-дизайна промо-сайта для линейки энергетических напитков «Руки Вверх» (без разработки). Включает анализ целевой аудитории (фанаты группы 25–35 лет и молодёжь 18–25 лет), проектирование информационной архитектуры (6 разделов), создание интерактивных прототипов, визуальный стиль с 3D-визуализацией упаковки, неоновой типографикой и световыми эффектами. Разработаны 6 страниц (главная, каталог, детальная карточка, о проекте, галерея, отзывы) с адаптивом под три брейкпоинта.

Результат:

Сайт погружает в эстетику 90‑х в современной обработке: неоновые надписи, полупрозрачные оверлеи, стилизованные «скретчи» и 3D‑банка, которую можно вращать. Пользователь проходит путь «эмоция → знакомство с продуктом → переход на маркетплейс» за 3–4 клика без лишней регистрации. Карточки вкусов с мини-3D-превью, адаптив под мобильные устройства, интерактивные анимации при наведении. Проект реализован за 15 рабочих дней (3 недели) по дорожной карте.

Кейс 1: UI/UX дизайн
Кейс 1. UI/UX: аналитика и UX-проектирование под две аудиторииПроведён анализ двух ключевых сегментов: фанаты группы «Руки Вверх» 25–35 лет (ностальгия, доверие к бренду) и молодёжь 18–25 лет (поиск ярких энергетиков). Изучены промо-сайты конкурентов (Burn, Adrenaline Rush) и сайты с ностальгической эстетикой. Разработана информационная архитектура из 6 разделов, созданы интерактивные вайрфреймы для десктопа и мобильных устройств. Ключевой пользовательский путь спроектирован так: главная → 3D-банка → вкусы → карточка товара → маркетплейс. Число шагов до целевого действия минимизировано до 3–4 кликов.
Кейс 1: UI/UX — визуальный стиль и 3D
Визуальный стиль и 3D-интеграцияРазработана цветовая палитра (чёрный, неоново-жёлтый, малиновый, кислотно-зелёный) и динамичная типографика (жирные гротески с эффектом «неона», пульсация, градиентные обводки). Главный элемент — интерактивная 3D-модель банки (низкополигональная для веба, с вращением по умолчанию и возможностью вращать/приближать мышью). На страницах использованы фоновые видео, полупрозрачные оверлеи, блики и световые эффекты, создающие клубную атмосферу. Стилизация «скретчи» и неоновые надписи вызывают ностальгию по 90‑м, формируя эмоциональную связь с аудиторией.
Кейс 1: UI/UX — адаптив и дорожная карта
Адаптив, редирект на маркетплейсы и дорожная карта 15 днейВсе страницы адаптированы под три брейкпоинта: десктоп (1920px), планшет (768px) и мобильные (375px). На мобильных — упрощённая навигация (гамбургер-меню), сенсорно-удобные кнопки, 3D-модель с уменьшенной детализацией. Главный конверсионный сценарий ведёт напрямую на Ozon и Wildberries — это использует доверие к крупным площадкам и исключает риск брошенной корзины. Дорожная карта: аналитика и референсы (2 дня), UX-проектирование (3 дня), визуальный дизайн ключевых страниц (5 дней), дизайн остальных страниц + адаптив (4 дня), правки и передача (1 день). Итого: 15 рабочих дней (3 недели).

Результат: эмоциональный промо-сайт, который конвертирует в покупку

Клиент получил промо-сайт, который не просто рассказывает о продукте, а погружает в атмосферу «энергии музыки» через неон, 3D и динамику. 3D-визуализация упаковки стала центральным элементом — пользователи могут рассмотреть банку со всех сторон, что повышает доверие и вовлечённость. Двойной редирект на Ozon и Wildberries сокращает путь к покупке, используя привычные платформы. Адаптивный дизайн и чёткая информационная архитектура делают сайт удобным на всех устройствах. Проект задал новый уровень для FMCG-промо: эмоции, технологичность и максимально короткая воронка продаж.
Обширные компетенции

Кейсы проекта

Посмотрите кейсы, реализованные в рамках этого проекта.

Дизайн
Кейс 1. UI/UX: аналитика и UX-проектирование под две аудиторииКейс 1: UI/UX дизайн · Кейс 1: UI/UX — визуальный стиль и 3D · Кейс 1: UI/UX — адаптив и дорожная карта

Оставьте заявку и получите дорожную карту разработки вашего продукта

Получите скидку 50% на SEO аудит

Выберите удобный вариант связи для вас