Slidesgo / FreepikCréer son identité visuelle, ou sa chartre graphique, est une façon de codifier et de représenter une personnalité, un caractère ou un message. C’est un ensemble de règle qui vient construire votre identité graphique, et qui facilite son identification, tout en véhiculant un propos.
L’un des objectifs d’une chartre graphique est de conserver une cohérence visuelle dans vos réalisations. Elle définit les couleurs, les formes et les typographies à utiliser. Elle indique la taille, l’emplacement, le logo, voire même les caractéristiques d’impression. En un sens, c’est un outil qui vous permet de transmettre un contenu fidèle à votre discours.
ÉTABLIR UNE PALETTE DE COULEURS
1. Créer d’harmonieuses associations
À en croire une citation de David Swanson (auteur Américain et activiste anti-guerre), « nous n’aurions jamais une deuxième chance de faire une bonne première impression ». Le marketing complète et quantifie cette donnée : 90 secondes suffisent pour se forger une opinion sur un produit ou sur une marque. Mieux encore, la couleur serait le principal élément influençant notre jugement.
Élément fondamental d’une charte graphique, une palette de couleurs est un nuancier de différentes teintes. Elle doit être cohérente, distinctive et personnelle. Généralement composée de cinq couleurs (c’est un standard, et il est tout à fait possible d’utiliser une palette de trois à dix teintes – même si comme partout, la simplicité est reine), elle est structurée autour d’une couleur dominante, d’une couleur secondaire et d’une couleur d’accent, avec des proportions d’utilisation différentes : respectivement 60, 30 et 10 % sur vos éléments graphiques. Les couleurs d’accents sont les plus contrastées et visibles, mais c’est le choix de votre couleur dominante qui impact l’ensemble.
Sous ces règles, un design web traditionnel utilisera une couleur dominante pour des bandeaux, titres, ou icônes. La couleur secondaire s’utilisera pour des liens hypertexte, des boutons d’action ou de contrôle. Les arrière-plans eux, sont souvent de couleur neutre. Observez les exemples proposés sur le site Happy Hues pour appréhender au mieux l’usage des couleurs sur une interface web.
Il existe plusieurs façons de créer votre palette de couleurs. Le plus simple est d’utiliser des schémas déjà établis : Coolors est une plateforme très populaire, même si j’ai une préférence pour Color Hunt (j’y ai même trouvé la palette de Parlons Théâtre). Flat Color est aussi bien sympathique malgré son choix limité, et HailPixel est plutôt rigolo.
Vous pouvez générer votre palette par d’autres méthodes, et, par exemple partir d’une image, puis identifier et utiliser les nuances qui la compose. Voici un article affichant de très bons exemples utilisant ce procédé. Ce site web propose par ailleurs un outil pour exploiter vos propres photos (attention ce n’est pas une solution parfaite, la palette générée ne sera pas entièrement fidèle aux nuances réelles utilisées lors de sa conception). Maintenant, si vous souhaitez à l’inverse partir d’une couleur pour trouver des images correspondantes, je vous suggère l’utilisation de Design Inspiration.
Nommer correctement une couleur en conception
En design, les couleurs sont exprimées par un système hexadécimal. C’est un ensemble de 7 items, commençant par un # et suivi d’une série de chiffres et de lettres (comprises entre A et F).
Si en société il sera commun de dire : « J’aime le rose et l’orange », un décorateur d’intérieur vous contera que : « Le saumon se marie très bien avec l’abricot (et que c’est hyper tendance) », tandis que l’austère informaticien vous formulera : « #FF00FF *bip-bip* #FFA500 ». Bref, on s’y fait.
POUR ALLER (BEAUCOUP) PLUS LOIN :
Il est possible de créer sa palette manuellement, teinte après teinte. C’est une option à envisager si vous avez déjà fait le choix d’une couleur dominante bien précise. C’est cependant un procédé fastidieux que je vous déconseille, sauf si vous êtes d’humeur curieuse ou acharnée.
Pour ce faire, vous allez devoir recourir à un « cercle chromatique ». C’est une représentation schématique et ordonnée de douze couleurs sous la forme d’une roue. Il fut théorisé pour la première fois par Newton en 1666 puis repris, et amélioré plusieurs fois au cours des siècles. (Goethe, Maxwell, Hering et d’autres illustres érudits ont contribué au développement de cette théorie des couleurs).
On y retrouve les couleurs primaires, secondaires et tertiaires. Notez que le blanc et le noir n’apparaissent pas sur la roue : ce ne sont pas des couleurs à proprement parler, mais plutôt une somme ou une absence de couleurs. Ci-dessus une représentation du cercle chromatique par Johannes Itten (1961).
Le cercle chromatique est utile pour comprendre les relations entre chaque couleur. Vos palettes ont leur propre personnalité, et selon l’effet recherché on utilise différents principes d’associations. Par exemple, avec un mélange traditionnel en monochromatique, on souhaite un rendu épuré et harmonieux. Ce résultat est très simple à produire : on emploie uniquement des tons clairs et foncés.
Au contraire, avec une palette complémentaire, on exploite des couleurs très contrastées dont l’opposition amènera énergie et vigueur ; tandis qu’une combinaison analogue recherche des couleurs adjacentes apportant de l’équilibre et un faible contraste.
L’équerre ou « split-complementary » est un mix entre couleurs adjacentes et complémentaires : on associe une couleur avec les deux couleurs adjacentes à sa couleur complémentaire.
Enfin, la triade est une combinaison de trois teintes espacées de manière égale et triangulaire sur le cercle chromatique. En résulte des associations souvent très colorées et vivantes.
Plus vous avez de couleurs dans votre palette, et plus il sera difficile de l’équilibrer.
Il existe d’autres mélanges possibles mais voici les principaux.
Pour réussir vos différents mariages de couleur en réutilisant ces principes, la Color Wheel d’Adobe est le meilleur outil gratuit accessible sur le marché.
2. Couleurs & Symbolisme
Chaque couleur possède peu ou prou son interprétation, et, au gré d’influences culturelles, génère différentes émotions chez l’être humain. Par exemple les teintes chaudes véhiculent un message énergisant, extraverti et dynamique, tandis que les couleurs froides donnent une impression plus distante, sereine et mesurée.
Mais à dire vrai, on trouve surtout de tout et son contraire : le rouge est attirant mais dangereux, le vert est apaisant mais mortel, le bleu évoque à la fois la sérénité et la dépression, le blanc exprime aussi bien l’innocence que la solitude. Fait amusant, en Amérique on a même construit des prisons en rose pour calmer les détenus.
Couleurs chaudes et joyeuses (© MWart) // Couleurs froides et tristes (© Marrieta)
Comme toujours, c’est avant tout une histoire de contexte, d’objectifs et de cible. Certes, chaque couleur correspond à une « humeur », mais son caractère peut être interprété différemment selon l’âge, le sexe, et la location d’un individu. Si aux États-Unis, le vert est la couleur du dollar, en Europe, l’argent sera plutôt de couleur jaune. De plus, une couleur perd sa symbolique individuelle lorsqu’elle est juxtaposée à d’autres, l’arc-en-ciel étant un parfait exemple.
Mais aussi et surtout, une couleur est codifiée par un secteur d’activité et son environnement. Le vert évoque évidemment la nature et par voie de fait l’écologie. Le blanc symbolise la propreté, on le retrouve dans nos produits hygiéniques. Pour ce qui nous concerne au Théâtre, on attendra traditionnellement du rouge mais aussi du noir, de l’or, du brun ou du violet.
La Colline, théâtre résolument contemporain, tranche avec ce traditionalisme en choisissant le bleu comme couleur dominante. Antonyme principal du rouge, il apporte ici une sensation de rupture, de modernité et de jeunesse.
Difficile donc, de créer avec certitude des associations universelles et intemporelles entre couleurs et sentiments. Certains se prêtent néanmoins au jeu, comme cette conférence TED sur « Le pouvoir des couleurs », utile si vous souhaitez approfondir ce domaine. Restons-en de notre côté à quelques évidences, dont voici les plus génériques dans notre culture occidentale Européenne :
Rouge : Couleur d’intensité, d’action, et de vigueur, le rouge exprime passion, amour, sensualité, et excitation tout comme le danger, la violence et la colère. Symbolisant l’idée de puissance et de domination, c’est l’une des couleurs chaudes captant le mieux l’attention. En webdesign, elle apparait souvent sur des boutons d’appel à l’action.
Jaune : Si historiquement le jaune représente la couleur des dieux et des rois, elle est aujourd’hui synonyme d’optimisme, de bonheur et de joie. C’est une couleur lumineuse et attirante. Pour être apparent, le jaune a besoin de contraste fort, et se marie plutôt bien avec des tons sombres. C’est une couleur symbolisant l’espoir, la gaieté, et la créativité. Elle se retrouve quotidiennement dans nos émoticônes et smileys.
Bleu : Populaire et très apprécié, le bleu est une couleur froide à l’humeur calme et tranquille. Fortement liée aux notions de responsabilité et de confiance, elle évoque les idées de professionnalisme, d’expertise, et d’autorité. À titre d’exemple, c’est la couleur principale choisie par l’ONU. Pour l’anecdote, le « bleu de Prusse » est réputé pour être une couleur peu salissante, et donnera naissance quelques années plus tard aux célèbres « bleu de travail ».
Orange : Couleur phare du design des années 70, l’orange invite à la communication et au divertissement. Vibrante, c’est une couleur chaleureuse, énergique, joyeuse et positive. Symbole de partage et de confort, c’est toutefois une couleur mal-aimée, se mélangeant assez mal avec d’autres teintes. Par ailleurs, tout comme le rouge, cette couleur est réputée pour stimuler l’appétit.
Vert : Le vert est une couleur plutôt autonome et équilibrée, représentant la croissance, le développement et le renouveau. C’est une teinte relaxante, associée au repos et à la fertilité.
Violet : Pleine de délicatesse et d’élégance, le violet est une couleur mystérieuse, empreinte de spiritualité, de noblesse et de romance.
Rose : Caractéristique de la féminité et de la nudité (même si avant le XVIIIe siècle, le rose fut un attribut masculin), cette couleur est aussi une figure d’enfance, d’allégresse et d’énergie. Tirée à l’extrême, elle évoque la naïveté ou un idéalisme excessif.
Brun : Auparavant liée à la pauvreté et à la saleté, le marron se traine une sale réputation, premier sur le podium des couleurs les plus détestées dans notre culture occidentale. Néanmoins, couleur du bois et de l’automne, le brun désigne le terroir, la gourmandise et l’authenticité. Brut, il appelle à la solidité, au pragmatisme, et à l’honnêteté. Il se marie très bien avec des couleurs chaudes comme l’orange et le jaune.
Gris : Neutre, le gris est une couleur de sérieux, de force et de longévité. C’est une couleur discrète et sobre qui peut signifier un esprit formel, classique et conservateur.
Noir : Dans notre culture contemporaine, le noir est très nettement associé au deuil, aux ténèbres et à la mort. En design, il suggère la sobriété, le luxe, ou la puissance. Discrète et minimaliste, c’est une teinte qui inspire profondeur et élégance. Assemblée au blanc, elle exprime l’opposition.
Blanc : Influencé par une forte empreinte religieuse, le blanc est une couleur liée avant tout au divin : ce qui est blanc est pur et innocent. Clair et simple, il s’associe très bien avec d’autres teintes. Utile pour créer du contraste ou mettre en valeur des tracés, il est couleur d’hygiène et de tranquillité. Son usage abusif donne cependant une impression de stérilité, de vide, de froid et de solitude.
N’hésitez pas à varier la « valeur » de vos couleurs. De base, une teinte est considérée comme « pure ». Vous pouvez ajouter du blanc pour l’éclaircir, ou au contraire l’ombrager en y ajoutant du noir. Vous pouvez varier les tons en y ajoutant du gris, où à l’inverse tirer vers le centre d’une couleur par l’usage de la saturation. Quoi qu’il arrive, « l’expressivité » d’une couleur ne doit pas supplanter la lisibilité et compréhension de vos affichages.
La perception de la couleur est relative. Sur papier ou sur écran, en fonction de la lumière ou de l’environnement, l’œil humain reçoit différemment chaque variation. Convertir les couleurs d’un support à l’autre demande une calibration précise. Sur écran la couleur est composée de pixels, tandis que sur format papier on parlera de pigments.
CHOISIR SES FONTS
Sous leur apparente facilité, et s’il est vrai qu’une police d’écriture peut se suffire à elle-même, il est fascinant de découvrir que chaque font a une histoire, un caractère et un usage propre. Pour exemple, Garamond est la police par excellence des livres d’auteurs, uniquement puisqu’elle est « économe », la finesse de ses traits permettant d’économiser plus d’encre. Comic sans MS est la font la plus détestée au monde, dieu sait pourquoi. Enfin, Futura, grande star des années 50, est la police d’écriture choisie pour orner la plaque en aluminium posée sur la Lune en 1969. Plusieurs podcasts ou livres relatent les fonctions et l’usage des polices d’écriture au cours des siècles. La BNF a même un super dossier éducatif sur le sujet.
Toutefois, au-delà de certains effets de mode ou de considérations historiques, les polices d’écriture sont surtout porteuses de sens et peuvent facilement devenir emblématiques.
Associés à une police d’écriture, les couleurs, logos ou éléments sonores sont autant de repères identitaires forts.
Le domaine de la typographie se sépare en plusieurs familles. On retrouve les polices d’écritures « serif » (soit à empattements) qui sont considérées comme traditionnelles et classiques. À l’inverse, les fonts « sans serif » sont modernes et épurées. Les polices « cursives ou script » (avec un aspect très calligraphique) expriment élégance et légèreté, là où les fonts « monospace ou à chasse-fixe » (la largeur des caractères est fixe) traduisent une impression d’autorité et de clarté. Enfin certaines fonts « displays ou fantaisistes » apportent créativité et originalité.
Si les fonts serif sont considérées comme démodées, on sait cependant qu’elles sont plus faciles à lire, et idéales pour les contenus longs comme des articles papiers ou des livres.
Chaque police d’écriture possède son propre univers, sa propre humeur et personnalité.
En règle générale, un document ne doit pas contenir plus de trois familles de polices différentes. Il convient de choisir des polices d’écritures fidèles aux intentions recherchées, et dont l’ensemble fonde une association harmonieuse. C’est une activité chronophage, aidez-vous d’outils comme Fontjoy (pour rechercher des compositions satisfaisantes), ou de MixFont (pour trouver l’inspiration). Et si vous ne savez pas par où commencer, une bonne règle consiste à associer une police avec empattement (serif) avec une police sans empattement (sans-serif).
Bien sûr, rien ne vous interdit de varier la taille, l’espacement, l’orientation, l’épaisseur, et soyons fou la couleur de vos blocs de texte. Vos effets de contraste apportent ainsi du dynamisme à votre design. Enfin la lisibilité est capitale, pensez à créer une hiérarchie visuelle, et à soigner vos interlignes en fonction de la taille de votre support.
Si le choix de vos polices d’écriture concerne également un blog, retenez ces trois règles supplémentaires :
* L’espace entre chaque ligne de texte est au minimum égal à la taille de vos caractères
* Indiquez une taille minimum de 16 pixels pour votre corps de texte
* Ne justifiez pas votre texte
Typiquement dans cet exemple, la police d’écriture est complètement déstructurée. Son style sans-serif et sa répétition facilitent sa lecture, mais c’est l’usage des diagonales qui donne du sens au visuel. On y perçoit une sensation de mouvement, d’énergie et de vie, corolaire à l’esprit du Living Theatre.
Il existe plusieurs librairies de police en ligne dont les plus connues sont Dafont, FontSpace et Google Fonts. Si leur utilisation est majoritairement gratuite, leur usage commercial peut être soumis à des licences spécifiques, soyez précautionneux. (Si vous cherchez à installer une police sous Windows, voici un tutoriel).
De même, vérifiez l’existence d’accents, de symboles et de chiffres avant de faire votre choix. Enfin, pour retrouver des polices d’écritures directement à l’aide d’une image, utilisez l’outil WhatTheFont! ou pour la créer vous-même à partir d’une écriture manuscrite, utilisez Calligraphr.
DÉFINIR UN STYLE ET DES FORMES
Si l’usage des couleurs et des typographies est commun sur tout types de supports confondus (affiches, flyers, sites web, etc…), les formes elles, se font nettement plus discrètes. Ce qui au fond est assez logique : dans la majorité des cas, elles servent un contenu avant de servir une pensée. Elles habillent et structurent un affichage, mais n’existent que très peu en tant qu’entités autonomes.
Soyons cependant précis sur l’usage des termes et distinguons la « forme géométrique » d’une « reproduction graphique ». Inutile d’affirmer qu’un cœur représente l’attachement et l’amour, ou que deux ovales et une courbe forment un smiley. Une représentation, même très stylisée, se suffit à elle-même. Si vous dessinez un arbre, sa signification est universelle, admise et comprise par tous. Des couleurs jusqu’aux formes, la même logique s’impose : l’interprétation des formes et de leurs associations dépendent de votre audience, d’un contexte et de vos objectifs.
Sur cet exemple, chaque élément visuel est très distinct. La police d’écriture structure et éclaircit le livret. Leur palette est composée de trois teintes, et le contenu des spectacles est évoqué par des formes minimalistes. (Théâtre Périscope – 2017–2018 © Commarts)
Si l’on reprend néanmoins le dessin de notre arbre, il existe mille façons de le représenter. Entre un graphisme minimaliste, détaillé, abstrait, « dessiné à la main », en low-poly, et que sais-je encore, c’est le choix d’un style qui définit votre identité. Chaque tracé est unique et renforce la singularité de votre chartre graphique. Réutilisé sur vos supports de communication, il donne de la consistance et de la cohérence à vos visuels.
Outre l’usage du rouge, couleur dominante des salles de théâtres, et d’une police serif, plutôt classique et sérieuse, les visuels du théâtre du Rond-Point ont un style très identifiable. Sous la ligne du dessinateur Stéphane Trapier, tout leurs affiches reprennent les mêmes codes hiérarchiques et graphiques.
L’usage des formes géométriques est plus subtil. Souvent employées pour identifier, contraster ou hiérarchiser un contenu, leur symbolique reste assez approximative, et il est rare de s’entendre dire : « Holala, voici un carré magnifique qui évoque chez moi une impression de sérieux et de professionnalisme ». Tandis qu’à l’inverse, il est plus courant d’aimer ou de détester une couleur voire une typographie.
À dire vrai, les rares cas où une forme géométrique porte une symbolique, c’est de par son usage dans un logo graphique. Bien qu’elle soit toujours transformée ou atténuée, on associe inconsciemment certaines figures à des univers distincts. Par exemple, on décèlera plus de formes courbées au sein d’environnements créatifs et artistiques que dans un secteur bureaucratique et mercantile. Autre domaine, les triangles sont fortement lié à la construction, évoquant souvent le toit d’une maison ou des pyramides de Gizeh.
SYMBOLISME ET USAGE DES FORMES GÉOMETRIQUES DANS UN LOGO
Il est difficile d’établir des associations entre formes et symbolisme/personnalité, sans tomber dans des analogies un peu foireuses. Néanmoins, il existe certains principes qu’il est bon de rappeler ici :
- Un tracé droit symbolise la simplicité et la rigueur, tandis qu’une courbe est plus délicate et légère. Elle apporte un peu plus de rythme et de mouvement, alors qu’au contraire, une droite confère un sentiment d’équilibre et de stabilité. Son inclinaison est décisive : À l’horizontale, elle est plate et calme. À la verticale, elle est rigide et puissante. Enfin selon sa direction, une diagonale représente une progression ou une régression.
Par exemple, la fameuse virgule de Nike est courbée et pointe vers le haut -> elle illustre le mouvement et le dynamisme. Son épaisseur est très caractéristique : sa base est lourde et épaisse, mais elle s’affine en remontant, ce qui est supposé représenter l’aile de Niké, la déesse grecque de la victoire.
- Les formes dérivant d’une ligne droite sont de surcroit souvent reliées à des idées de discipline, d’autorité ou de sérieux. On y retrouve le carré, le rectangle, et le triangle (également lié à la réussite) souvent utilisés dans les domaines bancaires, du bâtiment ou des assurances. Quant au losange, il est généralement interprété comme une forme protectrice, symbolisant le partage ou la transmission.
- Dans la même veine, et culturellement relié aux frontières Françaises, on découvre l’hexagone. En outre relatif à une alvéole d’abeille, on lui associe des valeurs d’organisation ou d’effort collectif. (La Comédie-Française n’aurait-elle pas d’ailleurs une ruche comme emblème, à l’image « d’une institution foisonnante » ?)
- Plus une forme est complexe, plus elle s’apparente à un univers technique. Les polygones se logent dans les milieux scientifique, logistiques ou autres univers à grande technicité.
- La courbe amène des formes douces, rondes et naturelles, moins intimidantes et plus chaleureuses que les formes angulaires. Le cercle par exemple, est un symbole d’unité et d’harmonie. La spirale fait figure d’introspection, de mystère ou d’énergie convergente, tout en étant associée bien évidemment à l’hypnose. Le demi-cercle enfin, exprime l’opposition entre deux antonymes.
Voici deux logos où l’usage de la forme est prédominant. À gauche, celui du théâtre de la Bastille. À droite, celui de la Comédie-Française, modernisé sous la régence d’Eric Ruf en 2015. Les deux réutilisent la couleur traditionnelle rouge ainsi que la forme du cercle.
Le logo du théâtre de la Bastille réunit sa lettre capitale avec la figure d’un homme dansant, dénotant ainsi l’attachement de ce théâtre à la chorégraphie. Le tracé est assez brut, artisanal appuyant l’idée de vie, de création et d’énergie.
L’iconique logo de la Comédie Française, souvent confondu pour une cible, est en fait « une cocarde », une forme par nature très patriotique, que l’on retrouve également dans les forces aériennes nationales. Rien que ce point exprime la valeur de ce théâtre comme l’une des institutions culturelles majeures de la France.
Mais son symbolisme est plus profond encore. Déjà sa forme s’inscrit dans la continuité de son prédécesseur marquant une évolution plus qu’une brutale transformation. Le cercle nous apporte une impression d’unité et de cohésion, inhérent à cette représentation qu’est « la grande famille » de la Comédie-Française. De plus, à la différence d’une cocarde traditionnelle, son centre est laissé vide et n’est pas rempli. Ce petit cercle, indépendant et autonome, placé à l’intérieur d’un plus grand cercle renvoie implicitement à leur devise : « être ensemble et rester soi-même ».
Au fond, il est presque banal d’affirmer qu’une ligne droite ne porte pas le même sens qu’une courbe. Ne serait-ce qu’en danse par exemple, un mouvement rond trace une histoire différente qu’un mouvement anguleux. Et si les chemins de notre corps sont multiples et variés, il en va de même pour le design. Vous pouvez tordre toutes les formes selon votre imagination : variez les styles de tracés, mélangez droite et ligne courbée, croisez les figures entre elles, épaississez ou affinez, jouez sur l’horizontalité ou la verticalité d’un élément. Bref, une forme est diverse, son usage multiple, et sa signification hétérogène.
N’oubliez pas que l’on étudie ici la création d’une identité visuelle ; l’usage des formes est complètement différent si vous réalisez une interface web. Certes, donner du sens et de la cohérence est important, mais à chaque format ses priorités. Par exemple, un site ou une application se contrefichent pas mal de la symbolique des formes, et vont se focaliser sur l’expérience et le confort de leurs utilisateurs.
Gardez à l’esprit que ces différentes règles ne sont pas une doctrine. Le design est aussi et surtout une affaire d’intuition. Prenez vos distances avec les conventions, et expérimentez. Si en résultat vos visuels ne vous conviennent pas, retournez chercher l’inspiration dans la symbolique ou les codes de composition. Partir des normes pour mieux les détourner, échapper aux règles, et mélanger théorie et créativité, c’est là où réside tout l’art du graphisme. Je vous laisse avec un court article et podcast sur la refonte de l’identité visuelle de Châtelet, avant de vous inviter à lire le dernier article de cette série sur le design graphique.
ÉCRIT PAR : Benjamin
Double parcours en communication et théâtre, je passe mon temps à étudier et à produire des contenus pour Parlons Théâtre. On peut se croiser à la bibliothèque, au théâtre, ou autour d’un verre.
Marta_RB 
Laisser un commentaire
Rejoindre la discussion?N'hésitez pas à contribuer !