Стильные мотоциклетные шлемы родом из Франции и интернет-магазин с уникальным характером бренда. Эффектная графика и прогрессивные технологии WebGL.
Предисловие
Каталог
Здесь ничто не мешает выбору. Крупная плитка акцентирует внимание, а тёмный фон усиливает контраст, подчеркивает формы и цвета. Помогают гибкие возможности фильтрации: от цвета шлема до материала внутренней отделки.
Если добавить товар в корзину, появится всплывающее окно с приятным подарком.
Корзина
Чтобы посмотреть покупки, необязательно переходить на отдельную страницу корзины. Можно кликнуть на значок корзины в меню — и проверить заказ во всплывающем окне. Это быстро и удобно.
Раздел о шлемах
Используем 3D-модель, чтобы наглядно продемонстрировать преимущества шлема. Выглядит эффектно и подчеркивает технологичность продукта.
Инструменты
для
модификации шлема
модификации шлема
Наш конструктор даёт безграничные возможности дизайна. Можно создать шлем, используя предложенные расцветки и принты, или сделать свой уникальный дизайн, выбрав любой цвет и изображение.
Выбор модели
Укажите нужный вариант из трёх модификаций шлемов Ruby: открытый, с визором или с защитой подбородка.
Выбор цвета
Возьмите любой из 256 000 000 цветов палитры — варианты почти безграничны.
Случайный шлем
Символ почти безграничного выбора Ruby — случайный шлем, реализованный в конструкторе и каталоге.
Выбор текстуры
Выберите из десятков предложенных текстур или загрузите свою.
Адаптивная версия конструктора
Мы бережно сохранили функционал конструктора и оптимизировали дизайн под мобильные устройства. Все возможности — всегда под рукой.
Загрузка своего изображения
Хотите сделать принт из фотографии? Снимать и загружать фото можно прямо в интерфейсе мобильного приложения.
Съемка и обработка фото
Пока работали над сайтом, провели студийную съёмку шлемов. Поработали со светом, чтобы подчеркнуть эстетику формы и материалов.
Компания Ruby доверила нам три красавца-шлема — по одному из каждой модификации: открытый, с визором или с защитой подбородка.
Мы отсняли 560 кадров. Выбрали лучшие и ретушью довели до совершенства.
Результаты съёмки
Раскадровка с эффектом вращения — отличное решение для главной страницы сайта. Эффектное первое знакомство пользователя со шлемами Ruby.
Моделирование шлемов
Мы создали 3D-модели шлемов с помощью графической программы Blender. И оптимизировали их для максимально плавной анимации на сайте.
Оптимизированная модель
Высокополигональная модель не подходила для компьютеров с низкой производительностью. Мы оптимизировали модель, и плавность движения увеличилась в 6 раз. Также поработали со светом, тенями и отражениями.
150000
полигонов
1
fps
производительность
10 000
полигонов
1
fps
производительность
Текстурные карты
Мы создали две карты: одна для бесшовного вывода фотографий пользователя, вторая для отрисовки имеющихся текстур.
Стандартная карта
Карта шлема для имеющихся текстур.
Уникальная карта
Карта шлема для фотографий.
Адаптивная версия
Благодаря адаптивному дизайну и вёрстке сайт Ruby выглядит безупречно на любом устройстве, при любом размере экрана.
