Créer l'identité graphique de Config 2024
Le Brand Studio de Figma nous raconte la création d'une expérience événementielle immersive et dynamique, le tout dans un seul fichier Figma.
Partager Créer l'identité graphique de Config 2024
Config se déroule au sein du Moscone Center de San Francisco, un vaste espace de conférences. Sur chaque surface, nous avons cherché à jouer sur l'échelle et les dimensions, notamment en appliquant des films adhésifs décoratifs sur la façade.
Cerfs-volants : One Hat One Hand
Production de l'événement : Sparks et Encore
Mouvement et animations : Relay et Jordan Scott
Photographie : Ross Mantle et Preston Gannaway
Son : Sounds Like These
Développement du site web : Big Marker
Chaque année, notre équipe Brand Studio relève un défi de taille : créer un langage visuel pour Config, l'événement annuel de Figma. Leur but ? Développer une identité visuelle distinctive et autonome, tout en restant fidèle à l'image de marque générale de Figma. À travers cette expérience, nous voulons toucher un public composé de milliers de designers, de développeurs et d'équipes produit qui assistent à l'événement sur place ou en ligne. Pour cela, nous nous focalisons non seulement sur les éléments les plus marquants, comme la keynote ou la signalétique du Moscone Center de San Francisco, mais nous attachons également beaucoup d'importance aux détails des interfaces numériques, aux sacs, aux goodies et aux points de contact sur place. Chaque interaction doit être une extension immersive des caractéristiques propres à Figma. Découvrez comment nous avons donné vie à cette idée lors de Config 2024.
Trouver l'équilibre entre forme et fonction
Pendant la phase de brainstorming, les fonctionnalités de Figma nous ont servi de guide. Cette année, nous avons été particulièrement enthousiasmés par le nouveau design de Figma et le lancement de Figma Slides, qui aident les utilisateurs à travailler de manière plus fluide et plus efficace. Pouvoir basculer d'un mode à l'autre, de la création au partage du travail, par exemple, nous a paru être un grand pas en avant. Nous avons été particulièrement inspirés par cette nouvelle façon d'envisager le plan de travail Figma, et par le tout nouveau plan de travail de Figma Slides.
Nous avons donc commencé à esquisser un langage visuel basé sur des formes susceptibles d'être agrandies, déplacées et transformées, dévoilant à chaque fois une perspective inattendue.
Les thèmes de notre design ont été identifiés à travers cet angle d'approche. Certains d'entre eux nous ont particulièrement interpellés :
- l'idée de mouvement, en particulier à travers différentes tâches ou contextes ;
- l'amplification de la vision créative, en épurant le plan de travail ou en présentant le travail ;
- la collaboration au service de la convergence de différents points de vue ;
- l'adoption de multiples modes de création.
Nous avons commencé à esquisser diverses idées à partir de ces thèmes. Nous avons ensuite créé un langage basé sur des formes qui peuvent se déplacer, se transformer, s'amplifier et s'activer, en dévoilant à chaque fois une perspective inattendue.
Tout comme l'UX design, la signalétique et le design d'un événement ne se résument pas à l'aspect esthétique. La conférence réunissant plus de 12 000 participants sur place et 65 000 en ligne, nous avons dû faire face à des problématiques complexes en matière d'expérience utilisateur. Que ce soit pour l'inscription ou la réservation de places afin d'assister aux conférences, notre design system devait être capable de gérer de nombreux scénarios. Notre langage visuel a guidé les participants tout au long de l'expérience, en alliant sophistication et cohérence.
Des formes élémentaires ont été utilisées comme éléments de construction pour les graphismes les plus complexes.
Le design à grande échelle
L'un des plus grands défis d'un événement comme Config est l'immense quantité d'assets à créer. Nous avons cherché à créer un système modulaire qui soit à la fois flexible et captivant, où tout semble cohérent, mais jamais répétitif.
Les formes ont été un élément clé de la marque Config au fil des ans. Pour cette raison, nous avons commencé par créer une bibliothèque de formes géométriques simples et élémentaires, tirées directement de la barre d'outils de Figma : le rectangle, le cercle et le polygone. Ces formes simples servent de base aux designers qui utilisent Figma, et nous tenions à ce qu'elles soient le fil conducteur de la marque Config, où elles servent de composantes de base à des graphismes plus complexes, où chaque forme se développera pour former une nouvelle configuration. Pour garantir une certaine diversité sur l'ensemble des points de contact, nous avons créé une solide bibliothèque de composants pour ces graphismes dans Figma. Avec trois variantes par graphisme, nous avons pu présenter chaque forme sous différents angles.
Avec pour inspiration l'histoire de l'art et du design, des fresques audacieuses de Sol LeWitt aux environnements graphiques immersifs (ou supergraphics) de Barbara Stauffacher Solomon, nous avons converti ces formes de base en graphismes pouvant être utilisés sur différents supports et dans différents contextes. L'événement se déroule au Moscone Center de San Francisco, qui nous a permis de jouer avec les dimensions sur toutes les surfaces, qu'il s'agisse d'appliquer du film adhésif sur la façade du bâtiment ou d'en couvrir des couloirs entiers.
Pour traduire notre langage numérique dans le monde physique, nous nous sommes concentrés sur l'ajout de dimensions, de matériaux et de contrastes. Dans notre espace central, appelé Makers' Space, nous avons transformé nos formes en structures physiques à grande échelle. Les participants les ont utilisées comme sièges, comme arrière-plans pour les photos et comme lieu de rencontre. Quelques étages plus haut, en arrivant sur le site de l'événement, les visiteurs découvraient une installation suspendue de 14 cerfs-volants multicolores, dont certains atteignaient 5 mètres de haut. Cette œuvre a été réalisée en partenariat avec One Hat One Hand, pour donner une nouvelle dimension à nos graphismes en 2D. Chaque étage du Moscone Center présentait son propre angle de vue d'où les visiteurs pouvaient admirer ces créations flottantes matérialisant notre marque. Détail intéressant, ces structures reflétaient aussi certains mouvements de nos animations, où les formes tournent et créent des profils inattendus.
Une approche systématique du mouvement
Parallèlement à l'élaboration de notre langage graphique, nous avons exploré un langage du mouvement basé sur nos quatre principes fondamentaux :
- Déplacement : des mouvements de rotation et des changements de perspective représentent le potentiel de la convergence des points de vue.
- Transformation : des formes changeantes représentant le changement continu et la réinvention constante.
- Amplification : des motifs qui se succèdent en cascade et qui illustrent la manière dont nos outils permettent d'élargir votre vision.
- Activation : des formes adjacentes qui se transforment l'une l'autre pour symboliser le pouvoir de la collaboration.
Compte tenu de la diversité des modes, adopter une approche systématique du mouvement était essentiel. Des animations personnalisées pour chaque surface auraient été bien trop irréalistes. Au lieu de cela, nous avons créé une bibliothèque de mouvements composée d'éléments interchangeables, ce qui nous a permis de créer des compositions variées dans différentes palettes de couleurs. Cette bibliothèque d'animation polyvalente nous a permis d'insuffler du mouvement dans chaque expérience.
Chaque vidéo que nous avons réalisée était accompagnée d'un son personnalisé créé par Sounds Like These. Grâce à ces sons, nous avons pu créer une expérience de marque plus variée, mais néanmoins cohérente.
Cette bibliothèque nous a été d'une aide précieuse dans nos partenariats avec des fournisseurs comme Relay, qui a travaillé sur notre film inaugural (une séquence d'une minute pour stimuler un large public tôt dans la matinée). Nous avons lancé la collaboration en partageant notre bibliothèque de mouvements, ce qui a constitué une belle boîte à outils où piocher. L'équipe Relay a rapidement compris nos principes de base, puis les a approfondis en introduisant de nouveaux thèmes pour l'animation de chaque mode. Dans le film inaugural, nous avons combiné tous ces modes, ce qui a donné naissance à un langage audacieux, captivant et quelque peu inattendu.
Ce principe de mouvement a même été ajouté à notre site web. Au survol du logo Config, les utilisateurs peuvent voir chaque lettre se transformer en une forme primaire. Un petit détail qui sublime l'expérience de l'utilisateur.
Une palette flexible boostée par les variables
Une fois notre bibliothèque graphique mise en place, nous nous sommes penchés sur la question des couleurs. La palette devait être audacieuse et éclatante, et permettre différentes combinaisons et variations. Pour rendre le système le plus flexible possible, nous avons développé six palettes de couleurs distinctes, chacune avec des couleurs d'arrière-plan différentes.
Avec un système de couleurs aussi complexe, le recours aux variables de Figma a permis de gérer et d'appliquer les couleurs de manière efficace. En définissant nos palettes en tant que variables, nous avons facilement pu mettre à jour et maintenir la cohérence de tous les éléments de la marque. Ces variables nous ont permis de stocker et de réutiliser des valeurs spécifiques, telles que des couleurs ou des unités d'espacement, assurant ainsi la cohérence du look and feel tout en rationalisant notre workflow. Au lieu de sélectionner des combinaisons de couleurs personnalisées pour chaque asset, nous pouvions rapidement alterner entre des palettes définies.
Pour donner vie à la marque Config, plusieurs équipes internes et partenaires externes ont été mis à contribution. Par conséquent, notre design system se devait d'être facile d'utilisation. Les variables ont permis à toutes les équipes d'utiliser les couleurs de manière cohérente et à chaque application d'être originale et dynamique.
De l'expressivité à la fonctionnalité
Le site de Config était la première interface où tous les éléments étaient rassemblés. Pour adapter notre marque au Web, nous avons joué avec des nuances et des couleurs contrastées. Au fil de l'expérience, nous avons concilié le design d'informations fonctionnelles avec le langage expressif de notre marque. Pour contraster avec nos graphismes animés et nos calls-to-action, nous avons utilisé une police de caractères structurée à chasse fixe appelée Aperçu Mono. Notre palette de couleurs vives aide les utilisateurs à s'orienter au sein du lieu et de l'expérience. Les pistes audio et l'expérience en ligne suivent notamment des codes couleur. Le lancement du site s'est déroulé en trois phases : un microsite pour l'annonce, le lancement de la programmation et la diffusion virtuelle le jour même. À chaque étape, nous avons fait ressortir davantage d'éléments de la marque.
Pour travailler plus rapidement et avec une meilleure visibilité, nous avons dessiné tous les éléments dans Figma, y compris les graphismes physiques, les cerfs-volants en 3D et la signalétique.
Rassembler tous les éléments
Tout comme le design d'un produit, la création d'un événement immersif et engageant nécessite une compréhension approfondie du public auquel on s'adresse, une vision claire et un système suffisamment flexible répondre aux besoins de chaque point de contact. Nous avons dû prendre en compte les besoins des participants et concevoir un système qui pouvait fonctionner aussi bien sur le plan numérique que physique, et au niveau visuel comme fonctionnel. Grâce à un langage de design clair, composé de formes simples, d'éléments graphiques, de palettes de couleurs et de principes de mouvement, nous avons créé une base capable de s'adapter aux opportunités et aux contraintes spécifiques à chaque interface.
Tout au long du projet, nous avons travaillé dans un seul fichier Figma, pour assurer la visibilité et l'alignement de nos équipes web, marketing et créatives. Ce workflow intégré est à l'image de Config : un espace où l'on passe ensemble de l'imagination à la réalité.
Un grand merci à toute l'équipe du Figma Brand Studio pour le travail acharné qu'elle a fourni afin de donner vie à la marque Config 2024. Nous remercions tout particulièrement les équipes Figma Events et Web Experience pour leur confiance et leur collaboration.
Note de l'éditeur : nous avons mis à jour l'article pour indiquer qu'il y avait 10 000 participants en présentiel.
