Catégories
Astuces et Design

Chile20 by Active Theory remporte le prix du site du mois d'octobre 2020

Félicitations à Active Theory pour avoir remporté le site du mois d'octobre 2020 avec Adidas CHILE20. Merci à tous ceux qui ont pris le temps de voter, retrouvez le gagnant du Plan Pro dans notre Design Directory à la fin de l'article.

Dans une année de changements culturels mondiaux, lancer une gamme de vêtements de manière significative et engageante était le défi que nous a lancé adidas plus tôt cette année.

Pour l'équipe Originals qui s'occupe de Foot Locker, il ne suffirait pas de simplement prendre des photos de produits élégants. Pour vraiment avoir un impact, il était important de développer une campagne de lancement qui racontait à la fois l'histoire unique de la collection et communiquait l'artisanat et la qualité des vêtements.

Le bref

Sur la base des informations fournies par adidas et Foot Locker, nous voulions positionner le produit comme quelque chose de haut de gamme, de polyvalent et de désirable partout.

Pour ce faire, nous nous sommes mis au courant de la collection et de son histoire. Nous avons appris que la gamme CHILE a été lancée à l'origine en 1962 lors de la Coupe du monde de football au Chili. Depuis, il a été réédité plusieurs fois avec des icônes comme Snoop Dogg qui l'utilisent pour influencer la culture au fil du temps. Cette dernière version, CHILE20, est une fabrication moderne de la gamme, et comprend huit articles différents.

CHILI20 Collection CHILE20
Collection CHILE20

La portée du mémoire était également particulièrement excitante. Alors que nous étions concentrés sur une idée d'activation numérique de base (qui prendrait éventuellement forme dans un microsite de produit), notre travail sur la campagne de lancement CHILE20 inclurait également:

  • Faire des publicités en magasin pour plus de 500 magasins Foot Locker en Europe
  • Développement d'actifs de médias sociaux pour Foot Locker et les propriétés des partenaires
  • Création d'un film produit 3D pré-rendu de haute qualité
    Soutenir les relations publiques traditionnelles

Conception précoce

En approchant du brief, nous avons établi une étoile nord stratégique distincte: raconter une histoire de produit authentique et authentique. Dans un monde de campagnes publicitaires surestimées, nous voulions être clairs en communiquant ce qu'est la collection CHILE20 et ce qu'elle représente.

Étant donné que cela devait être communiqué sur plusieurs marchés européens, nous voulions adopter une approche assez visuelle pour éviter de nous perdre dans la nuance des copies de traduction.

En utilisant la palette de couleurs du produit comme base, nous avons proposé une direction artistique précoce utilisant une esthétique rouge dans l'ensemble, en accordant une attention particulière aux détails du produit.

CHILI20 Premiers concepts
Premiers concepts.

Nous avons également testé des rendus 3D pour démontrer la fidélité visuelle que nous pouvions obtenir en utilisant la production numérique (par opposition aux séances photo réelles).

CHILI20 Collection CHILE20
Collection CHILE20

Trois bandes. Trois mondes.

Bien que nous nous sentions bien dans la direction visuelle, nous avions encore besoin d'une histoire et d'une structure pour donner à l'expérience une certaine cohésion.

En utilisant le célèbre motif adidas «trois bandes», nous avons commencé à explorer comment nous pourrions créer différents «mondes de produits» qui pourraient représenter différents éléments thématiques de la campagne.

Angle 1: passé, présent et futur

La première considération pour l'histoire des trois mondes était de découvrir l'héritage du produit chilien, de voir comment il a évolué pour devenir ce qu'il est aujourd'hui (depuis son histoire à la Coupe du monde de 1962), puis de réfléchir à ce qu'il pourrait aller dans le futur.


CHILI20
Passé, présent et futur.

Angle 2: Produits de héros

Un autre facteur dans les trois mondes a été de présenter un produit héros dans chaque monde. Les trois produits sélectionnés par adidas (survêtement noir, bombardier, survêtement blanc) étaient trois des articles phares de la collection et allaient influencer la direction artistique et l’histoire de chaque monde.

Collection CHILE20 "width =" 941 "data-src =" http://www.maclasseweb.fr/wp-content/uploads/2020/11/1605622736_886_Chile20-by-Active-Theory-remporte-le-prix-du-site-du.jpg
.jpeg
Collection CHILE20

Angle 3: Thèmes d'actualité

Compte tenu de la jeunesse démographique et de l'intérêt pour la culture de rue, nous voulions également travailler sur des motifs thématiques qui pourraient résonner avec certains fans de la collection.


CHILI20
Passé, présent et futur.

En fin de compte, l'expérience tirerait parti des trois angles, chaque monde mettant en évidence un produit et un thème différents et racontant l'histoire de la collection sous un angle légèrement différent.

Une interaction clé a également permis aux utilisateurs de faire une transition fluide entre les mondes à tout moment. Stratégiquement, cela représentait la flexibilité du vêtement, et c'était aussi une manière propre de combiner la direction artistique.

CHILI20

Planification de l'expérience utilisateur

Afin de gérer la portée de l'expérience, nous avons décidé de modéliser un peu le monde. Cela a également facilité le basculement transparent entre les mondes à tout moment, car vous pouvez simplement passer à la section modèle correspondante du monde suivant.


CHILI20
Passé, présent et futur.

Une expérience d'atterrissage passionnante

Nous voulions donner à la page de destination une identité forte car elle serait le point d'entrée de toute l'expérience Web. Comme nous travaillions avec 3 produits et 3 mondes, nous l'avons aligné sur les 3 bandes emblématiques d'adidas, créant une bande colorée (correspondant au produit) pour chaque monde. Nous avons répété cette approche visuelle à quelques reprises, en explorant différentes options.

CHILI20

Notre expérience de page de destination finale n'était pas seulement le point d'entrée de la campagne numérique, mais a également servi de visuel clé qui serait également étendu à d'autres emplacements de campagne.

CHILI20

Fabriquer les mondes

Chacun des trois mondes avait une identité visuelle différente, reflétant l'héritage du produit chilien et la façon dont il a évolué pour devenir ce qu'il est aujourd'hui.

  • Monde 1: Concentré sur le passé. Nous avons créé un environnement grungy noir et blanc avec des graffitis de football sur le mur de la rue et le ballon de la Coupe du monde Chile 62 sur le sol. Nous avons ajouté du grain sur toute la section pour lui donner une impression un peu plus ancienne.
  • Monde 2: Concentré sur le présent. Nous voulions évoquer la pandémie sans être trop sévère. Le motif de la planche à roulettes n'était pas seulement un clin d'œil à la culture de rue d'adidas Originals, mais servait également de référence de niche au skateboard qui décollait vraiment dans les rues désertes de la pandémie COVID.
  • Monde 3: Regard vers le futur. Nous ne voulions pas exagérer avec le concept du temps – nous avons donc opté pour une esthétique futuriste. Cela a été représenté à travers un studio de musique propre avec des panneaux acoustiques, des haut-parleurs modernes et une table de mixage flottante.

CHILI20
Mondes Adidas CHILE20.

Création des produits

Comme la campagne nécessitait de nombreuses optimisations techniques et des prises de vue en gros plan, chaque produit devait être méticuleusement conçu en interne par notre équipe 3D avec les conseils attentifs de l'équipe produit d'adidas.

CHILI20
Collection CHILE20 "width =" 941 "data-src =" http://www.maclasseweb.fr/wp-content/uploads/2020/11/1605622739_352_Chile20-by-Active-Theory-remporte-le-prix-du-site-du.jpg
.jpeg
Collection CHILE20

De la statique: Bien que nous ayons créé des vêtements numériques de haute qualité pour les rendus de produits et les vidéos animées dans la campagne sur les réseaux sociaux, nous avions également besoin de modèles 3D pour le site Web.

CHILI20
Les premières expériences ont exploré les illusions de diffusion de la lumière 3D sur un plan plat en utilisant des normales.

Vers les modèles 3D: Grâce à quelques expérimentations, nous avons réalisé que les modèles 3D à eux seuls avaient le potentiel de montrer tous les détails sur chaque produit.

CHILI20
Test avant / après avec maille haute poly cuite normale sur maille basse poly.

Cependant, cela signifiait que nous devions être méticuleux avec la version Web de chaque vêtement, car nous devions adapter les détails de chaque modèle de polygone 500k + et de nombreuses cartes de texture 4k pour chaque partie du vêtement dans une version beaucoup plus optimisée avec seulement quelques textures 2k qui pourraient être chargées sur un appareil mobile.

En fin de compte, nous avons créé plusieurs versions différentes de chaque vêtement pour tester diverses techniques afin d'optimiser les modèles de mailles haute résolution. Celles-ci comprenaient Marvelous Designer (avec des outils dans Z-Brush), la réduction des polygones dans Cinema 4D et même des modèles de maillage via des volumes VDB pour guider la création des modèles de vêtements optimisés finaux utilisés sur le site.

Collection CHILE20 "width =" 941 "data-src =" http://www.maclasseweb.fr/wp-content/uploads/2020/11/1605622739_183_Chile20-by-Active-Theory-remporte-le-prix-du-site-du.jpg
.jpeg
Haut: modèles haute résolution de 3,5 mil + polygones
En bas: modèles de polygones finaux de 20 000 optimisés pour le Web.

Produits rapprochés

La clé de la stratégie de la campagne était de rapprocher les utilisateurs des produits (car il pourrait être difficile pour eux de les voir dans les magasins pendant la pandémie). Notre approche initiale consistait à utiliser des rendus statiques avec un effet faux 3D qui jouerait avec les normales et la position du curseur.


CHILI20
Itérations de section agrandi.

Pour résoudre ce problème, nous avions besoin d'une nouvelle approche. En ajoutant les vêtements dans une scène 3D avec une caméra en rotation, nous avons pu zoomer sur des zones clés tout en fournissant aux utilisateurs un contexte sur ce qu'ils regardent.

Pour rendre ces gros plans réalistes, nous avons ajouté une certaine profondeur de champ. Au début, nous avons essayé de brouiller la scène en fonction de la profondeur, mais nous n’avons pas aimé le flou sur les bords des objets produit par des techniques courantes de profondeur de champ en temps réel / performantes. Au lieu de cela, nous avons utilisé un flou bokeh dans l'espace écran pour mettre en évidence certaines zones et en flouter d'autres. Cette approche nous a donné l'impression d'une légère profondeur de champ et nous a permis de mieux contrôler l'apparence de l'image finale.

CHILI20
Chemin de la caméra autour du produit et faux paramètres DOF.

Gérer les performances Web

Les deux principaux défis auxquels nous avons été confrontés lors du développement du site Web étaient liés à la performance.

D'une part, nous devions rendre plusieurs scènes 3D en même temps lorsque les utilisateurs font défiler, glissent entre les mondes ou vont de la maison à l'une des sections (et vice-versa). Certaines de ces scènes ont également des reflets, ce qui nécessite un rendu supplémentaire.

CHILI20
Transition entre les mondes.

La solution que nous avons trouvée était de détecter quand le site Web est dans l'un de ces états stressants et de rendu multiple et d'alterner le rendu des scènes internes à la manière du ping-pong: une seule scène est rendue dans une image donnée et l'autre utilise le rendu précédemment généré. Étant donné que ces situations se produisent principalement lorsque les utilisateurs se déplacent sur le site, le rendu à faible fréquence d'images sur ces transitions devient presque imperceptible.

Le deuxième défi auquel nous avons été confrontés était lié au poids des actifs. Parce que nous avons choisi de montrer des produits 3D en temps réel au lieu d'images statiques, nous avons fini par devoir trouver des moyens d'optimiser le chargement de la géométrie et des textures.

Un moyen simple et direct de réduire la taille des géométries symétriques consiste à exporter la moitié d'entre elles et à créer deux maillages, l'un rendant normalement et l'autre avec une valeur de mise à l'échelle négative sur l'axe X et le rendu de la face arrière.

CHILI20
Exemple d'optimisation de la géométrie symétrique.

En ce qui concerne les textures, nous avons créé un système LOD qui charge d'abord les textures de petite taille, puis, en fonction des capacités de l'appareil de l'utilisateur, une texture haute résolution qui remplace la texture de faible qualité une fois chargée. Cette optimisation était cruciale pour pouvoir montrer des gros plans d'actifs avec plusieurs textures PBR.

CHILI20
Comparaison des textures haute résolution et basse résolution.

Le visuel clé de la campagne

Le visuel clé de la campagne ferait la une de la campagne sur le site Web, les médias payants, les relations publiques et la vente au détail.

Cela a traversé de nombreuses itérations alors que nous explorions le motif 3 bandes / 3 mondes à travers une gamme de dispositions et de formations différentes. Nous avons commencé avec des masques, qui ont fourni une tranche des histoires du monde des produits – mais nous avons finalement atterri sur un écran de touches plus équilibré qui place les produits au premier plan et au centre et utilise le motif des rayures / mondes comme toile de fond subtile.

CHILI20
CHILI20
Explorations visuelles clés.

Extension dans les magasins Foot Locker

Pour le commerce de détail, nous avons dû exporter les visuels clés dans de nombreuses versions, avec soit les 3 produits, soit chacun d'eux individuellement, au format carré / portrait / paysage. Ils ont également été appelés dans des compositions massives en couches 16k. Pour des raisons de temps et de performances, nous ne pouvions pas laisser notre ordinateur fonctionner pendant des jours pour rendre ces visuels, nous avons donc dû trouver une solution intelligente.

En utilisant Topaz Gigapixel, un outil basé sur l'apprentissage automatique, nous avons pu améliorer les visuels tout en préservant la qualité de l'image. Nous avons ensuite rendu des compositions en couches 4k en 300 dpi, 3500 échantillons (~ 35min directement dans Octane), généré 16k images (~ 30min) à l'aide de Topaz, puis compilé des calques et ajouté des post fx / logos dans Photoshop. Cela nous a sauvé des heures ou des jours de rendu bien nécessaires!

CHILI20
Exemple d'IA haut de gamme.

En collaboration avec Foot Locker et Intermarketing, les affiches de vente au détail ont ensuite été mises à la disposition des magasins Foot Locker dans toute l'Europe.

CHILI20
Actifs de vente au détail.

Le film de héros

Le film de héros.

Le livrable final de ce projet était un film héros de 15 secondes pour la collection, ainsi que trois films de 6 secondes pour chaque produit. Cela serait utilisé sur le site Web, ainsi que sur d'autres canaux. Nous l'avons anticipé tôt dans notre processus de création en sauvegardant des modèles high poly et des textures 4k.

CHILI20

Storyboard initial.

Très tôt, nous nous sommes mis d'accord sur un storyboard où nous utiliserions essentiellement des coupes rapides de plans rapprochés des produits et de leur environnement, puis un zoom arrière lent sur chacune des 3 scènes. Mais une fois que le visuel clé a été défini, il est devenu évident pour nous de l'utiliser comme plan final du film car il est devenu l'identité de l'ensemble de la campagne, et d'être cohérent dans tous nos livrables.

Nous avons sélectionné les parties les plus puissantes de chaque produit et joué avec l'assouplissement de la caméra pour les relier toutes dans la vidéo. Nous avons fini par ne pas utiliser les plans d'environnement car nous nous sentions assez déconnectés du reste. En post-production, nous avons joué avec les couleurs et avons appliqué une texture de grain sur le dessus du film pour lui donner un aspect plus original.

Nous avons exporté un total de 16 versions de films pour la vente au détail, les médias sociaux, les publicités et les partenaires médias.

CHILI20
Hero Film affiché sur un grand écran de 270 pouces dans Foot Locker Champs Elysees.

Conclusion

La campagne CHILE20 a été lancée en septembre 2020 sur le site Web, les médias sociaux et la vente au détail en magasin. Il bénéficiait également du soutien des relations publiques de Hypebeast et d'Outpump. Malgré son lancement en pleine pandémie avec une toute nouvelle approche numérique de la production, la collection a été accueillie chaleureusement en ligne et en magasin.

Nous avons vraiment apprécié le processus de production en tant qu'agence créative principale du projet. Merci à tous les partenaires et sponsors du projet et nous espérons faire équipe à nouveau prochainement.

Information d'entreprise

Active Theory est un studio de production numérique créatif avec des bureaux à Los Angeles et Amsterdam. En savoir plus sur leur site ici.

Merci de vous être impliqué dans le processus de vote et d'avoir tweeté à ce sujet, @patrik_media vous avez gagné le plan Pro, DM nous sur Twitter pour obtenir votre prix! 🙂

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *