Créer et respecter une charte graphique

1. Objectifs

   • Définir la charte graphique et son utilité dans un projet.
   • Connaître son contenu type pour une application.
   • Suivre une démarche de création en six étapes.
   • Formaliser les règles en tokens de design partagés avec les développeurs.
   • Contrôler qu'un écran respecte la charte et faire évoluer la charte.

1. Qu'est-ce qu'une charte graphique ?

   • La charte graphique est le document qui rassemble toutes les règles visuelles d'une marque ou d'une application : logo, couleurs, typographie, icônes, visuels, composants.
   • Elle garantit la cohérence: quel que soit l'écran, le support ou la personne qui le réalise, l'usager reconnaît l'application.
   • Elle fait gagner du temps: les choix sont faits une fois, on ne les rediscute pas à chaque écran.
   • Elle sert de contrat entre designers et développeurs : « bleu » ne veut rien dire, « #2563EB, couleur-primaire » si.
   • Pour une application, on parle aussi de guide de style (style guide) ou, quand elle contient des composants réutilisables, de design system.

1. Que contient une charte ?

   • 1. L'identité: mission, valeurs, cible, personnalité. C'est ce qui justifie tous les choix suivants.
   • 2. Le logo: versions, zone de protection, taille minimale, usages interdits.
   • 3. Les couleurs: palette, rôles, codes (HEX, RVB), contrastes.
   • 4. La typographie: polices, licences, échelle, styles de texte.
   • 5. Les icônes: bibliothèque, style, tailles, libellés.
   • 6. Les visuels: style photo ou illustration, formats, droits, textes alternatifs.
   • 7. Les composants: boutons, champs, cartes, badges, barre de navigation, et leurs états (normal, désactivé, erreur).
   • 8. Le ton et les mots: façon de s'adresser à l'usager, lexique validé par les tests.

1. Construire une charte en six étapes

   • 1. Analyser: relire le brief, les personas, les résultats des tests ; analyser les applications concurrentes ; traduire les valeurs en mots-clés.
   • 2. S'inspirer: réaliser une planche de tendance (moodboard) qui fixe l'ambiance : couleurs, polices, images, formes, mots.
   • 3. Choisir: créer le logo, la palette, la typographie, le jeu d'icônes, le style des visuels. Chaque choix renvoie à une valeur.
   • 4. Formaliser: chiffrer chaque règle, créer les styles et les variables dans Figma, et les tokens.
   • 5. Appliquer: réaliser les maquettes en couleurs des écrans clés à partir des wireframes testés.
   • 6. Faire vivre: partager la charte, contrôler les écrans, la mettre à jour avec un numéro de version.

1. Des règles aux tokens de design

   • Un token de design est une règle de la charte sous la forme nom → valeur: couleur-primaire → #0E7C66, taille-corps → 16 px, rayon-bouton → 8 px.
   • Le nom décrit le rôle, pas l'apparence : couleur-erreur plutôt que rouge. Si l'erreur devient orange un jour, le nom reste juste.
   • Dans Figma, les tokens deviennent des variables et des styles (couleurs, textes, effets) appliqués à tous les écrans.
   • Dans le code, ils deviennent des variables CSS ou un thème (Flutter, Angular…). Les développeurs reprennent les mêmes noms.
   • Changer la valeur d'un token change tous les écrans qui l'utilisent : la charte est appliquée partout, sans oubli.

:root {
  --couleur-primaire: #0E7C66;        /* boutons principaux, prix, liens */
  --couleur-primaire-texte: #FFFFFF;  /* texte posé sur la primaire : 5,13 : 1 */
  --couleur-texte: #1F2937;
  --police-texte: 'Inter', sans-serif;
  --taille-corps: 16px;
  --rayon-bouton: 8px;
  --espace: 8px;                      /* toutes les marges sont des multiples de 8 */
}

1. Respecter la charte

   • Une charte n'est utile que si elle est appliquée. Les écarts viennent rarement d'une mauvaise volonté, mais d'une règle absente, floue ou introuvable.
   • Montrez les erreurs à éviter, pas seulement les bons exemples : un bouton principal par écran, les couleurs de la palette uniquement, les styles de texte de l'échelle.
   • Rendez la charte facile à suivre: composants et styles prêts dans une bibliothèque Figma partagée, tokens dans le code. Ce qui est prêt à l'emploi est utilisé.
   • Avant de livrer un écran, passez-le à la grille de conformité. Chaque « non » devient une correction, comme un problème d'utilisabilité au TP 6.

1. Faire évoluer la charte

   • Une charte n'est pas figée : les tests avec les usagers, les nouvelles fonctions et les retours des développeurs la font évoluer.
   • Chaque modification reçoit un numéro de version (1.0, 1.1…), une date et une ligne d'explication dans un historique.
   • Une évolution passe par la charte avant les écrans : on ne crée pas une nouvelle couleur directement dans une maquette.
   • Versionnez les fichiers de la charte avec Git, comme le reste du projet : le dépôt garde l'historique de chaque décision.

1. Activités

1. Erreurs fréquentes

1. Bilan

   • La charte graphique rassemble toutes les règles visuelles et garantit la cohérence.
   • Elle part de l'identité (valeurs, cible) : chaque choix graphique se justifie.
   • Chaque règle est chiffrée, illustrée et accompagnée d'un « à ne pas faire ».
   • Les tokens transmettent la charte de Figma au code sans perte.
   • On contrôle les écrans avec une grille, et on fait évoluer la charte par versions.

Une charte graphique n'est pas un catalogue de jolies choses : c'est une liste de décisions que toute l'équipe peut appliquer sans vous demander.