MARS
Задача
MARS - молодой streetwear-бренд, созданный для жары. Чёрный, белый и кроваво-красный, свободный крой, дроп-модель продаж. Бренду нужен был не шаблонный магазин, а цифровая витрина своего уровня: продавать онлайн и передавать характер.
Требования: полный e-commerce с кастомной корзиной и оплатой, лукбук кампейна, две языковые версии, юридическая обвязка - и всё в фирменной эстетике, без намёка на конструктор.
Решение
Написали магазин с нуля на чистом коде. Дизайн собрали на контрасте и жирной типографике, которая работает как графика. Добавили моменты, которые запоминаются: видео с командой в хиро, пиксельный логотип с интерактивом, живые ховеры каталога.
Под капотом - полный цикл покупки: каталог, карточки, корзина, оформление с доставкой СДЭК и оплатой через ЮKassa. Чистой работы - 3 недели с нуля до готового магазина; четвёртая неделя ушла на ожидание доступов кассы от клиента. Магазин стал продолжением бренда, и цифры это подтвердили.
Путь покупателя: весь сайт по шагам
Десять экранов настоящего сайта - от первой секунды загрузки до оплаченного заказа. Всё, что вы видите, написано руками: ни одного шаблонного блока.
Фирменный прелоадер
Сайт открывается с анимации: логотип, фигура в худи и красный прогресс-бар. Загрузка стала частью бренда, а не ожиданием.
Видео-презентация
Первый экран - видео: команда танцует в одежде MARS. Атмосфера бренда бьёт с первой секунды, ни одного слова не нужно.
Пиксельный MARS с интерактивом
Логотип собран из пикселей и реагирует на курсор эффектом шара: точки разбегаются и собираются обратно. Деталь, ради которой возвращаются поиграть.
Каталог с фильтрами
Все, футболки, худи, низ - фильтры в одно касание. Ленты «Лимитированная серия» на карточках подчёркивают дроп-модель: успел или ждёшь следующего.
Карточка товара
Открывается поверх каталога без перезагрузки: фото, размеры, цена, «В корзину». Доставка по России через СДЭК и оплата картой - прямо в карточке.
Кастомная корзина
Выезжающая панель: состав, размер, счётчик количества, подытог. Написана с нуля - никаких платформ, комиссий и чужих логотипов.
Оформление заказа
Курьер СДЭК до двери или пункт выдачи, контакты, комментарий. Оплата МИР, Visa, Mastercard, СБП и SberPay через защищённую ЮKassa - данные карт на сайт не попадают.
Лукбук Campaign
Отдельная страница кампейна SS26: крупные съёмки, ритм чередования кадров, бегущая строка NEW DROP. Мода продаётся картинкой - здесь она главная.
Страница бренда
From Mars: манифест бренда рядом с кадром из съёмки. Короткий честный текст - кто такие, для кого и почему носится жёстко.
Футер и юридика
Гигантский MARS, подписка на рассылку, соцсети, каталог и инфо-раздел: доставка, возврат, оферта, конфиденциальность. Реквизиты ИП - всё по закону.
Адаптив: на любом экране
Магазин свёрстан под телефон, планшет и ПК. Ниже - живые скрины мобильной версии: бегущая строка и пиксельный MARS на главной, каталог с лентами лимитированной серии в две колонки, оформление заказа с СДЭК на весь экран. Характер бренда не теряется даже на маленьком экране.
8 фишек, которые делают разницу
Даже загрузка работает на образ: логотип, худи, красный прогресс.
Живая команда в одежде вместо статичного баннера.
Логотип реагирует на курсор эффектом шара - фирменная игрушка сайта.
Карточки оживают при наведении: вторая съёмка товара без клика.
Свой код: ноль комиссий маркетплейсов и аренды конструктора.
Доставка до двери или в пункт, оплата всеми картами и СБП.
Две языковые версии и поиск по каталогу.
Оферта, возврат, доставка, конфиденциальность - доверие покупателя.
Оптимизированные медиа и код: магазин летает даже на среднем телефоне.
Стек проекта
Как делали: 3 недели работы
- Неделя 1Разбор и дизайн-системаПогружение в бренд, референсы streetwear, ТЗ и смета в договоре. Чёрно-бело-красная система, типографика, макеты ключевых страниц.
- Неделя 1-2Фронтенд и анимацииВёрстка с нуля: прелоадер, видео-хиро, пиксельный интерактив, ховеры каталога. Адаптив под телефон, планшет и ПК.
- Неделя 2-3МагазинКаталог с фильтрами, карточки, кастомная корзина, оформление, интеграция СДЭК, RU/EN, поиск.
- Неделя 3Контент и предзапускЛукбук, страницы бренда и юридики, тесты на устройствах, оптимизация скорости. Сайт готов целиком.
- Неделя 4Касса и запускНеделя ожидания: клиент оформлял доступы ЮKassa. Как только API пришёл - подключили оплату за день и выкатили магазин в бой.
Дизайн-система
Гротеск 900 - заголовки-плакаты
Красный акцент - цифры и действия
Сделано в Тройка Studio
Этот магазин мы спроектировали, отрисовали и написали с нуля - от прелоадера до оплаты. Без конструкторов и шаблонов: интернет-магазины и сайты под ключ - то, что мы делаем каждый день. Хотите магазин уровня бренда - расскажите задачу, ответим в тот же день.
Обсудить свой проект
ТРОЙКА STUDIO