Article 1/5 : Charte et définition

 

Intro.

Bienvenue dans cette suite d’articles dédiés à la création d’une application pour une compagnie aérienne et destinée au mode METRO de Windows 8. Le but ici est de couvrir tous les aspects créatifs de la conception, du prototypage et de la réalisation de l’application, tout en conservant une approche  « Designer ». Le premier volet de cet ensemble traite de la demande du client, de la définition du besoin et de la réalisation de la première brique créative : La fameuse charte graphique.  

 

Le client, ce qu’il est, son contexte, sa demande.

 Soyons clair tout de suite, ce client est purement fictif. C’est un exemple. REEDAIR est une compagnie aérienne low-cost nord-américaine, s’implantant en Europe dans divers pays. Le marketing se veut agressif  pour
s’implanter sur un marché délicat, déjà encombré de plusieurs offres concurrentes. La cible-public est la jeunesse (15-30 ans), avec une proposition de valeur centrée sur la rapidité, les lignes desservant les villes
estudiantines en Europe et une valorisation spécifique d’avantages liés à l’âge et aux cartes de fidélité.

Le mode de communication est agressif, volontariste, innovant. Cependant, la compagnie ne veut pas répéter son message adapté au marché U.S. et investit pour avoir une approche de l’Europe spécifique et pertinente. Puisque la cible est la jeunesse, l’approche Windows 8 sur tablette est naturelle et cohérente. REEDAIR demande donc une charte applicable à ces nouveaux enjeux, et une application en accord avec la philosophie METRO, bien qu’axée sur son mode de communication.

Encore une fois, REEDAIR est une compagnie fictive.

 

En première analyse.

 Le but de tout designer est de composer un schéma mental qui soit en accord avec ce que son client direct perçoit de lui-même, ce que le client direct perçoit de ses propres clients, et ce que le client final perçoit  du  client direct. Lorsque cette combinaison est atteinte, la carburation est parfaite. Généralement, tout commence par un ensemble d’assets graphiques. Pour débuter, nous allons choisir un ensemble de couleur, une dominante et des couleurs associées afin de définir un ensemble de nuances propres à représenter le contexte du client. Dans cet exemple, la couleur rouge est assez facilement trouvée, puisqu’elle est à la fois agressive, jeune,évoque la fougue, et propose certains marqueurs qui plaisent à la jeunesse (danger, chaleur). Avec en prime, bien sûr, le jeu de mot évident. Mais proposer du rouge n’est pas en soi suffisant, puisqu’au sein d’une même couleur, il faut
isoler celle qui est propice au discours du client. Trop Lie-de-vin et l’on tombe dans le classieux, trop rose et l’on devient Magenta, trop jaune et l’on devient orange.  Voici un exemple de nuances de rouges, hérités des standards Pantone, qu’il vaudra mieux vérifier sur plusieurs écrans afin de s’assurer que la couleur « perçue » reste conforme à la demande du client. 

La couleur qui « sort » le mieux de l’exercice est probablement la septième (deuxième rang, deuxième colonne), puisque les autres se décalibrent trop vite (trop de rose ou trop d’orange), sont trop saturées (attention à la
saturation en vidéo), ou sont trop fades. Pour mémoire, le rouge pur (255,0,0en rgb) se trouve en dernière colonne, premier rang.

 

La charte graphique.

Nous avons trouvé la couleur primaire de notre client. La suite du travail consiste à fournir les autres assets graphiques qui vont compléter ce premier jet :

Couleur : Pantone1795PC ; RGB 224, 27, 38 ; CMJN 2, 96, 90, 1 ; TSL 357, 88, 88 ; EXA #e01b26 ; Palette web #cc3333 ; TRUMATCH 4-a

 

Couleur d’accentuation : Ce sont les couleurs retenues pour venir compléter la couleur primaire.

 

Notez comment l’on ajoute des couleurs et des tonalités qui viendront compléter les visuels. Le bleu, par exemple est un cas typique d’opposition chromatique (couleur froide, par opposition au rouge –couleur chaude) mais sans tomber dans l’excès de la couleur complémentaire (le vert, en l’occurrence).

Code couleur du bleu principal : Pantone 2727 PC; RGB 27 152 224; CMJN 74 29 0 0; TSL 202 88 88 ; EXA # 1b98e0 ; Palette web # 3399cc ; TRUMATCH 33-a.

 

Mais que fait la police ?

Elle représente la partie rédactionnelle et éditoriale du métier de votre client, mais c’est elle aussi qui conditionne le logo, l’usage en impression, la mise en forme des messages, des accroches publicitaires, des flyers. Elle donne tour à tour un look moderne ou rétro, une grande lisibilité ou un aspect volontairement travaillé. Attention ici puisque la cible est une application sous Windows 8. Donc, en tenant compte de la dynamique du client et des restrictions et guidelines METRO, nous opterons assez naturellement pour une police sans empattement, de type Arial, Helvetica ou (forcément) Segoe UI.

Tout en présentant la police sélectionnée, il est de bon ton de définir également des scénarios d’usage, des recommandations (pas plus de 4 polices différentes par page, par exemple) et des interdictions (pas d’usage de polices empattées).

Voici le charting de la police de notre application : 

 

 

Le logotype

Etendard de votre marque, le logo doit être traité avec la plus grande attention, décliné, repris, tourné, inversé, vu dans la lumière et dans l’obscurité, en grande définition et en basse définition. Bref, il doit être torturé jusqu’à en
extirper la quintessence, puisque, par définition, c’est le symbole, le totem de votre client. Il sera composé avec un logiciel vectoriel, afin de pouvoir en tirer une version imprimable et redimensionnable, quelle que soit la résolution
de sortie. Pour l’exemple, j’ai utilisé Expression Design, de Microsoft, excellent pour ses capacités et pour sa vitesse. Voici quelques exemples de réalisations:

  


 Le but est de donner ici une notion de flotte, de capacité. Mais toujours sans donner une impression négative. Donc, on évite les appareils qui « plongent », ou qui tombent. En l’occurrence, même si le premier logo est le plus
« jeune », dans l’esprit, le troisième vieillira sans doute moins vite. De la même manière que nous avons défini des usages pour les polices et les couleurs, il faut envisager de faire de même avec le logo sélectionné.

Utilisation possible :

 

 

Utilisation prohibée :

  

 

Mauvaises couleurs, logo incliné, négatif, etc.

On en profitera également pour définir un espace minimum pour ce logo afin qu’il puisse respirer au milieu d’un visuel.

 

Iconographie :

Enfin, il est de bon ton de mettre des exemples d’images significatives, représentatives ou simplement dans le ton de l’esprit que vous souhaitez transmettre. Un grand tour en mode « j’aime/j’aime pas » sur les sites populaires de banque d’images et vous devriez disposer d’une robuste collection vous permettant d’envisager les créations numériques ultérieures avec confiance. Bien entendu, il est conseillé de faire des recommandations positives ou négatives pour les images employées afin d’éviter certains champs iconographiques dangereux, inappropriés ou encore sensibles.

 

 

Conclusion

Enfin, on veillera à mettre tout ceci en forme et le présenter de la manière la plus flatteuse, et surtout, la plus réutilisable possible. Une grande attention sera portée à bien mettre en valeur la marque du client dans tous les usages possibles, afin que la charte puisse être la plus adaptable sur tous les supports concernés. Ainsi, on pourra proposer des usages pour le courrier (les cartes de visite, les lettres à entête,…), pour le web (bandeaux publicitaires, présence sur les réseaux sociaux,…), pour la vidéo (amorce de film, greetings, …), pour les applications interactives (mais cela, nous le verront dans le tome 2 de notre aventure).

Une charte graphique est prévue pour durer dans le temps. Cependant, Une marque « s’use » aujourd’hui plus vite qu’auparavant, notamment parce que les nouveaux médias ont tendance à engendrer un phénomène d’érosion plus rapide sur les brandings. On considère qu’une marque et son branding ont un cycle de vie d’environ 10 ans, mais c’est très dépendant de la marque en elle-même, de sa taille, de son empreinte émotionnelle. L’exemple de McDonalds récemment est assez édifiant, puisque le logo est passé de rouge à vert, afin de renforcer l’image positive que veut communiquer la marque. Un changement dans la continuité, en somme.