Главная » Блоги Экспертов И ИТ-Компаний » Кофе Жокей: сага об идеальном 3D для промо-сайта
Делать проекты так, чтобы ими гордиться! 10 лет назад

Кофе Жокей: сага об идеальном 3D для промо-сайта

Заказчик проекта — группа компаний «Орими», крупнейший в России производитель чая и натурального кофе. Мы уже работали с этим заказчиком над промо-сайтом чая Greenfield, и заказчик вернулся к нам за сайтом для знаменитой марки кофе «Жокей».

Дизайн и разработка

Еще на этапе аналитики мы определись, что ключевой фишкой проекта станут 3D-модели — в промо-блоке на главной странице и на страницах продуктов. Чтобы упаковки продукта выглядели, как в жизни, мы решили делать их с натуры: накупили кучу разных упаковок кофе «Жокей» и моделировали на их основе.

Для отображения основной линейки продуктов мы подготовили четыре базовых модели, на основе которых сделали десять видов упаковок. На дизайне они выглядели супер, но вот на верстке оказалось, что браузер не передает все тени, складки и вмятины на упаковках, а нам хотелось показать их максимально настоящими. Чтобы довести их до идеала в браузере, дизайнер с разработчиком бок о бок проверяли разные настройки экспорта, подгоняли яркость и насыщенность текстур, настраивали симуляцию преломления света и прочие тонкости. Но все эти сложности себя оправдали.

Для вывода 3D-моделей на сайте мы использовали библиотеку Three.js. Это легковесная кроссбраузерная библиотека JavaScript, используемая для создания и отображения анимированной компьютерной 3D графики при разработке веб-приложений. В карточке товара на модель можно просто посмотреть с разных сторон. В промо-блоке на главной можно именно покрутить модель, анимация имеет три состояния: слабое вращение при движении мыши, разворот на 180° и разворот на 360° при смене слайда.

Сайт рассчитан не только на оптовиков, но и на людей, которые покупают кофе для себя. Для них на сайте мы реализовали вирусный механизм геймификации — тест «Какая ваша рабочая суперсила?». Вопросы-ответы теста настраиваются в админ-панели и для определенных комбинаций выводится свой результат: суперсила пользователя и подходящий именно ему продукт.

Для фильтра в списке товаров мы отрисовали уникальные иконки для выбора типа кофе. В карточке товара предусмотрено все для идеального восприятия: 3D-модель упаковки, визуализация силы вкуса, обжарки и помола кофе, отдельный экран для способов приготовления и возможность переключения между разными фасовками и типами кофе. Фон карточки товара можно выбрать из нескольких пресетов в админ-панели.

Готовый проект: Кофе Жокей

Подробнее о процессе разработки читайте в блоге scrum-студии «Сибирикс»


Данный материал является частной записью члена сообщества Club.CNews.
Редакция CNews не несет ответственности за его содержание.
2 месяца назад | категории: Интернет: E-commerce
Комментарии
Другие публикации
RU, Барнаул
веб-разработчик
Информационные технологии

Мы 10 лет на рынке информационных услуг. За это время из маленькой студии выросли в интернет-агентство, численностью более 35 сотрудников. У нас есть представительства в Москве и Лондоне. Мы активно сотрудничаем с такими известными клиентами как Cisco, Adobe, Nissan, Газпром и другими. За нашими плечами несколько сотен проектов, которыми мы гордимся и часть из них представлена в нашем портфолио.

Забегайте в гости: www.sibirix.ru




Забыли пароль?
Зарегистрируйся сейчас!
Присоединяйся к нашему обществу для того чтобы познакомиться с новыми людьми, создать собственный блог, публиковать анонсы событий и объявления, а также участвовать в обсуждении публикаций CNews. Мы создали единое пространство для общения специалистов рынка информационных технологий и всех, кто интересуется современными технологиями. Регистрация =>