---
name: interview-charte-graphique
description: Pose une interview de design structurée en 4 blocs (16 questions) pour construire la charte graphique complète d'un site avant tout visuel — produit et affiche à Claude Design que ce skill sert de point de départ à un nouveau projet de site, d'une marque, d'une refonte visuelle, ou quand l'utilisateur dit "crée ma charte graphique", "j'ai besoin d'une identité visuelle", "aide-moi à définir le style de mon site", ou "interview-moi sur mon projet avant de designer".
---

# Interview — Charte graphique

Avant de proposer la moindre couleur, la moindre police ou la moindre mise en page, pose ces questions à l'utilisateur, en 4 blocs, dans cet ordre. Le Bloc A est le socle minimal — jamais sauté. Les Blocs B, C, D approfondissent chaque dimension du design : ils peuvent être posés à la suite, ou seulement si l'utilisateur veut aller plus loin qu'une identité de base. Chaque question évite une direction créative générique — n'en saute aucune sans le signaler.

## Bloc A — Le socle (8 questions, toujours posées)

1. **Quel est le produit ou l'activité de l'entreprise ?** — En une ou deux phrases, ce qui est vendu et à qui.
2. **Quel est le nom de la marque ?** — Si l'utilisateur n'en a pas, propose 3 à 5 options courtes, mémorisables, disponibles en `.fr` ou `.com`.
3. **Quelle est l'ambiance visuelle ou la personnalité recherchée ?** — Fun, énergétique, premium, épuré, minimaliste, artisanal, technique… Demande 2-3 adjectifs précis, pas un seul mot vague.
4. **Quels sont les produits ou les offres phares à mettre en avant ?** — Ce qui doit sauter aux yeux en priorité sur la page d'accueil.
5. **Y a-t-il des styles ou des clichés à éviter absolument ?** — Explicite : dégradés violet-bleu, icônes en cercle coloré, polices système par défaut, structure en 3 colonnes symétriques — cite ces exemples si l'utilisateur ne sait pas quoi répondre.
6. **Y a-t-il déjà des logos, des polices ou des couleurs de marque existants ?** — Si oui, les respecter comme contrainte de départ. Si non, passer en mode « imagination » et proposer une identité complète à l'étape suivante.
7. **Quelle est la direction visuelle générale souhaitée ?** — Couleurs vives et contrastées, palette sombre, style néon, grille façon mosaïque (bento), minimalisme monochrome… Si l'utilisateur hésite, propose 2-3 directions concrètes à partir des réponses précédentes.
8. **Quelle émotion ou quelle action l'utilisateur du site doit-il ressentir ou faire en quittant la page ?** — Se souvenir de la marque, cliquer sur un bouton précis, ressentir de la confiance, comprendre une offre complexe en un coup d'œil.

## Bloc B — Logo et système visuel (4 questions)

9. **Le logo doit-il fonctionner seul, en icône réduite (favicon, app), sans perdre son sens ?** — Détermine si le logo a besoin d'une version « symbole seul » en plus de la version complète avec le nom.
10. **Sur quels fonds le logo doit-il rester lisible ?** — Fond clair, fond sombre, photo, dégradé — chaque cas peut demander une variante de couleur ou de contraste du logo.
11. **Le style d'icônes doit-il être plutôt filiaire (traits fins) ou plein (formes pleines) ?** — Un mélange des deux dans une même page est l'une des incohérences visuelles les plus visibles à l'œil nu.
12. **Y a-t-il un élément graphique récurrent qui doit revenir sur toutes les pages ?** — Une forme, une texture, un motif de fond, un dégradé signature — ce qui rend une page reconnaissable même sans le logo visible.

## Bloc C — Mise en page et mouvement (2 questions)

13. **Le site doit-il privilégier une mise en page dense et informative, ou aérée et minimale ?** — Détermine directement les espacements, la taille des marges, et la quantité de texte visible par écran.
14. **Le site doit-il bouger (animations au scroll, transitions, effets de survol) ou rester volontairement statique ?** — Si le mouvement est souhaité, préciser si l'effet recherché est plutôt subtil et discret ou marqué et spectaculaire — cela oriente vers les skills GSAP ou Design Loop décrits dans la Section 03 de ce guide.

## Bloc D — Contraintes de lisibilité (2 questions)

15. **Le site doit-il rester lisible pour des visiteurs avec une vue réduite ou un daltonisme ?** — Si oui, contraintes supplémentaires : contraste minimum entre texte et fond, ne jamais faire reposer une information uniquement sur la couleur (ex. rouge = erreur, vert = succès, toujours doubler d'un texte ou d'une icône).
16. **Le site est-il consulté majoritairement sur mobile, sur ordinateur, ou à parts égales ?** — Oriente la priorité de conception : une charte pensée d'abord pour mobile n'a pas les mêmes contraintes de taille de police et d'espacement qu'une charte pensée d'abord pour grand écran.

## Après l'interview

Une fois le Bloc A répondu au minimum (les Blocs B, C, D affinent mais ne bloquent pas la suite) :

1. **Résume en une phrase** la direction retenue, pour validation avant de continuer.
2. **Propose 2 à 3 pistes visuelles nommées**, chacune avec : une palette de couleurs (codes hexadécimaux précis, jamais une description approximative), un pairing de polices (une police d'affichage pour les titres, une police de texte courant), et 2-3 lignes qui décrivent concrètement à quoi ressemblerait la page d'accueil avec cette direction.
3. **Laisse l'utilisateur choisir ou combiner**, puis génère un fichier `design-system.md` qui consolide la direction retenue : couleurs, typographies, espacements de base, style des composants (boutons, cartes), et ton de la marque en 3-4 lignes.

## Règle absolue

Ne jamais proposer de design tant que le Bloc A n'a pas de réponse, même partielle. Un design proposé avant l'interview complète est un design générique par construction — c'est exactement le problème que ce skill existe pour éviter.