Gribouille
Sculptural squiggles, worn like punctuation.
О проекте
Gribouille - ювелирный бренд из Таллинна, в основе которого один мотив: свободный, извилистый росчерк. Каждая серьга напоминает одну непрерывную линию: форму ей придают вручную, затем обрабатывают и полируют. В коллекции пять оттенков, от Bleu Klein до Jaune oeuf.
Задача
У Gribouille небольшая команда и один узнаваемый продукт. Нужен был сайт, который передавал бы атмосферу фирменного магазина, показывал все пять цветов серёг на моделях и быстро загружался на телефоне. Обычный шаблон со стоковыми фото и тяжёлое видео на первом экране не подходили.
Не видеоролик, а 3D в реальном времени.
Стойка на первом экране - 3D-объект, встроенный в фотографию интерьера. Браузер отображает её в реальном времени: примерно за 100 секунд стойка совершает полный оборот, а по металлическим заклёпкам проходит розовая световая линия, повторяющая форму фирменной серьги. Ниже показываем, как устроен этот эффект.
Зал
Сначала мы создали изображение зала и выдержали его в фирменной сливово-розовой палитре. Подготовили две версии: пустой интерьер для 3D-объекта и статичное изображение уже со стойкой. Последнее появляется сразу при загрузке и остаётся на экране, если устройство не справляется с анимацией.
Камера
По эллипсу ковра на исходном изображении мы рассчитали положение виртуальной камеры: высоту, угол и фокусное расстояние. Благодаря этому 3D-стойка точно совпадает с перспективой интерьера как на широком мониторе, так и на вертикальном экране телефона.
Стойка
Модель мы создали программно, без отдельного 3D-редактора: чёрная лакированная стойка, хромированные детали и 260 заклёпок в пять рядов. WebGL отображает сцену в разрешении экрана, поэтому объект остаётся чётким даже там, где обычное видео потеряло бы детализацию.
Свет
По заклёпкам медленно движется розовая световая линия, меняя очертания. Вокруг подсвеченных элементов появляется мягкое свечение, на ковре - отблески, а сверху остаётся название бренда.
- 260хромированных заклёпок с независимой подсветкой
- ~100 сполный оборот стойки
- 0видеофайлов
- 15 КБвес кода всей 3D-сцены
Анимация не мешает просмотру
- При прокрутке страницы или переходе в другую вкладку анимация приостанавливается.
- Если телефон не справляется с нагрузкой, разрешение сцены снижается.
- Когда WebGL недоступен, показывается статичное изображение.
- Для пользователей, отключивших анимацию в настройках, сцена остаётся неподвижной.
Фотосессию для кампании мы тоже провели сами.
Вместо стоковых кадров и украшений на манекенах мы выбрали живую съёмку. Подобрали моделей и лаконичные трикотажные образы в молочных и голубых оттенках, чтобы главное внимание оставалось на серьгах. Каждый цвет сняли на отдельном фоне. Материалов одной фотосессии хватило для сайта, рекламных макетов и публикаций в соцсетях на сезон.
Кастинг
Мы выбирали моделей с выразительными чертами, которые хорошо смотрятся и в маленькой карточке, и на весь экран. Волосы убраны назад, чтобы не закрывать украшения.
Подбор образов
Молочный, бежевый и голубой трикотаж: спокойная одежда не отвлекает внимание от ярких серёг.
Свет
Мягкий боковой свет подчёркивает глянцевую поверхность и изгибы каждой серьги.
Цвет
При цветокоррекции следили за тем, чтобы оттенок Bleu Klein на фотографиях был максимально близок к реальному.
Одна фотосессия - несколько форматов.
Ещё на съёмке мы учитывали разные форматы: квадратную карточку товара, вертикальные сторис и публикации в ленте. Так украшение остаётся в кадре при любом кадрировании.
Решение
Мы выстроили страницу как виртуальную прогулку по магазину: входная зона, серьги в пяти цветах, крупные портреты моделей, интерьеры и выход. При выборе цвета меняются фотографии; если посетитель не взаимодействует со страницей, оттенки переключаются автоматически. По мере прокрутки появляется фирменная линия, а 3D-стойка продолжает вращаться.
Выберите цветовую отметку, чтобы увидеть соответствующую фотографию. Без взаимодействия оттенки сменяются автоматически.
Интерьер в стиле Gribouille.
Мы разработали и визуальную концепцию пространства: примерочную с розовой подсветкой и барную зону для субботних встреч. Сливовые и розовые оттенки, хромированные детали - те же, что на сайте. Благодаря этому у онлайн- и офлайн-пространства единый образ.
Результат
Для Gribouille мы объединили сайт, интерактивную 3D-сцену и фотоконтент в единую визуальную систему. Материалы одной съёмки подходят для сайта, рекламы и соцсетей, а 3D на первом экране остаётся чётким на разных устройствах и не требует загрузки видео.