Кофе Жокей
Сага об идеальном 3D для промосайта
Кофе Жокей
Сага об идеальном 3D для промосайта
Проекты с элементами 3D в дизайне мы делаем уже лет шесть. Когда-то учили этому наших дизайнеров. Кстати, очень успешно. Сейчас 3D, по сути, входит в базовые настройки web-дизайнера. Для промоcайтов потребительских товаров — это вообще musthave. Рассказываем, как мы делали промосайт для кофе «Жокей» так, чтобы упаковки с продуктом выглядели совсем настоящими.
Кофе «Жокей» — самый продаваемый бренд кофе в России. На рынке он с 1999 года
Заказчик проекта — группа компаний «Орими». Крупнейший в России производитель чая и натурального кофе (бренды Jardin, «Жокей», Greenfield, TESS, «Принцесса Нури», «Принцесса Ява», «Принцесса Канди», «Гита», «Жемчужина Нила», «Шах»). Каждая третья чашка чая и натурального обжаренного кофе, которые выпивают в России — продукция «Орими».
Флагманский проект
В 2020 году мы запустили вместе с «Орими» промосайт Greenfield — самого популярного бренда чая в России. Сайт для бренда «Жокей» хотелось сделать еще лучше — заказчик понимал наши процессы, был готов к нестандартным решениям, чтобы получить классный результат. Надо было не просто держать уровень по сравнению с предыдущим проектом, а обязательно превзойти его.
Владимир
CEO & Founder
В работе на потоке заказов есть один минус. Как ни крути — это конвейер. Сложный. Хитрый. Но конвейер. Вообще любой отлаженный бизнес — это конвейер. И это — нормально. Но иногда мы его специально ломаем. Берем какой-то проект, и внутри себя решаем, что на этом проекте мы можем себе позволить бесконечное количество ресурсов. Зеленый свет на всё. Любые технологии. Если надо — любое количество итераций. Полировок. Подгонов. Надо выложиться.
Это как отказной сет в качалке. Делать так на всех проектах не получится. Не хватит ресурсов. Сдохнете. Но иногда…
Какие проекты брать? Те, которые нравятся лично вам. Могут быть конкурсными, зрелищными, фестивальными. Прокачивают команду. И где сложились правильные отношения с заказчиком.
Это как отказной сет в качалке. Делать так на всех проектах не получится. Не хватит ресурсов. Сдохнете. Но иногда…
Какие проекты брать? Те, которые нравятся лично вам. Могут быть конкурсными, зрелищными, фестивальными. Прокачивают команду. И где сложились правильные отношения с заказчиком.
Еще на этапе аналитики мы определись, что ключевой фишкой проекта станут 3D-модели. В промоблоке на главной странице и на страницах продуктов. Упаковки и стеклянные банки с кофе. Чтобы выглядели, как настоящие. Чтобы их хотелось потрогать, покрутить в руках, открыть и вдохнуть аромат кофе. Вкусный и настоящий, естественно :)
Чтобы добиться нужного эффекта, пришлось выложиться на 100% уже на этапе моделирования. Картинки в Яндексе не давали полного представления о пропорциях и деталях упаковок. Решением стало накупить кучу разных упаковок кофе «Жокей» и моделировать на основе реальных образцов. Чтобы купить все-все варианты упаковок, пришлось обойти несколько магазинов около офиса и даже съездить в «Метро».
Для отображения основной линейки продуктов мы подготовили четыре базовых модели, на основе которых сделали десять видов упаковок. Самой сложной оказалась стеклянная банка. У нее прозрачное дно, поэтому она выглядела пустой. Чтобы это победить, мы сделали особую настройку преломления света через стекло.
Было — стало
Модели были готовы, прекрасны и сданы заказчику. На дизайне они выглядели супер, но во время верстки мы столкнулись с тем, что браузер искажал внешний вид моделей — не передавались тени, помятость упаковок, а сами модели были будто пластилиновые. Надо было искать решение.
Глеб
Дизайнер
Когда все модели были подготовлены и затекстурированы, всплыла проблема импорта всей этой красоты на сайт. Оказалось, что рендер браузера, то есть то, как браузер отображает 3D-модели, выглядит совсем по-другому и совсем не похож на рендер программы, в которой делалось 3D. Чтобы довести их до идеала в браузере, ушло много времени: проверить разные настройки экспорта, подогнать яркость и насыщенность текстур, отрисовать карты отражений и «металлизированности» материала, настроить симуляцию преломления стекла и прочих приколов.
Контролируемый факап
Разработка флагманского проекта обычно предполагает использование новых технологий, которые позволяют решить задачу на очень высоком уровне. Затраты времени на такое решение на старте могут быть неясны. Понятно, что возможен факап по времени. И он обязательно будет, но для успеха проекта важно сделать его контролируемым.
Владимир
CEO & Founder
Важна фаза рисерча: мы берем себе час-два на «поиграться» с какой-то технологией или новым стэком, провести нужные эксперименты. В итоге оценка может увеличиться в 4 раза, или вы поймете, что только на стадию рисёрча вам нужны 8−16 часов. Бывает. Возможно, в этот момент вы упростите задачу, обойдётесь без анимации. Или добавите ресурсов. Я называю это «контролируемый факап». Провал возможен, но глубина провала заранее известна.
Так как проект флагманский, было принято решение добавлять ресурсы и подгонять 3D модели на верстке. Дизайнер корректировал цвета с учетом искажений рендера. Разработчики настраивали вручную сцену для каждой модели: четыре источника света для отображения теней, корректировали цвет и свет. Нужно было добиться визуально 100% сходства с реальной пачкой кофе — с учетом реальных заломов, шероховатостей и бликов.
Для вывода 3D-моделей на сайте мы использовали библиотеку Three.js. Это легковесная кроссбраузерная библиотека JavaScript, используемая для создания и отображения анимированной компьютерной 3D графики при разработке веб-приложений.
Для вывода 3D-моделей на сайте мы использовали библиотеку Three.js. Это легковесная кроссбраузерная библиотека JavaScript, используемая для создания и отображения анимированной компьютерной 3D графики при разработке веб-приложений.
Глеб
Дизайнер
Отдельной историей стала настройка освещения. Экспортировать освещение вместе с моделью нельзя. Программист выставил четыре источника света в настройках сцены в самом Three.js и расшарил мне доступ на редактирование их настроек. Пришлось не один час потратить на настройку положения и регулировку интенсивности этих источников света, чтобы получить достойную карту освещения и приятные блики на упаковке.
Всё 3D на сайте разделено две части: обычные модельки на детальной странице товара и промоблок на главной странице. В карточке товара на модель можно просто посмотреть с разных сторон. На главной — можно именно покрутить модель. Анимация там имеет три состояния: слабое вращение при движении мыши, разворот на 180° и разворот на 360° при смене слайда.
Сергей
Разрабочик
С обычными модельками в карточке товара ничего интересного — просто берем подготовленные модели и выводим их на страницу с помощью библиотеки Three. js, добавляем возможность покрутить модель с помощью плагина этой же библиотеки, и всё — модель готова.
В промоблоке всё интереснее — там нестандартный эффект смены моделей, поэтому для реализации этого блока использовалась библиотека PixiJS совместно с Three.js. В Three. js рендерилась модель, а в PixiJS накладывались дополнительные эффекты. Вместе с дизайнером мы попробовали 100 500 вариантов моделей, освещения, окружения, отражения, текстур, чтобы это все выглядело красиво.
В промоблоке всё интереснее — там нестандартный эффект смены моделей, поэтому для реализации этого блока использовалась библиотека PixiJS совместно с Three.js. В Three. js рендерилась модель, а в PixiJS накладывались дополнительные эффекты. Вместе с дизайнером мы попробовали 100 500 вариантов моделей, освещения, окружения, отражения, текстур, чтобы это все выглядело красиво.
Что еще?
Бодрящий тест на главной странице
Сайт рассчитан не только на оптовиков, но и на людей, которые покупают кофе для себя. В магазине около дома, выбирая пачки на огромном стеллаже с разными марками. Чтобы они выбрали «Жокей» — надо их как-то зацепить. Для этого на сайте мы реализовали вирусный механизм геймификации — тест «Какая ваша рабочая суперсила?».
Каждый день мы стараемся как можно лучше делать свою работу, но иногда все равно нужно включить турбо-режим и стать супергероем. У кого-то суперсила — никогда не уставать, у кого-то — всех вдохновлять или веселить. Тест позволяет определить свою рабочую суперспособность и рассказать о ней всему миру — то есть, своим друзьям в соцсетях.
Каждый день мы стараемся как можно лучше делать свою работу, но иногда все равно нужно включить турбо-режим и стать супергероем. У кого-то суперсила — никогда не уставать, у кого-то — всех вдохновлять или веселить. Тест позволяет определить свою рабочую суперспособность и рассказать о ней всему миру — то есть, своим друзьям в соцсетях.
Классный фильтр с иконками в списке товаров
Мы хотели сделать удовольствием даже поиск нужной пачки. Сам список товаров — уже произведение искусства благодаря реалистичному 3D вместо фотографий. Особенно тщательно мы проработали фильтр — например, нарисовали уникальные иконки для выбора типа кофе.
Идеальная карточка товара
В карточке мы учли все, что необходимо для идеального восприятия. Визуализацию главных свойств кофе — силы вкуса, обжарки и помола. Выбор фасовки и типа помола прямо в карточке товара. Подробный рассказ про способы приготовления.
Кстати, фон карточки товара подстраивается под цвет упаковки. При программировании сайта мы предусмотрели набор пресетов в соответствии с цветами упаковок кофе, чтобы заказчик мог самостоятельно для каждого нового добавленного товара выбирать цвет фона не только на детальной странице, но и в промоблоке.
Кстати, фон карточки товара подстраивается под цвет упаковки. При программировании сайта мы предусмотрели набор пресетов в соответствии с цветами упаковок кофе, чтобы заказчик мог самостоятельно для каждого нового добавленного товара выбирать цвет фона не только на детальной странице, но и в промоблоке.
Классная страница 404
Для 404 страницы мы сделали тематическую 3D-анимацию — ничего не найдено: банка с кофе падает и кофе из нее рассыпается по странице.
Полина
Руководитель проекта
Для того, чтобы сделать 3D модели на проекте максимально приближенными к реальным упаковкам, мы проводили регулярные звонки с заказчиком для выяснения требований. Заказчик очень подробно рассказывал нам про нюансы создания упаковок, технологию нанесения цветов на металлизированные упаковки, предоставлял развертки. Сразу после звонков в несколько итераций мы вносили корректировки и направляли на согласование каждую из 10 моделей. Так получилось достигнуть желаемого результата и сделать классные 3D.