Заказать проект

MOT-X

2025

Экспертиза

Направления

Год

Разработать интуитивно понятный и визуально эффектный сайт-каталог, который:
— Презентует ассортимент аккумуляторов (для авто, мототехники, спецтехники) с фильтрами по параметрам (емкость, ток, размер).

— Включает сложные анимации для плавного взаимодействия (например, 3D-вращение товаров, интерактивные подсказки).

— Адаптирован под разные типы клиентов:

• B2B: быстрое оформление оптовых заказов.
• B2C: понятные сравнения товаров и отзывы.

— Готов к интеграции с CRM и системами оплаты.

Создание сайта-каталога для компании «Мот-Х»

Задача

Проектирование в Figma:
Анализ и структура:
— Изучили ассортимент: 200+ SKU
с техническими характеристиками.
— Определили ключевые сценарии пользователей:

• «Хочу найти аккумулятор для JHL S004» → быстрый подбор по мото.
• «Нужно 100 батарей для магазина» → оптовый раздел с API-заказом.

— Создали User Flow и Wireframes для главных страниц:

• Главная → Каталог → Карточка товара → Заказ.

Дизайн-система:
— Цвета:

• Основной: энергетический красный (#C30F1A, как в логотипе).
• Дополнительный: черный (#000000) + белый (#FFFFFF).

— Шрифты:

• Заголовки: TT Supermolot Neue геометричный гротеск.
• Текст: Четкий sans-serif (Montserrat).

— Интерактивные элементы:

• Кнопки с микроанимацией (нажатие, hover-эффект).

Анимации и прототипы:
— 3D-презентация товаров:

• В карточке товара — вращение аккумулятора на 360° (реализовано через последовательность фото).

— Интерактивные фильтры:

• Анимация «раскрытия» параметров (емкость, серии, бренд).

— Плавные переходы:

• Parallax-эффект для номеров серий.

Разработка в Tilda:
Адаптация дизайна:
— Использовали блоки Zero Block
для кастомного дизайна.

— Настроили сложные фильтры через JavaScript.

— Интегрировали анимации:

• CSS-анимации для hover-эффектов.
• Lottie-анимации для загрузки

и интерактивных подсказок.

Функционал для B2B/B2C:
— B2C:

• Отзывы с фото (интеграция с API «Отзовик»).

— B2B:

• Мультизаказ (добавление в корзину списком).

SEO и скорость:
— Оптимизировали изображения (WebP + lazy load).
— Добавили schema.org-разметку для товаров (улучшение в выдаче).

Результат

— Конверсия в заказы выросла на 25% (удобный подбор).

— B2B-клиенты отмечают экономию времени на закупках.

— Сайт стал образцом для других проектов компании.

— Figma — дизайн, прототипирование, передача макетов.
— Tilda — верстка, анимации, интеграции.

— JavaScript/jQuery — кастомные фильтры.

— Lottie — сложные анимации.

Технологии

Разработка

Заказать проект?