При запуске Yestalgia, эксклюзивной капсульной коллекции Decathlon, нашей миссией было спроектировать и разработать специальный цифровой опыт, прославляющий новую интерпретацию бренда 1990-х годов.
Коллекция, созданная на основе тщательно подобранных архивных произведений, переосмысленных через призму современности, сочетает в себе оптимистичный дух, смелые цвета и игривую эстетику десятилетия, оставаясь при этом безошибочно современной.
Дизайн
Визуальная идентичность, созданная в сотрудничестве с Дальхафинсочетает в себе яркие иллюстрации, выразительную типографику и ностальгические отсылки, погружая посетителей в мир, где наследие природы встречается с поп-культурой.
Нашей задачей было превратить это богатое творческое направление в увлекательный и высокопроизводительный веб-интерфейс, который мог бы поддержать запуск продукта, сохраняя при этом индивидуальность и энергию кампании.
Редакционный подход, ориентированный на продукт
Макет сочетает в себе редакционные последовательности, в которых изображения и продукты занимают центральное место. Крупномасштабные визуальные эффекты, щедрые композиции и минимум элементов интерфейса позволяют обнаружить каждую деталь почти мгновенно, создавая впечатление, что просмотр больше напоминает пролистывание кампании, чем навигацию по традиционному каталогу продуктов.
Внедрение кампании в интерфейс
Чтобы связать эти моменты, ориентированные на продукт, с более широкой идентичностью кампании, мы ввели чисто графические разделы, в которых преобладают типографика, формы и движение. Эти эпизоды действуют как визуальные интермедии на протяжении всего опыта, меняя ритм и привнося игривую энергию Естальгии прямо в интерфейс.
Вместо того, чтобы рассматривать ресурсы кампании как украшение, мы использовали их как часть визуального языка сайта, создавая постоянный диалог между продуктом, типографикой, иллюстрациями и взаимодействием.
Уокман
Одним из наиболее отличительных элементов опыта является сама навигация.
Меню, вдохновленное отсылками к коллекции 90-х годов, превращается в кассетный проигрыватель, где каждая кассета представляет собой отдельный пункт назначения на веб-сайте. Выбор кассеты превращает знакомую схему навигации в игровое взаимодействие, превращая что-то чисто функциональное в небольшой фрагмент повествования.
Это стало способом сделать ностальгическую концепцию осязаемой, не ставя под угрозу простоту опыта.
Графическая нить длиной 90 футов
Формы и линии проходят по всему веб-сайту как повторяющаяся графическая нить, соединяющая его различные компоненты и разделы.
Тонкие микровзаимодействия оживляют эти элементы: линии расширяются, формы меняются, а графические детали реагируют по мере того, как пользователи перемещаются по интерфейсу. Вместо того, чтобы полагаться на крупные эффекты, движение встроено в саму визуальную систему, создавая непрерывность между типографикой, изображениями, иллюстрациями и интерфейсом.
Вместе эти детали придают веб-сайту ритм и делают кампанию более живой, чем ее статичная визуальная идентичность.
Анимация
Основываясь на иллюстрациях художника, мы создали серию циклических анимаций, которые оживляют графическую вселенную. Эти тонкие последовательности, используемые на протяжении всего процесса, добавляют веб-сайту ритм, глубину и ощущение непрерывного движения.
Разработка
Настоящая задача: креативный сайт, который клиент может обновлять
Yestalgia — это сайт WordPress с полностью настраиваемой темой, поставляемый в 7 языков. Анимация — это видимая часть, но более серьезное ограничение было невидимым: сайт, ориентированный на искусство, по-прежнему должен быть по-настоящему простым в обновлении.
Таким образом, каждый раздел сайта представляет собой Блокстудия блок: а json схема и twig шаблон. Страница собирается из этих блоков, а это значит, что клиент может изменять порядок, компоновку и замену контента, не трогая код и не нарушая художественного направления.
Во внешнем интерфейсе весь сайт работает на кускиjsкрошечная платформа, построенная на собственных веб-компонентах и предлагающая набор инструментов и утилит, специально разработанных для творческих веб-сайтов, где каждый Piece — это автономный элемент, который лениво импортирует только свои собственные JS и CSS. Кроме того, мы переносим библиотеку утилит от проекта к проекту, и самое главное здесь — это наша Scroll Кусок. Он затыкает Ленис в Триггер прокрутки GSAP и централизует все, что связано с прокруткой, за атрибутами данных, поэтому интерактивность заложена прямо в разметке.
Меню: плеер, который можно загрузить 📼
Это была самая большая проблема проекта, и эта часть мне понравилась больше всего. Walkman поднимается в рамку, кассеты выдвигаются, и когда вы выбираете одну из них, вы искренне чувствуете, как она возвращается в деку, прежде чем все устройство упадет, открывая выбранную вами часть.
Чтобы этот цикл ощущался физически, возник в результате постоянных колебаний между разработкой и моушен-дизайном. Я создал первую рабочую версию прямо из проекта, зная, что цель заключалась в том, чтобы кассеты выходили из Walkman и вставлялись обратно по щелчку. Михал, дизайнер движения, затем взял эту основу и переработал ее, расширив замедление, задержки и длительность гораздо дальше, чем я, и именно это делает ее реальным объектом, а не набором анимации. Я перенес эти настройки обратно в код, чтобы настроить взаимодействие.
Небольшая деталь при близком рассмотрении: плеер наклоняется и возвращается назад, показывая два очень коротких кадра. Этот отскок подобен щелчку кассеты, вставленной в слот. Примерно так: при наведении курсора на пункт меню меняется цвет фона и соответствующий ему слой заката, и мобильный телефон получает тактильный импульс.
Большое название раскрывает
Это большие заголовки, вызываемые прокруткой, а их фирменная деталь — вытянутая толщина в фальшивом 3D. Нигде нет 3D: каждый символ (каждое слово на мобильном телефоне) дублируется дубликатом, который слегка располагается позади него, имитируя глубину тиснения шрифта, когда буквы встают на место.
Анимация управляется двумя смещениями. Шаг между каждой буквой перемещает выступ через линию, а задержка между буквой и ее дубликатом создает глубину. Чтобы эффект был более живым, постепенное появление происходит намного быстрее, чем перемещение.
На мобильных устройствах мы разделяем информацию по словам, а не по символам, чтобы улучшить производительность. Также установлено замедленное движение: каждая продолжительность, колебание и задержка падают до нуля, поэтому заголовок по-прежнему собирается сам по себе, просто делает это мгновенно.
Rive для векторной анимации
Каждый цикл Rive контролируется наблюдателем пересечения: анимация начинается, когда они входят в область просмотра, и приостанавливается в момент выхода, поэтому мы никогда не сжигаем графический процессор при движении, которое никто не видит.
Здесь также настраивается замедленное движение. Вместо того, чтобы пропускать анимацию, мы прокручиваем ее до последнего кадра, композиция по-прежнему читается точно так, как задумано, она просто не движется.
Движение, объявленное в разметке
Два небольших примитива покрывают большую часть декоративных элементов сайта, и ни один из них не требует повторного использования нового JavaScript.
Первый — это общий компонент временной шкалы, управляемый прокруткой, все определение которого находится в HTML: состояние «от состояния», состояние «до», необязательное замедление и продолжительность, а также вариант для портретных экранов. В разметке также можно объявить, при необходимости, где в области просмотра анимация должна начать воспроизведение и где она должна остановиться, чтобы один и тот же компонент можно было настроить для каждого раздела без строчки нового кода. Компонент анализирует эти значения, строит временную шкалу GSAP и Scroll Piece управляет его продвижением, когда элемент пересекает область просмотра. Таким образом созданы десятки анимаций на сайте, полностью объявленные в разметке.
Второй — спутник, маленькие декоративные элементы, которые бесконечно вращаются. Каждый выбирает случайный начальный угол и направление, чтобы ни один из них не был синхронизирован, и вращение продолжается. Темпусединый общий цикл анимации для всей страницы, нормализованный по разнице времени, поэтому скорость одинакова: 60 или 120 кадров в секунду. Спутники подписываются, когда входят в область просмотра, и отписываются, когда покидают ее, поэтому спутники, находящиеся за пределами экрана, вообще ничего не стоят.
Бесконечная перетаскиваемая карусель
Полноэкранная бесконечная карусель построена на основе технологии плавного цикла GSAP: основная временная шкала хореографирует положение, масштаб и наклон каждой карты. Все остальные карты наклонены в противоположную сторону, что придает веселый ритм. Карусель притягивается к ближайшему слайду, и новая активная карточка запускает показ собственного заголовка с синхронизацией между слайдами и заголовками, управляемыми Piecesjs.
Лукбук нижнего колонтитула
Еще одно интересное задание в этом проекте. Одновременно открыто только одно изображение, и раздел должен был сохранять одинаковую общую высоту по всей длине, поэтому при просмотре лукбука остальная часть страницы никогда не подпрыгнет под вами.
Сложнее всего было время. Каждое изображение должно начать открываться в нужный момент относительно его заголовка, в то время как окружающий контент уже перемещается изображением, открытым над или под ним. Для того, чтобы это выглядело цельно, потребовалось множество небольших корректировок.
Технический стек
Для задней части: WordPress с собственной темой на основе Древесина, Блокстудия для визуального редактора блоков, Полиланг для 7 языков.
Для фронтенда:
- кускиjs управлять интерфейсом с помощью собственных веб-компонентов (вступление к Кодропсу)
- Попутный ветер v4 и ПостCSS
- ГСАП для движения (с помощью ScrollTrigger, Draggable и SplitText)
- Ленис для плавной прокрутки
- Рив для векторной анимации
- Темпус как единый общий цикл анимации
- веб-гаптика для мобильных отзывов
- Построено с помощью vite