Design guide : créer un univers graphique mémorable.
Vous cherchez à créer un univers graphique, une direction artistique unique pour votre marque ou celle d’un client ? Vous êtes au bon endroit !
Cet article a pour but de vous présenter une méthodologie complète, que vous pourrez facilement vous approprier pour progresser sur le sujet.
Afin d’illustrer concrètement le processus de conception, le propos suivra le fil rouge de la naissance de “Compoz”. Notre client visant avec ce produit une véritable révolution dans le domaine du parfum d’ambiance, la promesse à atteindre est claire :
“Parfumer avec raffinement vos espaces de vie n’a jamais été aussi simple et intuitif.”
Contexte du projet.
Produit design de luxe, Compoz est l’objet connecté permettant la diffusion de parfums dans vos espaces de vie. Notre mission est de concevoir et développer une application mobile permettant de contrôler le compositeur. Les utilisateurs ont alors le loisir de personnaliser leur environnement olfactif, en composant des fragrances uniques à partir d’huiles essentielles les plus pures.
Nous devons ainsi imaginer une direction artistique et une expérience UI intuitive en adéquation tant avec la vision produit que les valeurs portées par notre client.
Découvrez la démarche que nous avons mise en place pour élaborer un univers graphique visant l’excellence.
Étape 1 : Immersion.
L’immersion au cœur du sujet traité est indispensable. Il est pour cela nécessaire de comprendre l’histoire du produit, ainsi que les valeurs et les enjeux qu’il porte.
Le “Kick-Off”:
Une bonne première approche consiste en l’organisation d’un atelier de rencontre. Le “Kick-Off” réunit alors développeurs, designers, product owner et le porteur du projet : le client.
Les objectifs de cette rencontre sont multiples : partage de références, spécification des conditions de succès de la mission mais plus important encore : la définition des mots, les émotions et les valeurs qui caractérisent le projet.
Ces éléments sont inévitables pour la conception des premiers éléments graphiques.
“Compoz fait appel à nos émotions olfactives, touchant l’un de nos cinq sens : L’odorat.”
“Le compositeur possède des slots permettant d’insérer jusqu’à cinq parfums parmi un répertoire de 25 huiles essentielles naturelles. Des possibilités offertes sont infinies.”
“Il est destiné à être utilisé en majorité par la gent féminine.”
“Compoz s’inscrit dans le monde du luxe.”
Au travers de ces verbatims marquants issus de l’atelier réalisé avec notre client, nous avons identifié nos “mots, émotions, valeurs” pour Compoz :
- Luxe
- Féminité
- Olfactif
- Naturalité
Création d’un moodboard :
Le moodboard est un composant très utile à la direction que l’on souhaite donner à un univers graphique. Il nous guide tout au long du projet et nous rappelle les valeurs visuelles que l’on souhaite évoquer.
Chaque référence est imprimée puis qualifiée par les membres de l’équipe de création : ce qu’on aime, ce qu’on aime moins, ce qui correspond aux valeurs du produit et ce qui s’en éloigne.
Il existe différents outils pour rassembler des références inspirantes : Invision, Eagle, une board Pinterest ou plus simplement un montage Photoshop.
Quel que soit le support choisi, il a pour vocation d’être partagé régulièrement et de façon transparente avec le client, afin de valider le niveau d’ambition et les pistes graphiques visées.
La qualité d’un moodboard réside dans la richesse de contenu, il peut inclure différents types de fichier : vidéos, sons, photographies, palettes de couleurs…
De toute évidence, plus ce document sera fourni en références, plus vous obtiendrez un résultat graphique correspondant aux attentes de votre client.
Étape 2 : Conception du master visual.
Le master visual diffère d’une application à une autre, il peut prendre une forme totalement différente en fonction du thème. Il est souvent le reflet du cœur de l’expérience du produit.
Dans notre cas, l’élément incontournable est la représentation du parfum, avec le défi d’amener une réponse précise à la question :
“Comment rendre un parfum et ses propriétés identifiables auprès des utilisateurs ?”
En analysant des services populaires, différentes applications ont su répondre à une problématique similaire : “Comment représenter quelque chose d’aussi abstrait qu’une sensation ?”
- Spotify, Deezer : l’ouïe. Ces services musicaux incarnent une musique par une cover d’album ou un extrait de clip.
- Philips hue : la vue. Pour matérialiser une ou plusieurs lumières, philips utilise des gradients et des couleurs en cohérence avec le spectre lumineux des ampoules.
Comprendre la signification des masters visuels des apps “similaires” vous aidera à proposer de premières approches graphiques.
Dans notre cas, Spotify nous a mis sur la piste de covers olfactives.
Des formes abstraites, des gradients, des textures en passant par le mélange des trois. Il est conseillé d’explorer un maximum de pistes graphiques, qu’elles soient belles ou grossières visuellement. Cette approche permet notamment d’observer le champ des possibles tout en ne donnant aucune limite à notre capacité de création.
Osez partager vos différents rendus, malgré leurs défauts. Ces échanges avec l’équipe et votre client est primordial. C’est de la richesse des discussions et suggestions, que pourra naître l’épiphanie de votre processus créatif.
Un témoignage personnel fort nous a marqués :
“J’aime la campagne, la rosée du matin me fait ressentir toutes les odeurs de mon jardin, mon sens olfactif est utilisé à son paroxysme à ce moment précis”
Dans notre exemple, cet aveu nous a amenés à explorer une toute nouvelle direction. Une goutte d’eau représentant la naturalité ainsi qu’une photo indiquant explicitement le parfum que l’on souhaite évoquer au centre de celle-ci.
Forte de cette nouvelle piste graphique, notre équipe devait au plus vite pouvoir qualifier son potentiel. De façon à gagner du temps sur la conception, les premières versions doivent être réalisées avec simplicité.
Étape 3 : Réalisation à hauteur de l’ambition.
Le concept du master visual est validé ? Génial ! Maintenant, rendons-le exceptionnel.
“Obtenir un master visual à l’état de l’art.”
Dans le but de le faire évoluer, des questions vont surgir :
- Comment le réaliser techniquement, avec quels logiciels et quelles méthodes ?
- Comment obtenir un rendu visuel cohérent avec les mots, émotions et valeurs ?
- Sous quelle(s) forme(s) devrais-je le décliner ?
Si vous sentez que votre outil de création habituel bride votre créativité c’est l’opportunité d’appréhender de nouveaux logiciels.
Dans notre exemple nous avons testé :
- Cinema4D couplé à Redshift dans le but d’obtenir un shader réaliste.
- Shadertoy, un outil pour créer et partager des shaders via WebGL. By Laurent Alvaro.
La touche finale de notre goutte consiste à y ajouter une ressource iconographique illustrant chaque parfum, ainsi qu’un système de particules représentant la diffusion.
Le master visual est né.
Étape 4 : Designer l’univers UI.
L’interface utilisateur doit refléter l’identité du produit. L’enjeu réside dans l’extension de la direction artistique posée au travers du master visual. Il s’agit de la décliner et de la faire vivre dans l’ensemble de l’interface graphique.
Une fois de plus, les valeurs définies en début de projet vont guider le designer à la production des écrans. La phase de veille graphique est particulièrement recommandée lors de cette étape pour y définir des bases UI robustes.
Couleurs et typographies.
Opter pour une interface sombre permet d’introduire une sensation d’immersion dans un univers intimiste et également un rendu haut de gamme.
Il est crucial d’agrémenter votre styleguide de teintes lumineuses (ici la couleur cuivrée) ; dans le but de mettre l’accent sur certaines actions et fonctionnalités en garantissant une affordance optimale.
Linéale, Didones, Reales… Le catalogue des typographies est aujourd’hui infini ! Leur choix doit être fait minutieusement afin de soutenir textuellement l’émotion véhiculée.
Dans notre exemple, Playfair à l’avantage d’accentuer l’aspect féminin et haut de gamme, Brown quant à elle permet d’assurer une lisibilité optimale sur des textes classiques. Aussi, l’union de ces deux polices nous permet d’intégrer différents niveaux de lecture et une bonne hiérarchisation des éléments.
En effet, lors de la conception de votre univers graphique ayez à l’esprit qu’il doit permettre une expérience utilisateur sans couture. Prenez régulièrement du recul sur l’ensemble de l’univers graphique pour en vérifier la cohérence.
Les micro-interactions :
La richesse d’une expérience mobile demeure dans ses détails. Les animations et micro-interactions font partie intégrante de la direction artistique. Pour une lecture plus approfondie sur ce sujet, je vous invite à consulter ce guide.
Les animations permettent d’allier l’utile à l’agréable. Elles renforcent la compréhension utilisateur tout en permettant à votre application d’atteindre un niveau de finesse visant l’excellence.
Un univers graphique mémorable.
Et si la clé pour créer un univers graphique mémorable résidait dans sa cohérence avec l’histoire qu’elle raconte, les valeurs qu’elle incarne ? Lancez-vous en partant de cette hypothèse sans rester figé sur votre toute première intention graphique, qui ne sera que trop rarement la bonne. Restez à l’écoute des retours, prenez du recul et partagez un maximum vos rendus graphiques à ceux qui vous entourent. Itérez sans vous juger, expérimentez de nouvelles techniques. Inspirez-vous et structurez vos pensées pour les transcender dans votre design.
Maintenant c’est à vous de jouer !
Créez des univers uniques, vecteurs d’émotions fortes, afin de faire vivre une expérience inoubliable à vos utilisateurs.
Pour découvrir l’application mobile Compoz, c’est par ici 📱
L’équipe BeTomorrow :
Martin Perinet (Développeur front) Olivier Gauthier (Développeur back) Manon Urbain (Product Owner) Claire Smal (Product Owner) Albrecht ANDRZEJEWSKI (Product Owner) Laure Taboni (Scrum Master) Laurent Alvaro (Développeur) et Charles-Edouard Ray (Product Owner)
Merci.
Vous avez aimé cet article ? Cliquez sur 👏 en bas de page pour que d’autres lecteurs puissent le trouver !
BeTomorrow est une agence de conseil, design et développement. Pour aller plus loin, nous vous invitons à lire nos derniers articles ou nous contacter directement.
