Thanedee/standard-de-conception

Norme de conception

Utilisez cette compétence lorsque vous créez, modifiez, briefez ou révisez un visuel : une publication ou un carrousel sur les réseaux sociaux, un dépliant, une affiche, une invitation, un logo ou un système de marque, une présentation, une infographie ou un graphique, une vidéo ou une animation, un fichier imprimé, un écran web ou d'application, ou une image réalisée avec un générateur d'images par IA (ChatGPT, Gemini, Midjourney, Flux, Firefly et autres).

Le guide complet, avec les sources de recherche, se trouve dans references/. Lisez d'abord ce fichier, puis ouvrez uniquement les fichiers de référence nécessaires à la tâche (index ci-dessous).

Norme fondamentale

Clarté d'abord, hiérarchie ensuite, cohérence ensuite. L'esthétique sert le message et ne le cache jamais.

Lorsque les règles entrent en conflit, décidez dans cet ordre :

1. Vérité et légalité
2. Lisibilité et accessibilité
3. Hiérarchie et message
4. Cohérence de la marque
5. Préférence esthétique

Lorsqu'une charte graphique client entre en conflit avec cette norme, la charte graphique prévaut sur l'identité (couleur, typographie, logo) et cette norme prévaut sur la lisibilité, l'exactitude et l'accessibilité.

Flux de travail pour chaque tâche de conception

1. Reformulez le brief en une phrase : objectif, public, format et taille, message unique, appel à l'action. Si vous ne le pouvez pas, demandez avant de concevoir.
2. Obtenez le texte exact. Utilisez uniquement le texte fourni, orthographié exactement. Utilisez les termes du public (pour un travail immobilier nigérian : "tenancy agreement", pas "lease").
3. Choisissez le format et le canevas dans references/11-platform-specs.md. Publication sociale par défaut : 1080 x 1350 px (4:5). Vidéo verticale : 1080 x 1920 px, avec tout le contenu clé à l'intérieur d'une zone de sécurité centrée de 900 x 1400 px.
4. Construisez sur une grille avec une échelle d'espacement de 8 px et des marges d'au moins 64 px sur un canevas de 1080 px.
5. Définissez un point focal et un premier, deuxième et troisième niveau de lecture clairs.
6. Appliquez les règles de typographie et de couleur (minimums ci-dessous).
7. Si vous utilisez un générateur d'images par IA, suivez les garde-fous IA ci-dessous et references/17-ai-guardrails.md.
8. Effectuez le contrôle qualité ci-dessous, plus references/20-quality-control.md, sur le fichier exporté avant de le présenter.

Minimums non négociables (DOIT)

• Contraste : texte courant d'au moins 4,5:1 par rapport à son arrière-plan ; grands textes (24 px ou plus, ou 18,5 px en gras) d'au moins 3:1 ; icônes et parties de graphiques d'au moins 3:1 (WCAG 2.2 AA).
• Taille du texte sur un graphique social de 1080 px de large : titre 60 px ou plus, corps 32 px ou plus, note de bas de page 24 px ou plus, environ 30 à 40 mots par graphique au maximum. Texte web courant 16 px ou plus. Texte imprimé courant 9 à 12 pt.
• Si le texte ne tient pas, réduisez le contenu, jamais la taille.
• Un message principal et un appel à l'action principal.
• Ne transmettez jamais le sens uniquement par la couleur (environ 1 homme sur 20 a une déficience de la vision des couleurs).
• Zones de sécurité : rien d'important dans les 5 % extérieurs du canevas ou sous les superpositions de la plateforme.
• Exactitude : chaque mot, chiffre, nom, date, prix et détail de contact vérifié lettre par lettre par rapport à la source.
• Droits : uniquement des images, polices et musiques sous licence ; consentement des personnes identifiables ; aucun emblème national (tel qu'un blason) dans un travail commercial sans autorisation.
• Carrousels et pièces multipages : une mise en page identique sur chaque page. Variez la mise en page entre les publications, pas au sein d'un ensemble.
• Texte alternatif sur chaque image informative et légendes sur chaque vidéo.

Paramètres typographiques par défaut

• Une ou deux familles de caractères. Une échelle typographique fixe avec un rapport clair entre les niveaux (titre d'au moins 2,5 fois la taille du corps sur les graphiques sociaux).
• Interlignage du corps de 1,4 à 1,6 ; interlignage du titre de 1,0 à 1,2.
• Longueur de ligne : 45 à 75 caractères pour le texte courant, 30 à 50 sur mobile et sur les réseaux sociaux.
• Les majuscules uniquement pour les étiquettes courtes, espacées de +5 % à +12 %.
• Pas un seul mot seul sur la dernière ligne d'un titre. Coupez les lignes d'affichage par sens.
• Guillemets courbes, tirets moyens pour les plages (₦12–18m), et vérifiez que la police contient tous les glyphes nécessaires (₦, lettres yoruba, igbo et haoussa).

Paramètres de couleur par défaut

• Environ 60 % dominant, 30 % secondaire, 10 % ou moins d'accentuation. Un accent saturé ; neutralisez le reste.
• Choisissez des harmonies dans le cercle chromatique : monochromatique, analogue, complémentaire, complémentaire divisé, triadique ou tétradique. Voir references/05-colour.md et les images dans assets/.
• Les accents chauds et lumineux (corail, or, citron vert, jaune) fonctionnent sur des fonds sombres ou comme de grandes formes, pas comme du petit texte sur fond blanc.
• Concevez pour les écrans en sRGB. Imprimez dans le profil CMJN de l'imprimeur, avec Pantone pour les couleurs exactes de la marque.

Garde-fous pour l'IA (résumé)

• Considérez chaque image IA comme un brouillon pouvant contenir des faits inventés, des caractères mal orthographiés ou déformés, des logos, sceaux ou armoiries fantômes, une dérive de mise en page ou un visage modifié.
• Briefez avec une invite complète : objectif, taille, mise en page, palette (HEX), style de police, le texte exact entre guillemets, le sujet de l'image et les contraintes ("pas de logos, pas d'armoiries, pas de filigranes, pas de texte ou de chiffres supplémentaires").
• Modifiez une chose par demande de retouche, et dites "gardez tout le reste exactement identique". Répétez la liste de conservation à chaque fois.
• Préférez générer l'image sans texte et configurer la typographie dans un outil de conception, du HTML ou du SVG, afin que les mots soient exacts.
• Avant de présenter une sortie IA, vérifiez : le texte, les faits, les marques, la cohérence avec le modèle approuvé, les minimums du guide, les personnes, les droits et la divulgation (references/17-ai-guardrails.md, section 17.6). Signalez toute divergence au lieu de présenter l'image comme finale.
• Ne supprimez pas les métadonnées Content Credentials (C2PA). Divulguez l'utilisation de l'IA lorsqu'un spectateur pourrait s'y intéresser, en particulier pour les personnes, lieux et produits réalistes.

Contrôle qualité avant présentation

Révisez si l'un de ces points échoue, quoi que soit bon par ailleurs :

1. Un mot, chiffre, nom, date, prix ou détail de contact erroné.
2. Un fait, logo, sceau, armoiries ou filigrane inventé.
3. Texte en dessous de la taille minimale, ou contraste inférieur à 4,5:1 (3:1 pour les grands textes).
4. Pas de point focal clair ou d'ordre de lecture.
5. Contenu essentiel en dehors de la zone de sécurité ou coupé par un recadrage de la plateforme.
6. Sens transmis uniquement par la couleur.
7. Droits non obtenus.
8. Palette, police ou logo hors charte.
9. Absence de divulgation ou d'approbation réglementaire (partenariat rémunéré, réalisme IA, approbation ARCON pour les publicités nigérianes).
10. Mise en page incohérente dans un carrousel ou une pièce multipage.

Ensuite, notez chaque catégorie dans references/20-quality-control.md de 0 à 10 ; chaque catégorie doit atteindre au moins 8.

Index des références

Fichier	Ouvrir quand
references/00-how-to-use.md	Niveaux de règles (DOIT, DEVRAIT, PEUT), niveaux de preuve, ordre de jugement
references/01-perception-cognition.md	Expliquer pourquoi une conception fonctionne : premières impressions, fluidité, Gestalt, schémas de balayage
references/02-core-principles.md	Hiérarchie, contraste, alignement, proximité, équilibre, espace vide
references/03-composition-layout-grids.md	Grilles, échelle d'espacement, zones de sécurité, ratios, recadrage, tangences
references/04-typography.md	Choix des polices, tailles par support, échelles typographiques, interlignage, sauts de ligne
references/05-colour.md	Palettes, cercle chromatique, harmonies, ce qui va avec quoi, palettes sectorielles, paires de contraste, signification des couleurs au Nigeria
references/06-imagery-icons.md	Choisir, recadrer et traiter les photos, illustrations, systèmes d'icônes
references/07-information-design-dataviz.md	Graphiques, axes honnêtes, infographies
references/08-copy-content.md	Titres, budgets de mots, appels à l'action, terminologie, relecture
references/09-brand-identity-logos.md	Systèmes d'identité, conception et utilisation des logos, cohérence des séries
references/10-accessibility.md	Chiffres WCAG 2.2, texte alternatif, sécurité des mouvements, représentation inclusive
references/11-platform-specs.md	Tailles de canevas et zones de sécurité pour Instagram, LinkedIn, TikTok, Reels, Shorts, YouTube, diapositives, email
references/12-motion-video.md	Structure vidéo courte, légendes, timing d'animation, audio
references/13-print-production.md	Fond perdu, résolution, CMJN, limites d'encre, papier, PDF/X
references/14-ui-ux-web.md	Heuristiques d'utilisabilité, cibles tactiles, états des composants, motifs trompeurs
references/15-cultural-context-nigeria.md	Localisation, termes nigérians, devise, calendrier, symboles
references/16-legal-ethics.md	Droits d'auteur, propriété de l'IA, droit à l'image et vie privée, ARCON, allégations publicitaires
references/17-ai-guardrails.md	Modèle d'invite, discipline de modification, modes de défaillance, protocole de vérification, divulgation
references/18-design-process.md	Briefs, concepts, critique, versioning, tests
references/19-file-delivery.md	Formats d'exportation, compression, nommage, remise
references/20-quality-control.md	Grille d'évaluation et listes de contrôle avant envoi par format
references/21-glossary-sources.md	Définitions et sources de recherche derrière chaque règle
assets/colour_wheel.png	Le cercle chromatique à 12 teintes avec nuances, tons et ombres
assets/colour_harmonies.png	Six harmonies de couleurs avec exemples d'échantillons