TP 11 : Élaborer la charte graphique d'une application

1. Objectifs

   • Analyser un brief et la concurrence, et traduire des valeurs en choix graphiques
   • Fixer une ambiance avec une planche de tendance
   • Créer un logo et ses déclinaisons
   • Construire une palette accessible, une échelle typographique, un jeu d'icônes et un style de visuels
   • Formaliser la charte en tokens et en styles Figma
   • Appliquer la charte aux écrans, la contrôler et la présenter

1. Prérequis

   • Avoir suivi les leçons du chapitre « Les éléments graphiques et la charte graphique » : Le logo, La signification des couleurs et des formes, La typographie, Les icônes, Les visuels et les illustrations, Créer et respecter une charte graphique.
   • Avoir réalisé le TP 6 : Tester un prototype avec des utilisateurs : la structure des écrans est testée et corrigée. Sinon, utilisez la maquette fournie dans l'archive.
   • Aucune programmation n'est demandée : dans la maquette de l'archive, vous modifiez des valeurs, pas du code.

1. Présentation du projet

   • Les usagers ont testé le prototype de CantineCampus et les écrans ont été corrigés. Il reste une étape avant le développement : le directeur du restaurant veut une identité visuelle et des règles que l'équipe de développement pourra appliquer sans vous.
   • Son brief tient en quatre valeurs : l'application doit paraître rapide, conviviale, saine et accessible.
   • Vous créez la charte graphique complète :
     • le logo et ses déclinaisons ;
     • les couleurs, la typographie, les icônes et les visuels;
     • les tokens et les composants;
     • les maquettes en couleurs des quatre écrans clés.
   • Puis vous contrôlez que vos écrans respectent la charte et vous vérifiez auprès de quelques personnes que la maquette exprime bien les valeurs du brief.
   • Téléchargez l'archive du TP. Elle contient le brief du directeur (ressources/), le classeur modeles/grille-charte.xlsx, le plan de la charte (modeles/charte-modele.md) et une maquette des quatre écrans (maquette/cantinecampus-maquette.html), habillée par le fichier maquette/tokens.css.

• La planche ci-dessus est un exemple: vous créez votre propre logo, votre palette et vos choix. Deux binômes ne doivent pas rendre la même charte.
• La maquette de l'archive s'ouvre dans un navigateur. Ses valeurs de départ sont grises (le wireframe) : en remplaçant les valeurs de tokens.css par celles de votre charte, puis F5, les quatre écrans prennent votre identité. La touche K affiche le contrôle des contrastes de vos tokens ; la touche G affiche la grille d'espacement de 8 px.

1. Organisation du TP

   • Le TP est découpé en dix parties. Chacune indique sa durée, ses notions, ses consignes, une aide, un point de contrôle et des questions.
   • Chaque partie ajoute une page ou une pièce à votre charte. Le classeur modeles/grille-charte.xlsx calcule les contrastes, l'échelle typographique, le choix du logo et le taux de conformité des écrans.
   • Trois règles s'appliquent : chaque choix se justifie par le brief ou par un test ; chaque règle est chiffrée; on habille des écrans testés, on ne change pas leur structure.
   • À la fin de chaque partie, enregistrez votre travail sur GitHub : un commit par partie permet de suivre votre progression.

1. Partie 0 : préparer le travail

⏱ 15 min

Notions mobilisées : Créer et respecter une charte graphique

• Dans votre dépôt ui-ux-design-bts, créez le dossier de la charte :

cd ui-ux-design-bts
git pull
mkdir -p projet-cantinecampus/06-charte/analyse projet-cantinecampus/06-charte/logo projet-cantinecampus/06-charte/couleurs-typo projet-cantinecampus/06-charte/icones-visuels projet-cantinecampus/06-charte/maquette projet-cantinecampus/06-charte/charte
git add projet-cantinecampus/06-charte
git commit --allow-empty -m "Démarre le TP 11"
git push

• Copiez le classeur dans 06-charte/ et le dossier maquette/ de l'archive dans 06-charte/maquette/. Complétez l'onglet « Mode d'emploi ».
• Lisez le brief (ressources/brief-cantinecampus.md). Rassemblez vos personas (TP 3), vos wireframes corrigés et le lexique validé au test des mots (TP 6).
• Dans Figma, créez un fichier « CantineCampus — Charte » avec une page par partie du TP : Analyse, Tendance, Logo, Couleurs, Typographie, Icônes et visuels, Composants, Écrans.

📁 Dans le dossier : le brief annoté et la liste des contraintes.

1. Partie 1 : analyser le brief et la concurrence

⏱ 30 min

Notions mobilisées : Créer et respecter une charte graphique · La signification des couleurs et des formes

• Dans l'onglet « Analyse », traduisez chaque valeur du brief en deux ou trois mots-clés, puis en choix graphiques possibles (couleur, forme, typographie, visuel, ton). Ajoutez la justification : persona, phrase du brief ou résultat du TP 6.
• Analysez trois applications de restauration, de livraison ou de cantine : couleurs dominantes, typographie, icônes et visuels, ton. Notez ce que vous voulez reprendre et ce que vous voulez éviter.
• Rédigez en trois lignes le positionnement de CantineCampus : en quoi son identité doit-elle se distinguer de ces applications ?

📁 Dans le dossier : l'onglet « Analyse », les captures annotées et le positionnement.

1. Partie 2 : réaliser la planche de tendance

⏱ 25 min

Notions mobilisées : Les visuels et les illustrations · Créer et respecter une charte graphique

• Sur la page « Tendance » de Figma, composez une planche de tendance (moodboard) de format A4 paysage : 4 à 6 images d'ambiance, 3 à 5 couleurs relevées, 2 polices candidates, des formes, des icônes et vos mots-clés.
• Pour chaque image, notez la source, l'auteur et la licence dans l'onglet « Visuels » du classeur, même si la planche reste un document de travail.
• Montrez la planche à deux personnes extérieures pendant cinq secondes et demandez-leur trois mots. Comparez avec vos mots-clés.

📁 Dans le dossier : la planche de tendance exportée en PDF et les mots relevés.

1. Partie 3 : créer le logo

⏱ 40 min

Notions mobilisées : Le logo

• Sur papier, dessinez au moins vingt croquis en dix minutes, à partir de vos mots-clés. Ne jugez pas encore.
• Retenez trois pistes, si possible de familles différentes (symbole, monogramme, logotype…). Dessinez-les proprement dans Figma.
• Notez les trois pistes dans l'onglet « Logo » sur six critères (de 0 à 3). Le classeur désigne la piste retenue ; en cas d'égalité, demandez l'avis de trois personnes.
• Finalisez la piste retenue en vectoriel et créez ses déclinaisons: principale, monochrome, négatif, icône d'application. Fixez la zone de protection et la taille minimale.
• Faites le test de réduction (64, 32 et 16 px) et exportez le logo en SVG sous le nom logo.svg dans 06-charte/maquette/.

📁 Dans le dossier : les croquis, les trois pistes, la grille de choix, les déclinaisons et les règles d'usage du logo.

1. Partie 4 : construire la palette et les formes

⏱ 35 min

Notions mobilisées : La signification des couleurs et des formes

• Choisissez une couleur primaire justifiée par l'analyse, puis construisez la palette : secondaire, texte, texte secondaire, fond, surface, bordure, succès, erreur.
• Saisissez les codes HEX dans l'onglet « Palette » : le classeur calcule le contraste de chaque couleur avec le blanc et avec votre texte foncé, et indique son usage possible. Ajoutez les paires réellement utilisées (texte du bouton, texte du badge, légende sur une carte, bordure de champ).
• Corrigez chaque paire refusée en gardant la teinte (plus foncée ou plus claire), jusqu'à ce que tout soit conforme.
• Fixez la répartition 60-30-10 et les règles de forme: rayon des boutons, rayon des cartes, style des coins du logo et des illustrations.

📁 Dans le dossier : l'onglet « Palette », la page Couleurs de Figma et la justification de la palette.

1. Partie 5 : définir la typographie

⏱ 25 min

Notions mobilisées : La typographie

• Choisissez une ou deux polices libres (licence SIL OFL ou système) qui expriment vos mots-clés. Vérifiez les accents, le symbole € et la lisibilité des chiffres à 13 px.
• Dans l'onglet « Typographie », saisissez la taille de base et le rapport : le classeur calcule l'échelle. Arrondissez et choisissez la graisse et l'interlignage de chaque niveau.
• Créez les styles de texte dans Figma (H1, H2, H3, Titre de carte, Corps, Légende, Bouton) et testez-les sur l'écran « Menu du jour ».

📁 Dans le dossier : l'onglet « Typographie » et la page Typographie de Figma.

1. Partie 6 : choisir les icônes et les visuels

⏱ 30 min

Notions mobilisées : Les icônes · Les visuels et les illustrations

• Choisissez une bibliothèque d'icônes libre (Material Symbols, Lucide, Phosphor, Tabler…), un style (contour ou plein) et une épaisseur de trait. Notez-les dans l'onglet « Icônes ».
• Sélectionnez les huit icônes du tableau (navigation et actions). Placez-les à 24 px, avec leur libellé et une zone tactile de 48 px.
• Faites le test des icônes auprès de trois à cinq personnes : chaque icône montrée seule, « Que se passerait-il si vous la touchiez ? ». Le classeur indique les icônes à garder seules et celles qui ont besoin d'un libellé.
• Définissez le style des visuels (photos de plats, illustrations des états vides et des erreurs) avec quatre règles illustrées. Rassemblez au moins trois visuels avec source, licence et texte alternatif dans l'onglet « Visuels ».

📁 Dans le dossier : les onglets « Icônes » et « Visuels », la planche d'icônes et les règles de style des visuels.

1. Partie 7 : formaliser : tokens, styles et composants

⏱ 25 min

Notions mobilisées : Créer et respecter une charte graphique

• Ouvrez 06-charte/maquette/tokens.css dans VS Code. Remplacez chaque valeur grise par la valeur de votre charte : couleurs, polices, tailles, rayons, espacement. Ne modifiez que les valeurs.
• Rechargez la maquette (F5) et appuyez sur K: tous les contrastes doivent être « Conforme ». Sinon, corrigez la palette (partie 4) puis le token.
• Dans Figma, créez les composants de la charte à partir des variables et des styles : bouton principal, bouton secondaire, champ (normal et erreur), carte de plat, badge, barre de navigation.

📁 Dans le dossier : tokens.css, une capture du contrôle des contrastes et la page Composants de Figma.

1. Partie 8 : appliquer la charte et la contrôler

⏱ 40 min

Notions mobilisées : Créer et respecter une charte graphique · Évaluer l'utilisabilité des composants de l'interface

• Dans Figma, réalisez les maquettes en couleurs des quatre écrans clés (accueil, menu du jour, panier, confirmation) en partant de vos wireframes corrigés et de vos composants. La structure ne change pas.
• Faites des captures avant / après (wireframe et maquette) de chaque écran.
• Passez chaque écran à la grille de conformité de l'onglet « Conformité ». Chaque « Non » reçoit une correction, que vous appliquez.
• Faites un test rapide avec trois à cinq personnes extérieures : montrez le wireframe puis la maquette de l'écran « Menu du jour » cinq secondes chacun, demandez la version préférée et trois mots pour décrire la maquette. Comptez combien de valeurs du brief sont retrouvées (onglet « Préférence »).

📁 Dans le dossier : les maquettes, les captures avant / après, les onglets « Conformité » et « Préférence ».

1. Partie 9 : rédiger la charte et présenter

⏱ 35 min

Notions mobilisées : Créer et respecter une charte graphique

• Rédigez la charte graphique en suivant le plan de modeles/charte-modele.md: 8 à 12 pages, une règle chiffrée, un exemple et un « à ne pas faire » pour chaque élément. Exportez-la en PDF.
• Ajoutez la page « Contrôle et évolution » : extrait de tokens.css, résultat de la grille de conformité et historique des versions (1.0).
• Préparez une présentation de 5 minutes pour le directeur : les valeurs et leur traduction, le logo, la palette et ses contrastes, un écran avant / après, les résultats du test rapide.

git add projet-cantinecampus/06-charte
git commit -m "Ajoute la charte graphique et les maquettes du TP 11"
git tag -a charte-v1 -m "Charte graphique de CantineCampus, version 1.0"
git push
git push origin charte-v1

• Variantes pour les binômes en avance : décliner la charte pour l'écran d'affichage du comptoir (grand format, lecture à 3 mètres) ; créer un mode sombre et vérifier ses contrastes dans la maquette ; préparer un écran de démarrage animé (logo et couleur primaire).
• Relisez votre charte : chaque règle est chiffrée, chaque choix renvoie au brief ou à un test, chaque visuel a une licence, et un développeur qui ne vous connaît pas peut l'appliquer.

📁 Dans le dossier : la charte en PDF, le support de présentation et l'historique des versions.

1. Grille d'évaluation (sur 20)

1. Livrables

   • Le lien du dépôt GitHub, avec au moins un commit par partie et l'étiquette charte-v1.
   • La charte graphique (PDF), avec vos noms, 8 à 12 pages.
   • Le classeur grille-charte.xlsx complété.
   • Le fichier Figma (lien) : logo, variables, styles, composants et maquettes des quatre écrans.
   • Le dossier maquette/ avec tokens.css et logo.svg, et le support de présentation.

1. Erreurs fréquentes

1. Pour aller plus loin

   • Créer un mode sombre: une seconde série de tokens, et les mêmes contrôles de contraste.
   • Transformer les composants Figma en bibliothèque partagée publiée pour toute l'équipe.
   • Mener un test des cinq secondes complet (TP 6) sur l'écran d'accueil en couleurs et comparer avec le wireframe.

1. Bilan

   • Une charte part du brief: chaque choix graphique traduit une valeur et se justifie.
   • Le logo, la palette, la typographie, les icônes et les visuels forment un ensemble cohérent.
   • Les règles sont chiffrées et vérifiées: contrastes, tailles, licences, compréhension des icônes.
   • Les tokens transmettent la charte de Figma au code sans perte.
   • Une charte se contrôle écran par écran et se teste avec des usagers.

Une identité visuelle réussie ne se remarque pas d'abord : on se sent chez soi dans l'application, et on la reconnaît partout.