Стильные мотоциклетные шлемы родом из Франции и интернет-магазин с уникальным характером бренда. Эффектная графика и прогрессивные технологии WebGL.
Предисловие

Каталог
Здесь ничто не мешает выбору. Крупная плитка акцентирует внимание, а тёмный фон усиливает контраст, подчеркивает формы и цвета. Помогают гибкие возможности фильтрации: от цвета шлема до материала внутренней отделки.


Если добавить товар в корзину, появится всплывающее окно с приятным подарком.
Корзина
Чтобы посмотреть покупки, необязательно переходить на отдельную страницу корзины. Можно кликнуть на значок корзины в меню — и проверить заказ во всплывающем окне. Это быстро и удобно.


Раздел о шлемах
Используем 3D-модель, чтобы наглядно продемонстрировать преимущества шлема. Выглядит эффектно и подчеркивает технологичность продукта.

Инструменты
для
модификации шлема
модификации шлема
Наш конструктор даёт безграничные возможности дизайна. Можно создать шлем, используя предложенные расцветки и принты, или сделать свой уникальный дизайн, выбрав любой цвет и изображение.

Выбор модели
Укажите нужный вариант из трёх модификаций шлемов Ruby: открытый, с визором или с защитой подбородка.

Выбор цвета
Возьмите любой из 256 000 000 цветов палитры — варианты почти безграничны.

Случайный шлем
Символ почти безграничного выбора Ruby — случайный шлем, реализованный в конструкторе и каталоге.

Выбор текстуры
Выберите из десятков предложенных текстур или загрузите свою.
Адаптивная версия конструктора
Мы бережно сохранили функционал конструктора и оптимизировали дизайн под мобильные устройства. Все возможности — всегда под рукой.
Загрузка своего изображения
Хотите сделать принт из фотографии? Снимать и загружать фото можно прямо в интерфейсе мобильного приложения.

Съемка и обработка фото
Пока работали над сайтом, провели студийную съёмку шлемов. Поработали со светом, чтобы подчеркнуть эстетику формы и материалов.


Компания Ruby доверила нам три красавца-шлема — по одному из каждой модификации: открытый, с визором или с защитой подбородка.



Мы отсняли 560 кадров. Выбрали лучшие и ретушью довели до совершенства.
Результаты съёмки
Раскадровка с эффектом вращения — отличное решение для главной страницы сайта. Эффектное первое знакомство пользователя со шлемами Ruby.






















Моделирование шлемов
Мы создали 3D-модели шлемов с помощью графической программы Blender. И оптимизировали их для максимально плавной анимации на сайте.
Оптимизированная модель
Высокополигональная модель не подходила для компьютеров с низкой производительностью. Мы оптимизировали модель, и плавность движения увеличилась в 6 раз. Также поработали со светом, тенями и отражениями.

150000
полигонов
1
fps
производительность

10 000
полигонов
1
fps
производительность
Текстурные карты
Мы создали две карты: одна для бесшовного вывода фотографий пользователя, вторая для отрисовки имеющихся текстур.

Стандартная карта
Карта шлема для имеющихся текстур.

Уникальная карта
Карта шлема для фотографий.

Адаптивная версия
Благодаря адаптивному дизайну и вёрстке сайт Ruby выглядит безупречно на любом устройстве, при любом размере экрана.
