Identité visuelle et design
Une bonne éducation des joueurs doit être aussi lisible et aussi soignée que le reste de vos communications. Ce module couvre le modèle d’identité adaptative, les traitements visuels propres au Tier 1 (niveau 1) et au Tier 2, ainsi que les exigences d’accessibilité et les conventions de design du système de marque.
Operator note: Remplacez
{{PROGRAM_NAME}}par le nom de votre programme partout. La palette par défaut, le système typographique et les règles Tier 1 / Tier 2 font partie du système de marque et ne doivent pas être modifiés. Ce que vous personnalisez — vos couleurs, vos polices, votre logo — est exactement ce que le modèle d’identité adaptative est conçu pour vous laisser changer. Les scripts du narrateur doivent être enregistrés dans la voix Playbook Tier 1, sauf lorsqu’une section est marquée Tier 2.
Programme : Brand Foundations | Durée : ~20 min | Prérequis : Fondations du JR
Sommaire express
| Section | Contenu | Durée |
|---|---|---|
| Objectifs d’apprentissage | Ce que vous saurez après ce module | — |
| Section 1 : Principes du système visuel | Identité adaptative, couleur, typographie, icônes, photographie | ~7 min |
| Section 2 : Règles visuelles Tier 1 vs Tier 2 | En quoi les deux Tiers diffèrent visuellement, examiner un design dans son contexte | ~7 min |
| Section 3 : Exigences d’accessibilité | Référence WCAG 2.1 AA, mode sombre, la liste de contrôle avant publication | ~4 min |
| Test du module | 5 questions notées, 80 % pour réussir | ~2 min |
| Points clés | Résumé | — |
| Références | Liens vers les ressources de marque Playbook | — |
Objectifs d’apprentissage
À l’issue de ce module, vous serez en mesure de :
- Utiliser le modèle d’identité adaptative pour briefer un designer sur un nouveau déploiement chez un opérateur
- Appliquer les règles visuelles Tier 1 vs Tier 2 à n’importe quelle pièce — y compris les cas où elles changent en cours de parcours
- Vérifier les exigences de contraste WCAG et les conventions Playbook de taille de cible et de typographie sur de vrais visuels
Section 1 : Principes du système visuel
Lecture
L’éducation des joueurs mérite le même soin que les autres communications de l’opérateur. Une hiérarchie claire, une information utile et une typographie lisible comptent davantage que l’ajout d’effets décoratifs.
Le modèle d’identité adaptative conserve une structure commune tout en laissant place à l’identité propre de l’opérateur :
- Les opérateurs peuvent personnaliser la palette, les polices de titre et de corps, le logo, le co-branding et le style photographique.
- La mise en page, l’espacement, la hiérarchie de l’information, le système d’icônes à deux épaisseurs de trait et la structure des composants restent cohérents.
L’identité Playbook par défaut utilise le bleu marine #1B2838 pour la structure principale, le turquoise #10B981 pour la mise en avant et les actions, et l’orange #FF6B35 comme accent facultatif du Tier 1. Les supports actuels peuvent n’utiliser qu’une partie de cette palette. L’orange n’est pas obligatoire sur chaque pièce éducative.
- Bleu marine #1B2838Arrière-plans principaux, titres et identité
- Turquoise #10B981Mise en avant et actions, contraste vérifié
- Orange #FF6B35Accent facultatif du Tier 1
Les couleurs d’état ont un rôle distinct. Succès (#00C853), avertissement (#FFB300), danger (#FF3D00) et information (#2979FF) signalent un état. Gardez ces significations constantes quand vous adaptez l’identité, et ajoutez des mots ou un autre indice pour que la couleur ne soit jamais le seul signal. Vérifiez le contraste du texte sur chaque arrière-plan.
Le système typographique enseigné utilise Inter pour les titres et les commandes, Source Sans 3 pour le texte courant et Source Code Pro pour les spécimens de données et de numéros de contact. Source Code Pro rend distincts les caractères qui se ressemblent. Les supports publiés actuellement peuvent utiliser Inter partout ; l’enregistrement décrit le système enseigné plutôt que chaque export actuel.
Le système d’icônes utilise deux épaisseurs de trait. À sa taille de coordonnées native, la structure extérieure utilise des traits de 2 unités et le détail intérieur des traits de 1 unité. Agrandir un SVG agrandit aussi ses traits à l’écran : ce ne sont donc pas des mesures fixes en pixels d’écran, quelle que soit la taille d’affichage. N’utilisez des icônes que lorsqu’elles aident à identifier une commande ou à expliquer le contenu.
La photographie et l’illustration doivent servir le message. Évitez les images qui laissent entendre un succès garanti, qui embellissent le jeu à gros enjeux ou qui détournent l’attention du soutien. Un texte posé sur une photo exige un traitement d’arrière-plan maîtrisé et un contraste mesuré ; ajouter un dégradé ne prouve pas, à lui seul, que le contraste est suffisant.
Script narrateur
Narrator: [transition slide] Le système visuel de {{PROGRAM_NAME}} commence par trois couleurs de marque. Le marine est la couleur primaire — confiance et autorité. Le vert émeraude est la couleur secondaire — éléments interactifs, liens, appels à l’action. L’orange vif est l’accent — de l’énergie pour le matériel Tier 1, et il disparaît complètement en Tier 2.
[show three-color palette] À côté de celles-ci se trouve un jeu distinct de couleurs sémantiques — succès, avertissement, danger, info. Gardez-les standard même quand vous changez tout le reste, parce que les joueurs les apprennent à travers tous les produits qu’ils utilisent.
[show type system] Trois polices, trois rôles. Inter pour les titres, Source Sans pour le corps, et Source Code Pro pour les numéros d’assistance — parce qu’elle empêche un zéro de ressembler à un O quand quelqu’un a besoin de composer un numéro pour obtenir de l’aide.
[show iconography] Le jeu d’icônes porte la même idée : deux épaisseurs de trait — structure affirmée, détail léger — une seule bibliothèque cohérente chez chaque opérateur.
[pause 3s] Tout le système est délibérément sobre. Le bruit visuel est l’ennemi de l’éducation des joueurs.
Section 2 : Règles visuelles Tier 1 vs Tier 2
Lecture
Le Tier 1 couvre l’éducation courante. Il peut utiliser toute la palette, la photographie, l’illustration et une animation qui a un but. Choisissez les éléments dont le message a besoin ; une mise en page éducative sobre peut tout à fait relever du Tier 1.
Le Tier 2 couvre la communication de soutien et de crise. Gardez le parcours clair : couleur sobre, colonne unique lisible, espacement généreux et actions simples. Retirez l’imagerie promotionnelle, les plaisanteries et les effets festifs.
Les modèles Tier 2 actuels de Playbook utilisent une surface claire avec des neutres et du turquoise. Suivez cette convention de design tout en vérifiant le contraste réel, l’ordre de lecture et le parcours de soutien.
Examinez le design en contexte. A-t-il sa place à côté des autres supports de l’opérateur ? Sa qualité de production est-elle comparable ? La hiérarchie est-elle utile pour cette tâche ? Peut-on le lire et l’utiliser ? Ces vérifications ne remplacent pas celles de la destination, du contenu, de l’accessibilité ou de la conformité locale avant publication.
Script narrateur
Narrator: [transition slide] Le Tier 1 et le Tier 2 utilisent la même qualité de marque. La différence, c’est la retenue, pas la qualité.
[show tier 1 sample board] Le Tier 1 reçoit le système visuel complet. Arrière-plans marine, accents turquoise, mises en avant orange vif, icônes ludiques, illustrations de marque. C’est ici que vit la personnalité.
[show tier 2 sample board] Le Tier 2 dépouille tout. L’orange disparaît. La décoration disparaît. La palette se réduit à des neutres plus le turquoise pour les actions essentielles. La mise en page passe en colonne unique, l’espace blanc s’ouvre, et le Tier 2 s’affiche toujours en mode clair — même si le joueur a activé le mode sombre.
[pause 3s] Quand quelqu’un a besoin d’aide, chaque élément visuel superflu est une friction.
Section 3 : Exigences d’accessibilité
Lecture
Vérifiez le texte, les commandes et l’ordre de lecture tels qu’ils sont réellement ; une page visuellement soignée peut quand même être inaccessible.
Exigences de contraste WCAG 2.1 AA : le texte normal exige au moins 4,5:1 ; le grand texte, au moins 3:1. Est considéré comme grand un texte d’au moins 18 points (24 px CSS), ou de 14 points en gras (environ 18,67 px CSS). Les composants d’interface non textuels et les objets graphiques concernés exigent 3:1, sous réserve des exceptions prévues par le critère.
Conventions de design supplémentaires de Playbook : visez des commandes d’au moins 44 × 44 px CSS et un texte courant d’au moins 16 px CSS. Ne les présentez pas comme des exigences WCAG 2.1 AA. La cible de 44 pixels figure dans le critère 2.5.5 du WCAG 2.1, niveau AAA, avec des exceptions ; le critère 2.5.8 du WCAG 2.2, niveau AA, fixe un minimum de 24 pixels ou renvoie à ses exceptions d’espacement et autres. La taille de police ne suffit pas, à elle seule, à établir la lisibilité ni la conformité.
Le blanc sur le bleu marine #1B2838 mesure environ 14,92:1 ; le turquoise #10B981 sur ce même marine, environ 5,88:1. Ces mesures valent pour ces couleurs unies exactes. Vérifiez chaque combinaison réelle, y compris les états survol, focus, désactivé et erreur. Un texte sur photographie doit être testé sur l’arrière-plan qu’il occupe réellement.
Vérifications en mode sombre : #6B6B8A sur #1A1A2E mesure environ 3,33:1. C’est sous le seuil du texte normal, même si cela semble lisible sur votre écran. Utilisez une couleur de texte plus claire pour le texte courant normal. Vérifiez les images et les couleurs d’état dans le thème déployé ; ne supposez pas qu’une règle unique, comme « toujours du texte sombre », fera passer toutes les combinaisons.
Avant validation :
- Utilisez chaque action au clavier. Vérifiez que le focus est visible, que l’ordre est logique et qu’il n’y a aucun piège au clavier.
- Lisez la page avec une technologie d’assistance. Employez des titres, des libellés et des annonces d’état qui ont du sens.
- Donnez aux images informatives des alternatives textuelles utiles, et aux images décoratives des alternatives vides. Ne répétez pas inutilement le texte voisin.
- Faites en sorte que le sens ne repose jamais uniquement sur la couleur, le mouvement ou le son.
- Vérifiez le zoom, la redistribution du contenu et la surface tactile réelle sur des écrans étroits et peu hauts.
- Vérifiez les exigences locales dans vos politiques internes.
Normes : W3C, contraste minimal, WCAG 2.1, taille de cible, AAA et WCAG 2.2, taille de cible minimale, AA.
Script narrateur
Narrator: [transition slide] L’accessibilité n’est pas facultative. C’est le fondement d’une éducation inclusive des joueurs.
[show WCAG checklist] Le contraste des couleurs respecte le WCAG double A — quatre virgule cinq pour un pour le texte courant, trois pour un pour le grand texte. Les cibles tactiles font au moins quarante-quatre pixels. Chaque mise en page fonctionne au clavier et se lit clairement pour un lecteur d’écran. N’utilisez jamais la couleur seule pour transmettre du sens. Chaque image reçoit un texte alternatif. Et le Tier 2 s’affiche toujours en mode clair, parce que le mode sombre peut sembler isolant en situation de crise.
[pause 3s] L’objectif est simple : chaque joueur, quelle que soit sa capacité, peut accéder à chaque pièce de matériel.
[transition to exercise] Avant le test, six décisions de design attendent sur votre bureau. Pour chacune, tranchez : publier, ou corriger. Chaque réponse découle directement des règles que vous venez d’apprendre. Parcourez-les, puis continuez.
Exercise: Publier ou corriger ?
Type: scenario
Instructions: Publier ou corriger ? Jugez seulement le traitement visuel. Contacts, liens et mentions se vérifient à part. Fiez-vous aux mesures indiquées, pas à l’image réduite.
| Élément | Catégorie correcte | Retour si correct | Retour si incorrect |
|---|---|---|---|
| Examinez ce traitement d’affiche Tier 1 destinée à un établissement. | Publier | Une hiérarchie claire, une typographie cohérente et des chiffres accompagnés de leurs règles conviennent à cette pièce Tier 1. L’orange et la photographie sont facultatifs. | Publier. La hiérarchie et les chiffres accompagnés de leurs règles fonctionnent, et le Tier 1 n’exige ni orange ni photo. |
| Examinez cette carte destinée à un présentoir, à côté des supports commerciaux de l’opérateur. | Corriger | Aucune identité commune, et un slogan là où devrait figurer l’information sur les cotes. Utilisez le modèle actuel de carte présentoir et des faits rattachés aux règles du jeu. | Corriger. Le style générique reste en deçà des supports commerciaux voisins, et le slogan ne donne aucun fait sur les cotes. |
| Examinez cet écran de pause du compte en tant que communication Tier 2. | Corriger | Confettis, titre promotionnel et action orange rivalisent avec une décision de soutien. Restez sobre, sans froideur clinique, et ne laissez pas croire que la pause a commencé. | Corriger. Confettis et orange célèbrent une décision de soutien Tier 2. Utilisez le traitement sobre du soutien et ne laissez pas croire que la pause a commencé. |
| Examinez le traitement visuel de cet écran d’accès au soutien et les spécifications fournies. | Publier | La colonne unique, l’action claire, le contraste mesuré et la cible de 48 pixels servent la tâche de soutien. | Publier. La sobriété est voulue en Tier 2, et le contraste de 5,88:1 et la cible de 48 pixels satisfont aux vérifications de ce module. |
| Examinez le quiz mobile et les mesures de taille de cible fournies. | Corriger | Les cibles de 36 × 36 px CSS n’atteignent pas la cible Playbook de 44 px. Le WCAG 2.1 place 44 px au niveau AAA, pas AA. Agrandissez-les. | Corriger. Un bon contraste ne compense pas des cibles de 36 px. La cible Playbook est de 44 × 44 px CSS, niveau AAA du WCAG 2.1, pas AA. |
| Examinez ces deux messages d’état du compte. | Corriger | Ce sont des états de compte, pas des accents de campagne : il leur faut les couleurs standard de succès et d’avertissement. Gardez aussi les libellés. | Corriger. Ces messages empruntent l’orange et le marine de la marque. Les états de compte exigent les couleurs standard de succès et d’avertissement, avec leurs libellés. |
Test du module
Narrator: [transition slide] L’heure est venue de vérifier ce que vous avez appris. Cinq questions, couvrant le système visuel, les règles visuelles Tier 1 et Tier 2, et le plancher d’accessibilité. Il vous faut 80 % — soit quatre sur cinq — pour valider ce module. Prenez votre temps. Si vous ne réussissez pas du premier coup, vous pourrez revoir le matériel et repasser le test.
Question 1
Assesses: Objectif d’apprentissage 1
Stem: Quelle est la « règle de qualité visuelle » pour le contenu {{PROGRAM_NAME}} ?
| Option | Texte |
|---|---|
| A | Le contenu {{PROGRAM_NAME}} devrait utiliser une esthétique distincte et clinique pour se différencier du contenu commercial |
| B | Le contenu {{PROGRAM_NAME}} doit égaler la qualité de production du marketing commercial de l’opérateur |
| C | Le contenu {{PROGRAM_NAME}} devrait être minimaliste pour ne pas rivaliser avec la marque de l’opérateur |
| D | Le contenu {{PROGRAM_NAME}} devrait suivre les normes de design des communications de santé publique gouvernementales |
Correct: B
Explanation: Une éducation moins soignée que les promotions voisines est traitée comme des petits caractères. Égalez ce soin ; utilité et accessibilité se vérifient à part.
Source: Système visuel
Question 2
Assesses: Objectif d’apprentissage 1
Stem: Qu’est-ce que le « modèle d’identité adaptative » ?
| Option | Texte |
|---|---|
| A | Un système où {{PROGRAM_NAME}} a l’air identique chez tous les opérateurs |
| B | Un système où les opérateurs gardent l’identité structurelle de {{PROGRAM_NAME}} (mise en page, hiérarchie, icônes) mais appliquent leurs propres couleurs et polices |
| C | Un système qui change automatiquement selon le segment du joueur |
| D | Un système qui utilise l’IA pour générer des designs sur mesure par marché |
Correct: B
Explanation: Une mise en page, une hiérarchie, des icônes et un espacement cohérents permettent de reconnaître {{PROGRAM_NAME}} d’un opérateur à l’autre, chacun gardant ses couleurs et polices.
Source: Système visuel
Question 3
Assesses: Objectif d’apprentissage 2
Stem: Quelle orientation doit guider la révision de cette ébauche de soutien Tier 2 ?
| Option | Texte |
|---|---|
| A | Utiliser du rouge et des couleurs d’avertissement partout pour signaler l’urgence |
| B | Le rendre visuellement épuré — aucun style de marque du tout |
| C | Même qualité de marque mais revenir à l’essentiel : mise en page épurée, espace blanc généreux, contraste maximal, zéro bruit visuel |
| D | Utiliser un système de design totalement différent du Tier 1 |
Correct: C
Explanation: Rien ne doit rivaliser avec l’information de soutien. Le Tier 2 garde la qualité de la marque et abandonne la décoration : sobre, pas clinique, sur fond clair.
Source: Système visuel
Question 4
Assesses: Objectif d’apprentissage 3
Stem: Quel ratio de contraste minimal du WCAG 2.1 AA s’applique au texte courant regular de 16 px CSS de cette spécification ?
| Option | Texte |
|---|---|
| A | 2:1 |
| B | 3:1 |
| C | 4,5:1 |
| D | 7:1 |
Correct: C
Explanation: Un texte regular de 16 px CSS est un texte normal : il exige donc 4,5:1. Le grand texte (3:1) commence à 24 px CSS, ou environ 18,67 px en gras.
Source: Accessibilité
Question 5
Assesses: Objectif d’apprentissage 1
Stem: Pourquoi {{PROGRAM_NAME}} utilise-t-il Source Code Pro pour les numéros d’assistance ?
| Option | Texte |
|---|---|
| A | Elle a l’air plus moderne que d’autres polices |
| B | C’est la police primaire de la marque |
| C | Elle distingue les caractères similaires — 0/O et 1/l/I sont visuellement distincts |
| D | Elle est exigée par les régulateurs du jeu |
Correct: C
Explanation: Confondre 0 et O, ou 1 et l, peut faire composer le mauvais numéro d’assistance. Source Code Pro les rend distincts.
Source: Système visuel
Points clés
- Égalez la qualité de production des autres communications de l’opérateur. Utilisez une hiérarchie claire, une typographie lisible et une information adaptée à la tâche.
- Les opérateurs peuvent adapter les éléments d’identité tout en gardant des mises en page, un espacement et un comportement des composants cohérents.
- La palette par défaut associe le bleu marine, un turquoise vif et un orange facultatif. Gardez cohérents les couleurs d’état fonctionnelles et leurs libellés.
- Le Tier 1 peut utiliser le système visuel élargi. Les modèles Tier 2 actuels utilisent des surfaces claires, une couleur sobre et des parcours de soutien simples.
- Examinez la pièce réelle dans son contexte. Une validation visuelle ne remplace pas les vérifications du contenu, de la destination, de l’accessibilité ou de la publication locale.
- Le contraste WCAG AA du texte normal est de 4,5:1. Playbook prévoit en plus des cibles de 44 × 44 px CSS et un texte courant de 16 px CSS. Vérifiez l’usage au clavier, l’accès par les technologies d’assistance et la redistribution du contenu.
Fondement documentaire
Vous n’avez pas besoin de les lire, mais ce sont les normes publiées et les recherches qui sous-tendent les règles du module — au cas où un collègue poserait la question.
- World Wide Web Consortium (2018). Web Content Accessibility Guidelines (WCAG) 2.1. Recommandation du W3C. Pourquoi c’est ici : les critères de contraste et d’interaction. Le critère de taille de cible de 44 × 44 px CSS relève du niveau AAA dans le WCAG 2.1 ; Playbook l’adopte comme convention de design supplémentaire.
- Arditi, A. & Cho, J. (2005). Serifs and font legibility. Vision Research, 45(23), 2926–2933. Pourquoi c’est ici : la preuve de lisibilité derrière les choix typographiques fonctionnels comme la distinction des caractères — pourquoi une police qui sépare 0/O et 1/l/I n’est pas une préférence esthétique.
- Robins, D. & Holmes, J. (2008). Aesthetics and credibility in web site design. Information Processing & Management, 44(1), 386–399. Pourquoi c’est ici : la preuve expérimentale que la qualité de production visuelle détermine si les gens jugent un contenu crédible — l’épine dorsale empirique de la règle de qualité visuelle.
Références
| Ressource | À quoi elle sert |
|---|---|
| Système visuel | Identité adaptative, palette, typographie, iconographie, photographie |
| Accessibilité | Référence WCAG, tableaux de contraste, règles du mode sombre, liste de contrôle |
| Modèles de supports | Spécimens Tier 1 et Tier 2 pour briefer et servir de référence |