Comment créer une identité visuelle forte sans sacrifier l’expérience utilisateur ?

Qu’est-ce qu’une identité visuelle forte ?

Une identité visuelle forte n’est pas nécessairement spectaculaire.

Pour moi, elle est surtout identifiable et cohérente.

Elle crée un langage visuel suffisamment précis pour que plusieurs éléments donnent l’impression d’appartenir naturellement au même univers.

Cette identité peut être construite à partir de :

• un logo ;
• une palette de couleurs ;
• des typographies ;
• des formes ;
• un style photographique ;
• des illustrations ;
• des motifs ;
• des textures ;
• une iconographie ;
• des compositions ;
• des animations ;
• une manière particulière de traiter les contenus.

Chez TooNetCreation, nous abordons d’ailleurs la création d’identité visuelle comme quelque chose de plus large que la création d’un logo.

Le logo est une pièce importante, mais il ne peut pas à lui seul définir la manière dont une marque va vivre sur une page web, un réseau social, une présentation ou un support imprimé.

L’identité visuelle est un système.

Et ce système doit être suffisamment reconnaissable pour créer de la personnalité, mais suffisamment flexible pour fonctionner dans des situations très différentes.

Identité forte ne veut pas dire design chargé

C’est probablement l’une des confusions les plus fréquentes.

Pour donner du caractère à une marque, on peut être tenté d’ajouter :

• davantage de couleurs ;
• davantage de typographies ;
• davantage d’illustrations ;
• davantage d’effets ;
• davantage d’animations ;
• davantage de détails graphiques.

Mais accumuler des éléments ne crée pas automatiquement une identité.

Une identité peut être très minimaliste et immédiatement reconnaissable.

À l’inverse, elle peut être maximaliste, colorée et très riche tout en restant parfaitement maîtrisée.

La vraie question est donc moins :

« Est-ce qu’il y en a beaucoup ? »

que :

« Est-ce que chaque choix participe au même univers et au même message ? »

Pourquoi l’esthétique influence aussi notre perception d’un site

Opposer complètement esthétique et ergonomie serait une erreur.

Une interface agréable visuellement peut contribuer positivement à l’expérience ressentie par l’utilisateur.

Le Nielsen Norman Group parle d’« aesthetic-usability effect » : les utilisateurs ont tendance à percevoir les interfaces attractives comme plus faciles à utiliser.

Ce phénomène est intéressant parce qu’il montre que le design visuel n’est pas seulement une couche décorative ajoutée après le travail UX.

L’esthétique influence la manière dont une interface est perçue.

Mais cet effet possède évidemment ses limites.

Une belle direction artistique ne compensera jamais :

• un menu incompréhensible ;
• une information impossible à trouver ;
• un formulaire inutilisable ;
• un contraste insuffisant ;
• un parcours inutilement complexe ;
• ou une version mobile mal conçue.

C’est exactement pour cela que design graphique et UX doivent travailler ensemble.

Kim explique plus précisément cette complémentarité dans notre article consacré aux différences entre UX et UIdifférences entre UX et UI.

Avant de créer : commencer par comprendre la marque

Lorsque je commence un projet, je n’essaie pas immédiatement de trouver une belle palette de couleurs.

Je cherche d’abord à comprendre ce que la marque veut transmettre.

Je peux par exemple me poser les questions suivantes :

• Quelle est son histoire ?
• Quelles sont ses valeurs ?
• À qui s’adresse-t-elle ?
• Comment souhaite-t-elle être perçue ?
• Quelle image renvoie-t-elle aujourd’hui ?
• Quelle image voudrait-elle renvoyer demain ?
• Quels codes sont très présents dans son secteur ?
• Doit-elle s’inscrire dans ces codes ou au contraire s’en différencier ?
• Qu’est-ce qui pourrait la rendre reconnaissable ?

Un cabinet de conseil B2B, un café créatif, une entreprise industrielle et une marque destinée aux adolescents peuvent tous avoir besoin d’une identité forte.

Mais ils ne doivent évidemment pas utiliser les mêmes moyens graphiques.

Le bon design n’est pas celui qui me ressemble. C’est celui qui ressemble à la marque.

C’est un principe essentiel.

Avoir son propre univers graphique en tant que designer est une richesse. Mais l’objectif n’est jamais de le reproduire systématiquement chez les clients.

Le moodboard : bien plus qu’une collection de jolies images

Le moodboard occupe une place importante dans ma manière de travailler.

On peut le traduire par « planche d’ambiance », mais cette définition donne parfois l’impression qu’il s’agit simplement de réunir quelques images esthétiques trouvées sur Pinterest.

Pour moi, son rôle va beaucoup plus loin.

Un moodboard peut rassembler :

• des photographies ;
• des palettes de couleurs ;
• des typographies ;
• des textures ;
• des matières ;
• des formes ;
• des illustrations ;
• des exemples de compositions ;
• des détails issus de la mode, de l’architecture ou de la décoration ;
• des interfaces ;
• des objets ;
• des références parfois très éloignées du secteur du client.

Figma définit également le moodboard comme un collage permettant de définir une direction visuelle et d’aligner les différentes parties prenantes autour d’un univers.

C’est exactement l’utilisation qui m’intéresse.

Le moodboard sert à mettre des images sur des intentions qui sont parfois difficiles à exprimer avec des mots.

Un client peut par exemple dire :

« Je veux quelque chose de moderne, mais chaleureux. »

Le problème, c’est que « moderne » et « chaleureux » peuvent correspondre à des dizaines d’univers complètement différents.

En proposant plusieurs références, on peut commencer à préciser cette idée :

• moderne et minimaliste ;
• moderne et très coloré ;
• moderne et premium ;
• moderne avec des références rétro ;
• moderne mais artisanal ;
• moderne et technologique.

Le moodboard devient alors un outil de recherche, de dialogue et de cadrage.

Il permet d’éviter de découvrir après plusieurs jours de conception que le designer et le client n’imaginaient absolument pas la même chose.

Les couleurs : créer une émotion et guider le regard

La couleur est probablement l’un des éléments les plus immédiatement associés à une identité visuelle.

Elle peut créer une ambiance extrêmement rapidement.

Une palette très vive ne produit pas la même sensation qu’une palette composée de beige, de noir et de tons naturels.

Mais dans une interface web, la couleur possède deux fonctions.

Une fonction identitaire

Elle aide à exprimer l’univers de la marque.

Elle peut rendre une communication :

• plus énergique ;
• plus élégante ;
• plus douce ;
• plus institutionnelle ;
• plus expérimentale ;
• plus chaleureuse.

Une fonction d’interface

La couleur doit aussi aider l’utilisateur.

Elle peut servir à :

• faire ressortir une action principale ;
• identifier un lien ;
• signaler un état ;
• différencier plusieurs catégories ;
• attirer l’attention sur une information importante.

C’est là qu’il faut éviter une erreur fréquente : utiliser la couleur d’accent partout simplement parce qu’elle fait partie de la charte.

Si tous les blocs, tous les titres et tous les boutons sont mis en valeur, la hiérarchie disparaît.

La couleur doit aussi rester lisible. Le W3C recommande notamment de prévoir suffisamment de contraste entre premier plan et arrière-plan dès la conception.

L’identité visuelle ne doit donc pas seulement fonctionner sur un moodboard.

Elle doit fonctionner dans de vraies conditions de lecture et d’utilisation.

La typographie donne une voix à la marque

Changer une typographie peut complètement changer la perception d’un même message.

Une police très géométrique, une serif élégante, une typographie manuscrite ou un caractère volontairement déstructuré ne racontent pas la même chose.

J’aime particulièrement travailler avec ce contraste :

• une typographie expressive pour certains titres ;
• une police plus simple et fonctionnelle pour les contenus longs.

Cette association permet de donner de la personnalité sans sacrifier la lecture.

Une typographie décorative peut devenir un véritable élément graphique sur :

• un grand titre ;
• une accroche ;
• un chiffre ;
• une citation ;
• une catégorie ;
• un élément très court.

Mais appliquer cette même typographie à plusieurs paragraphes risque de rendre la page fatigante.

Le caractère doit être placé là où il produit un effet, et la lisibilité là où l’utilisateur doit réellement lire.

La composition permet aussi de créer une identité

Une marque peut avoir une personnalité forte sans utiliser dix couleurs ou une typographie spectaculaire.

La composition elle-même peut devenir distinctive.

On peut travailler :

• les superpositions ;
• les décalages ;
• les grands espaces ;
• les blocs asymétriques ;
• les images débordantes ;
• les effets de collage ;
• les grilles ;
• les alternances entre zones très denses et zones très aérées.

Personnellement, les superpositions attirent beaucoup mon regard.

Elles permettent de donner de la profondeur, de créer plusieurs niveaux de lecture et de faire dialoguer des images, des formes, des couleurs ou des typographies.

Mais une superposition réussie n’est pas simplement une accumulation.

Il faut toujours savoir :

• quel élément doit être vu en premier ;
• quel élément vient ensuite ;
• quelle information reste secondaire ;
• et ce que l’ensemble doit faire ressentir.

Une composition expressive a elle aussi besoin d’une hiérarchie.

Peut-on utiliser un design maximaliste sur un site web ?

Oui.

Et je pense même que certaines marques auraient tout intérêt à s’autoriser davantage de personnalité.

Le minimalisme est devenu tellement présent dans les interfaces que l’on finit parfois par voir les mêmes codes partout :

• fond blanc ;
• grands espaces ;
• typographie sans serif ;
• une couleur d’accent ;
• cartes avec coins arrondis ;
• quelques dégradés.

Cette approche fonctionne très bien pour certains projets.

Mais elle ne doit pas devenir une règle universelle.

Un univers maximaliste peut utiliser :

• des couleurs très présentes ;
• des textures ;
• des motifs ;
• des collages ;
• des typographies expressives ;
• des références Y2K ;
• des effets chromés ;
• des compositions plus libres.

Le problème ne vient pas du maximalisme lui-même.

Le problème apparaît lorsque la hiérarchie disparaît derrière la décoration.

On peut donc concevoir une interface très riche tout en conservant :

• un menu identifiable ;
• des boutons compréhensibles ;
• des textes lisibles ;
• des actions principales clairement visibles ;
• des espaces permettant de respirer ;
• une adaptation mobile réellement pensée.

Créer une identité forte, ce n’est pas en faire trop. C’est savoir exactement ce que l’on veut faire ressentir.

Originalité graphique : jusqu’où peut-on casser les codes ?

Quand je recherche des références, j’aime regarder ce qui se fait dans le secteur du client.

Mais j’aime aussi volontairement sortir de ce secteur.

Si l’on regarde uniquement les concurrents directs, on risque très vite de reproduire les mêmes solutions.

Une idée intéressante peut venir :

• de la mode ;
• d’une pochette d’album ;
• d’un jeu vidéo ;
• d’une affiche ;
• d’un packaging ;
• de la décoration intérieure ;
• du cinéma ;
• d’un objet ;
• ou simplement d’un détail observé dans la rue.

Sortir des références habituelles permet de trouver des combinaisons plus originales.

Mais sur une interface, certains codes restent utiles parce qu’ils sont compris par les utilisateurs.

Un utilisateur doit généralement pouvoir identifier rapidement :

• la navigation ;
• les liens ;
• les boutons ;
• les champs de formulaire ;
• les éléments cliquables ;
• les messages d’erreur ;
• les actions principales.

Je trouve donc plus intéressant d’introduire l’originalité dans l’expression graphique du code plutôt que dans sa disparition complète.

Un bouton peut avoir une forme originale, une animation particulière ou une typographie spécifique tout en restant identifiable comme un bouton.

Micro-interactions et effets au survol : apporter une surprise utile

J’aime particulièrement les effets au survol.

C’est un détail assez simple qui peut donner beaucoup de vie à une interface.

Une image peut légèrement évoluer, un bouton changer d’état, une couleur apparaître ou une composition se transformer lorsque l’utilisateur interagit avec elle.

Ces effets peuvent avoir deux fonctions.

Une fonction graphique

Ils créent une surprise et participent à la personnalité du site.

Une fonction UX

Ils indiquent qu’un élément est interactif et donnent un retour à l’utilisateur.

C’est précisément ce que je trouve intéressant : un détail graphique peut être à la fois esthétique et fonctionnel.

Il faut en revanche éviter de mettre des effets partout.

Si chaque titre, image, bouton et paragraphe réagit au passage de la souris, le site peut rapidement devenir fatigant et imprévisible.

Les micro-interactions doivent créer du rythme, pas du bruit.

Une identité forte doit aussi rester accessible

Une identité originale n’est pas incompatible avec l’accessibilité.

Les deux sujets doivent au contraire être pensés ensemble.

Le W3C recommande notamment, dès la conception visuelle :

• un contraste suffisant ;
• de ne pas transmettre une information uniquement par la couleur ;
• des éléments interactifs facilement identifiables ;
• une navigation claire et cohérente ;
• des titres et espacements permettant de regrouper les informations ;
• une conception adaptée aux différentes tailles d’écran.

Vous pouvez consulter les conseils du W3C pour concevoir des interfaces accessibles.

Nous avons également consacré un article à une idée que je trouve importante : un site accessible n’a absolument pas besoin d’être graphiquement pauvre.

Cela oblige simplement à mieux maîtriser ses choix.

Un rose très clair peut faire partie d’une palette de marque sans forcément devenir la couleur d’un petit texte sur fond blanc.

Une typographie extrêmement graphique peut apparaître dans un titre sans être utilisée sur vingt lignes de contenu.

Une animation spectaculaire peut exister ponctuellement sans accompagner chaque interaction.

La contrainte peut même rendre une direction artistique plus précise.

Du logo au site : construire une véritable continuité visuelle

Une autre erreur fréquente consiste à créer le logo d’un côté et le site internet de l’autre.

Le résultat peut être techniquement correct mais donner l’impression de juxtaposer plusieurs univers.

Pour moi, une identité réussie doit pouvoir se prolonger naturellement :

• dans le logo ;
• dans la palette ;
• dans les typographies ;
• dans les photographies ;
• dans les illustrations ;
• dans les boutons ;
• dans les cartes ;
• dans les animations ;
• dans les réseaux sociaux ;
• dans les supports imprimés.

Cela ne signifie pas reproduire le logo partout.

Il faut plutôt identifier ce qui constitue réellement l’ADN visuel de la marque.

C’est aussi la différence entre une simple collection d’éléments graphiques et une véritable charte graphique capable de vivre.

Figma rappelle d’ailleurs dans son guide consacré aux brand style guides que les règles de marque permettent notamment de maintenir la cohérence des polices, couleurs, logos et images.

Cas concret : Les Halles Créatives, conserver une personnalité très forte sans perdre la navigation

Le projet des Halles Créatives représente assez bien cette problématique.

L’univers graphique existait déjà en grande partie au démarrage du projet.

Le client disposait d’un moodboard et d’une charte avec une personnalité très identifiable.

L’enjeu n’était donc pas de rendre le site plus neutre.

Cela aurait justement fait perdre une partie de l’intérêt de la marque.

Il fallait au contraire transformer cet univers en véritable interface web.

Concrètement, cela demandait de préserver :

• les couleurs ;
• les choix graphiques ;
• l’énergie du projet ;
• les formes ;
• les associations visuelles.

Mais il fallait simultanément construire :

• une navigation compréhensible ;
• des pages suffisamment aérées ;
• une hiérarchie claire ;
• des contenus faciles à parcourir ;
• une expérience cohérente sur mobile.

Ce type de projet m’intéresse particulièrement parce qu’il montre qu’une identité originale n’empêche absolument pas la simplicité d’utilisation.

Elle demande simplement davantage de maîtrise pour savoir quels éléments doivent parler fort et quels éléments doivent rester plus discrets.

Ma méthode pour construire un univers graphique destiné au web

Chaque projet demande évidemment une approche différente, mais je retrouve plusieurs étapes dans ma manière de travailler.

1. Comprendre la marque

Je cherche d’abord à comprendre son positionnement, ses valeurs, son public et l’image qu’elle souhaite transmettre.

2. Analyser les codes existants

Je regarde ce que font les concurrents et les acteurs proches du secteur.

L’objectif n’est pas forcément de suivre ces codes, mais de les connaître avant de décider de s’en éloigner.

3. Chercher des références plus larges

Je recherche aussi des inspirations dans d’autres univers afin d’éviter de rester enfermée dans les solutions les plus évidentes.

4. Construire un moodboard

Je rassemble les références qui commencent à créer une direction cohérente.

Le moodboard permet ensuite de discuter avec le client avant de pousser trop loin la conception.

5. Définir les éléments identitaires

Couleurs, typographies, formes, traitements graphiques, iconographie, photographie ou illustrations commencent à former un système.

6. Tester cet univers sur de vrais contenus

Une identité peut être très réussie dans une présentation de trois pages et beaucoup moins convaincante lorsqu’elle doit accueillir :

• un menu ;
• 1 000 mots de contenu ;
• un formulaire ;
• un tableau ;
• une FAQ ;
• une fiche produit ;
• une version mobile.

C’est pour cela qu’il est essentiel de la tester rapidement dans de véritables interfaces.

7. Construire les wireframes et maquettes

Identité et structure peuvent alors évoluer ensemble jusqu’à obtenir le bon équilibre.

C’est cette complémentarité que nous recherchons également dans notre prestation de conception UX/UI et expérience utilisateur.

8 erreurs fréquentes lorsqu’on crée une identité visuelle pour le web

1. Commencer par Pinterest avant de comprendre la marque

L’inspiration est utile, mais elle doit répondre à une direction.

Sinon, on risque simplement de reproduire les tendances que l’on voit le plus souvent.

2. Choisir une tendance plutôt qu’une identité

Une tendance peut constituer une référence intéressante.

Elle ne doit pas devenir la seule justification d’un choix graphique.

3. Utiliser trop de couleurs fortes au même niveau

Plusieurs couleurs très expressives peuvent fonctionner ensemble, mais elles doivent avoir des rôles définis.

4. Utiliser une typographie décorative partout

Ce qui donne du caractère à un titre peut rendre quinze lignes de texte presque impossibles à lire.

5. Faire disparaître les codes d’interface

Un élément original doit rester compréhensible.

Une personne ne devrait pas avoir à deviner qu’un texte est un bouton.

6. Créer uniquement la version desktop

Une direction graphique doit être capable de fonctionner lorsque l’espace devient beaucoup plus réduit.

7. Ne pas prévoir les contenus réels

Une maquette remplie de textes courts parfaitement calibrés peut s’effondrer lorsque les véritables contenus arrivent.

8. Créer un logo sans penser à son écosystème

Une identité doit pouvoir être déclinée sur le site, les réseaux sociaux et les différents supports de communication.

Quand faut-il faire évoluer son identité visuelle ?

Une identité n’a pas besoin d’être entièrement remplacée tous les trois ans pour suivre les tendances.

Une bonne identité doit au contraire pouvoir durer.

Mais certains signaux peuvent justifier une évolution :

• la marque a changé de positionnement ;
• l’entreprise vise un nouveau public ;
• son offre a fortement évolué ;
• les différents supports ne sont plus cohérents ;
• le site donne une image beaucoup plus ancienne que l’entreprise réelle ;
• la charte actuelle fonctionne mal sur les supports digitaux ;
• les couleurs ou typographies créent des problèmes de lisibilité ;
• l’identité ne permet plus de se différencier.

Dans ces situations, il n’est pas toujours nécessaire de repartir de zéro.

On peut parfois conserver les éléments les plus identifiables et moderniser le reste.

Notre article sur la différence entre refonte graphique et refonte technique permet également de mieux comprendre ce qui peut être concerné lors de la transformation d’un site existant.

Ma checklist avant de valider une direction graphique

Avant de considérer un univers graphique suffisamment solide, je trouve utile de vérifier plusieurs points.

• La personnalité : l’univers transmet-il réellement quelque chose ?
• La pertinence : correspond-il à la marque plutôt qu’aux goûts du designer ?
• La différenciation : peut-on distinguer cette marque de ses principaux concurrents ?
• La cohérence : couleurs, typographies, images et formes semblent-elles appartenir au même univers ?
• La hiérarchie : sait-on immédiatement ce qui est important dans une page ?
• La lisibilité : les textes restent-ils confortables à lire ?
• L’accessibilité : contrastes et éléments interactifs fonctionnent-ils correctement ?
• La flexibilité : l’identité peut-elle fonctionner sur plusieurs formats ?
• Le mobile : conserve-t-elle sa personnalité sur un petit écran ?
• Les contenus : fonctionne-t-elle avec de véritables textes et de vraies images ?
• La durée : repose-t-elle uniquement sur une tendance très ponctuelle ?

Une identité n’a pas besoin d’être parfaite sur tous les supports dès la première esquisse.

Mais elle doit donner suffisamment de matière pour pouvoir évoluer sans perdre sa cohérence.

FAQ : identité visuelle, webdesign et expérience utilisateur

Qu’est-ce qu’une identité visuelle ?

L’identité visuelle correspond à l’ensemble des éléments graphiques permettant d’identifier une marque : logo, couleurs, typographies, formes, iconographie, photographies, illustrations, compositions et principes de mise en page.

Quelle est la différence entre un logo et une identité visuelle ?

Le logo est l’un des éléments de l’identité visuelle. Une identité complète définit également la palette de couleurs, les typographies, le traitement des images, les éléments graphiques et les règles permettant de conserver une communication cohérente sur différents supports.

Qu’est-ce qu’une charte graphique ?

Une charte graphique formalise les règles d’utilisation de l’identité visuelle. Elle peut préciser les variantes du logo, les couleurs, les typographies, les usages autorisés ou interdits, l’iconographie, les compositions et les principes de déclinaison.

À quoi sert un moodboard ?

Un moodboard rassemble des références visuelles permettant de définir et partager une direction créative. Il aide le designer et le client à aligner leur compréhension d’un univers avant de finaliser les choix graphiques.

Une identité visuelle très colorée peut-elle fonctionner sur un site professionnel ?

Oui. Une palette très colorée peut parfaitement fonctionner si les couleurs sont hiérarchisées, que les textes restent lisibles et que les actions importantes sont clairement identifiables. La quantité de couleurs est moins importante que la cohérence de leur utilisation.

Un site minimaliste offre-t-il forcément une meilleure UX ?

Non. Une interface visuellement simple peut malgré tout être difficile à comprendre. De la même manière, une interface riche graphiquement peut être très facile à utiliser si sa hiérarchie et ses interactions sont correctement conçues.

Faut-il suivre les tendances webdesign ?

Les tendances sont intéressantes comme sources d’inspiration, mais elles ne devraient pas déterminer seules une identité. Une direction graphique doit avant tout correspondre à la marque, à son public et au message qu’elle souhaite transmettre.

Identité visuelle et UX doivent-elles être travaillées ensemble ?

Oui. Les choix visuels influencent la hiérarchie, la compréhension, la lisibilité et la perception de l’interface. Travailler identité visuelle et UX ensemble permet de préserver la personnalité de la marque sans compliquer le parcours de l’utilisateur.

Sources et ressources pour aller plus loin

• Nielsen Norman Group – The Aesthetic-Usability Effect : sur l’influence de l’esthétique dans la perception d’une interface.
• W3C – Concevoir pour l’accessibilité Web : bonnes pratiques concernant contrastes, couleurs, navigation, composants et responsive design.
• W3C – Des couleurs bien contrastées : explications sur l’importance des contrastes dans les interfaces.
• Figma – How to make a mood board : méthode et usages du moodboard dans un projet de design.
• Figma – What is a style guide? : rôle d’un guide de marque dans la cohérence d’une identité.

À lire également sur TooNetCreation

• Création d’identité visuelle et charte graphique
• Conception UX/UI et expérience utilisateur
• UX et UI : quelles différences et pourquoi les deux sont indispensables à un site web ?
• Accessibilité web et design : non, un site accessible n’est pas forcément moche
• Refonte graphique vs refonte technique : quelles différences ?
• Nos réalisations web et identités visuelles