Que fait Directeur de Conception Web ?
Cadre de direction visuelle organisé par intention émotionnelle (Chaud/Froid x Actif/Calme). Le premier système de référence en design qui catégorise les sites par ce qu'ils vous font RESSENTIR, pas par leur apparence. Comprend 48 références de sites Web publics annotés.
Quand utiliser cette compétence
- Démarrer un nouveau projet de site Web et décider de la direction visuelle avant de coder
- Un client dit « Je veux que ça ait l'air professionnel mais chaleureux » et vous devez traduire cela en décisions de design concrètes
- Vous avez un positionnement de marque (Dunford, StoryBrand) et devez le mapper à un langage visuel
- Choisir entre différentes approches de design (mode sombre vs clair, minimal vs riche, éditorial vs produit)
- Créer un mood board à partir de références qui correspondent au territoire émotionnel de la marque
- Lorsque les designs générés par IA reviennent « génériques » parce qu'ils manquent de direction intentionnelle
Fondement méthodologique
Sources :
- Design émotionnel (Don Norman, 2004) — traitement viscéral, comportemental, réflexif
- Théorie du positionnement de marque (April Dunford, « Obviously Awesome ») — les alternatives concurrentielles définissent le territoire visuel
- Recherche en psychologie des couleurs — spectre chaud/froid et réponse comportementale
- Analyse de motifs de conception Web — 48 sites publics analysés dans 4 quadrants émotionnels
- Analyse des lacunes de 12 plateformes d'inspiration de design (Awwwards, Dribbble, Godly, Mobbin, etc.)
Idée centrale : Chaque plateforme d'inspiration de design existante (Awwwards, Dribbble, Behance, Godly, Mobbin, SiteInspire, Lapa.ninja) catégorise par style visuel, secteur d'activité, plateforme ou couleur. ZÉRO plateforme organise par intention émotionnelle. C'est la lacune. Un « site sombre minimal » peut sembler luxueux (Cartier) ou menaçant (CrowdStrike) — le style visuel est le même, l'effet émotionnel est opposé. Le style sans intention n'est que décoration. L'intention sans style n'est qu'un fil de fer.
Le quadrant émotionnel :
CHAUD
(approche, confiance)
|
Chaud+Actif | Chaud+Calme
(énergie, | (confort,
joie) | sécurité)
|
ACTIF ---------+-------- CALME
(élan, | (retenue,
disruption) | autorité)
|
Froid+Actif | Froid+Calme
(innovation,| (luxe,
puissance) | exclusivité)
|
FROID
(distance, précision)
Pourquoi c'est important : Le positionnement de marque détermine le quadrant dans lequel vous concevez. Un psychologue pour enfants appartient à Chaud+Calme. Un outil pour développeurs appartient à Froid+Actif. Concevoir le site d'un psychologue pour enfants avec l'esthétique de Vercel est une erreur de positionnement — peu importe à quel point c'est « propre ».
Ce que Claude fait vs Ce que vous décidez
« Claude sélectionne les références et les motifs. Vous validez l'adéquation émotionnelle. »
| Claude gère | Vous fournissez |
|---|---|
| Mapper le positionnement de marque au quadrant émotionnel | Valeurs de la marque, public cible, alternatives concurrentielles |
| Sélectionner les références pertinentes dans la bibliothèque | Vérification intuitive : cette référence RESSEMBLE-t-elle à ma marque ? |
| Extraire les motifs de design (typographie, espacement, couleur, mouvement) | Contraintes budgétaires et techniques |
| Générer un document de direction de design avec justification | Approbation finale de la direction avant de commencer le codage |
| Signaler les incohérences de positionnement (marque chaleureuse + design froid) | Contexte client que Claude ne peut pas voir |
Rappelez-vous : La bibliothèque de référence est un point de départ pour la conversation, pas une prescription. La meilleure direction de design vient souvent de la combinaison d'éléments entre quadrants — une palette Chaud+Calme avec une typographie Froid+Actif, par exemple.
Ce que fait cette compétence
- Positionnement émotionnel — Mappe le positionnement de marque au quadrant émotionnel correct
- Sélection de références — Propose 3 à 5 sites Web publics annotés qui correspondent à la sensation cible
- Extraction de motifs — Identifie les mécanismes de design spécifiques qui créent chaque effet émotionnel
- Document de direction — Génère un brief de design avec palette, typographie, espacement, mouvement et décisions de mise en page
- Détection d'incohérences— Signale lorsque les choix de design contredisent le positionnement de la marque
- Mélange entre quadrants — Guide le mélange intentionnel d'éléments de différents quadrants
Comment utiliser
Obtenir une direction de design pour un nouveau site Web
Je conçois un site Web pour [marque/type d'entreprise].
Public cible : [qui].
Sensation de marque : [2-3 mots émotionnels].
Alternatives concurrentielles : [ce qu'ils utiliseraient à la place de cette marque].
Chargez la compétence web-design-director.
Trouver des références pour une sensation spécifique
J'ai besoin de références de sites Web qui ressemblent à [description émotionnelle].
Pas [ce qu'il faut éviter]. La marque est dans le secteur [secteur].
Montrez-moi 5 références annotées de la bibliothèque.
Auditer un design existant par rapport au positionnement de marque
Voici notre site actuel : [URL ou capture d'écran].
Notre positionnement de marque est : [déclaration de positionnement].
Le design correspond-il à l'intention émotionnelle ? Qu'est-ce qui est incohérent ?
Instructions
Étape 1 : Déterminer le quadrant émotionnel
Posez ces questions pour placer la marque :
## Cartographie émotionnelle de la marque
**1. Que devrait ressentir un visiteur dans les 3 premières secondes ?**
[ ] En sécurité, accueilli, à l'aise (→ Chaud)
[ ] Impressionné, curieux, intrigué (→ Froid)
**2. Quel devrait être le niveau d'énergie du site ?**
[ ] Dynamique, tourné vers l'avant, « les choses bougent » (→ Actif)
[ ] Retenu, spacieux, « prenez votre temps » (→ Calme)
**3. Quelle est la relation de la marque avec le visiteur ?**
[ ] Pair/ami/guide (→ Chaud)
[ ] Expert/autorité/institution (→ Froid)
**4. Alternatives concurrentielles — que les gens utiliseraient-ils à la place ?**
(Cela détermine votre territoire visuel — vous devez être DIFFÉRENT des alternatives)
Détermination du quadrant :
| Combinaison | Quadrant | Sensation signature |
|---|---|---|
| Chaud + Actif | Chaleur Énergique | « C'est excitant ET convivial » |
| Chaud + Calme | Confort Nourricier | « Je me sens en sécurité et compris ici » |
| Froid + Actif | Puissance Innovante | « C'est à la pointe et sérieux » |
| Froid + Calme | Autorité Raffinée | « C'est élevé et exclusif » |
Étape 2 : Sélectionner des références dans la bibliothèque
Choisissez 3 à 5 références du quadrant correspondant. Pour chacune, notez :
- Quel mécanisme de design spécifique crée l'effet émotionnel
- Quelle section/page le démontre le mieux
- Quoi emprunter vs quoi laisser de côté
Règles de mélange entre quadrants :
- Empruntez UN élément d'un quadrant adjacent pour le contraste (par exemple, typographie Froid+Actif sur une palette Chaud+Calme)
- N'empruntez JAMAIS du quadrant opposé (éléments Froid+Calme sur un site Chaud+Actif = confusion)
- Les quadrants adjacents partagent un axe : Chaud+Calme et Chaud+Actif partagent la chaleur ; Froid+Calme et Froid+Actif partagent la précision
Étape 3 : Extraire les décisions de design
Pour chaque dimension de design, référencez la bibliothèque pour faire un choix spécifique :
## Document de direction de design
**Quadrant** : [Chaud+Calme / Chaud+Actif / Froid+Actif / Froid+Calme]
**Références principales** : [3 sites de la bibliothèque]
**Accent entre quadrants** : [1 élément du quadrant adjacent, le cas échéant]
### Palette de couleurs
- **Arrière-plan** : [couleur spécifique + site de référence qui l'utilise]
- **Accent principal** : [couleur spécifique + justification émotionnelle]
- **Texte** : [foncé/clair + raisonnement du rapport de contraste]
- **Système** : [monochromatique / complémentaire / analogue]
### Typographie
- **Titres** : [serif/sans/display + poids + suggestion de police spécifique]
- **Corps** : [police + taille + interlignage + justification de la référence]
- **Personnalité** : [ce que la police dit de la marque]
### Espacement et mise en page
- **Densité** : [généreux/moderé/compact + référence]
- **Grille** : [colonnes + largeur max + justification]
- **Espace blanc** : [agressif/équilibré/minimal]
- **Rythme des sections** : [alterné/constant/progressif]
### Mouvement et interaction
- **Style d'animation** : [subtil/expressif/aucun + référence]
- **Comportement de défilement** : [lisse/standard/parallaxe]
- **États de survol** : [type de transformation + timing]
- **Transitions de page** : [type ou aucune]
### Photographie et imagerie
- **Style** : [photographie/illustration/abstrait/mixte]
- **Direction émotionnelle** : [référence au quadrant du directeur d'image minimaliste]
- **Traitement** : [pleine couleur/atténué/duotone/grain]
### Motif de mise en page
- **Hero** : [pleine largeur/encadré/divisé/texte uniquement]
- **Cartes** : [bordurées/sans bordure/surélevées/plates]
- **Navigation** : [haut/côté/minimale/cachée]
Étape 4 : Valider par rapport au positionnement
Avant de finaliser, effectuez la vérification des incohérences :
## Vérification des incohérences de positionnement
- [ ] La température de couleur correspond-elle à la chaleur de la marque ? (marque chaleureuse = couleurs chaudes)
- [ ] Le niveau d'animation correspond-il à l'énergie de la marque ? (marque calme ≠ animations agressives)
- [ ] La typographie correspond-elle au niveau d'autorité de la marque ? (marque ludique ≠ police sans empattement en majuscules)
- [ ] Un visiteur du public cible se sentirait-il accueilli ou intimidé ?
- [ ] Ce design est-il DIFFÉRENT des alternatives concurrentielles ?
- [ ] Ce design fonctionnerait-il pour le PIRE jour de la marque ? (pas seulement le jour du lancement)
Bibliothèque de référence — 48 sites Web publics annotés
CHAUD + CALME — Confort Nourricier
« Je me sens en sécurité et compris ici »
Les sites de ce quadrant utilisent : des palettes de couleurs chaudes, un espacement généreux, une imagerie douce, une typographie accessible, des transitions douces. Ils privilégient la lisibilité et le confort émotionnel à l'impact visuel.
| # | Site | Secteur | Mécanisme de design clé | Meilleure page à étudier | Avertissement anti-motif |
|---|---|---|---|---|---|
| 1 | Headspace | Bien-être/Méditation | Formes arrondies + illustration chaleureuse + palette pastel. Senteur comme un doux câlin. | Page d'accueil hero + flux d'onboarding | Les illustrations peuvent devenir enfantines si mal équilibrées |
| 2 | Allbirds | Mode Durable | Photographie aux tons terreux + textures naturelles + grille propre. D'abord produit mais chaleureux. | Pages de détails produits | Peut sembler trop « éco-entreprise » sans personnalité |
| 3 | Wildling Shoes | Chaussures Enfants | Photographie de nature + neutres chauds + flux organique. Senteur comme une promenade en forêt. | Récit de défilement de la page d'accueil | Facile de perdre le focus produit dans l'imagerie naturelle |
| 4 | Kinfolk | Éditorial Style de Vie | Axé typographie + espace blanc généreux + photographie chaleureuse. Confiance silencieuse. | Mises en page d'articles | Peut sembler trop dépouillé si le contenu est maigre |
| 5 | Cereal Magazine | Voyage/Design | Palette chaude atténuée + grille éditoriale + imagerie contemplative. Rythme lent. | Guides de voyage | Un faible contraste peut nuire à la lisibilité |
| 6 | Aesop | Beauté/Soins | Photographie produit aux tons chauds + typographie avec empattement + mise en page sobre. Chaleur sophistiquée. | Localisateur de magasins + pages produits | Frôle la limite entre Chaud+Calme et Froid+Calme |
| 7 | Everlane | Mode Ethique | Mise en page propre + photographie style de vie chaleureuse + prix transparents. Honnêteté chaleureuse. | Page « À propos » + histoires d'usine | Le message de transparence peut sembler moralisateur si excessif |
| 8 | Patagonia | Plein Air/Mission | Photographie chaleureuse audacieuse + contenu axé sur la mission + profondeur éditoriale. Chaleur activiste. | Histoires environnementales | Un design axé sur l'activisme peut aliéner les publics non activistes |
| 9 | Nurture Life | Repas Enfants | Pastels doux + UI arrondie + photographie alimentaire chaleureuse. Adapté aux parents. | Page de plan de repas | L'abus de pastels peut sembler générique « marque bébé » |
| 10 | Organic Basics | Essentiels Durables | Tons neutres + espace de respiration + navigation minimale. Commerce calme. | Pages de catégories de produits | Trop minimal peut sembler « rien à voir ici » |
| 11 | Ritual | Bien-être/Compléments | Accent jaune chaud + mise en page propre + chaleur scientifique. Confiance par la transparence. | Page de traçabilité des ingrédients | L'accent jaune peut sembler clinique si excessif |
| 12 | Mejuri | Bijoux Accessibles | Photographie style de vie chaleureuse + accents or doux + grille e-commerce propre. Luxe accessible. | Pages de collection | Équilibrer la sensation de luxe avec des prix accessibles |
Motif entre quadrants : Tous les sites Chaud+Calme partagent un interlignage généreux (1,6-1,8), des palettes atténuées/terreuses, et une photographie mettant en scène de vrais humains dans des environnements naturels. La navigation est toujours simple. Les animations sont toujours subtiles.
CHAUD + ACTIF — Chaleur Énergique
« C'est excitant ET convivial »
Les sites de ce quadrant utilisent : des couleurs vives, des animations dynamiques, des illustrations ludiques, une typographie énergique, des éléments interactifs. Ils ressemblent à un ami enthousiaste qui vous montre quelque chose d'incroyable.
| # | Site | Secteur | Mécanisme de design clé | Meilleure page à étudier | Avertissement anti-motif |
|---|---|---|---|---|---|
| 1 | Notion | Productivité | Illustrations chaleureuses + UI produit propre + micro-interactions amicales. Enthousiasme organisé. | Galerie de modèles + page d'accueil | Le style d'illustration est largement copié — trouvez le vôtre |
| 2 | Figma | Outil de Design | Dégradés vibrants + énergie collaborative + police audacieuse. Axé design sans être froid. | Page communauté/plugins | Le design avec dégradés vieillit vite |
| 3 | Mailchimp | Marketing Email | Illustration distinctive + jaune de marque chaleureux + UI ludique. Axé personnalité. | Page d'accueil + page de prix | Le style d'illustration excentrique nécessite un fort engagement de marque |
| 4 | Loom | Communication Vidéo | Violet chaleureux + UI accessible + animations axées produit. Tech qui ne fait pas tech. | Sections de démonstration produit | La chaleur violette peut sembler corporate si trop saturée |
| 5 | Intercom | Communication Client | Couleurs vives + texte conversationnel + mise en page dynamique. Autorité amicale. | Pages de visite guidée produit | Une palette audacieuse peut submerger sans discipline d'espace blanc |
| 6 | Monday.com | Gestion de Projet | Palette de couleurs vives + UI gamifiée + animations dynamiques. Productivité énergique. | Modèles de tableau de bord + intégrations | Trop de couleurs peut submerger sans discipline d'espace blanc |
| 7 | Duolingo | Éducation Linguistique | Illustrations ludiques + mascotte + gamification. Apprentissage par la joie. | Flux de leçons + séquence | La gamification peut sembler forcée si le contenu est sérieux |
| 8 | Quip | Édition Collaborative | Conception centrée sur le texte + UI propre + interactions légères. Productivité humble. | Pages de fonctionnalités + intégrations | L'UI propre peut sembler générique sans une marque forte |
| 9 | Pitch | Présentations | Typographie audacieuse + dégradés vifs + animations. Confiance créative. | Galerie de modèles + page d'accueil | Les dégradés peuvent sembler datés s'ils ne sont pas tendance |
| 10 | InVision | Prototypage Design | Illustrations vives + UI centrée collaboration + palette chaude. Créativité d'équipe. | Pages de fonctionnalités + études de cas | Peut sembler dispersé sans focus clair sur les fonctionnalités |
| 11 | Trello | Gestion de Tâches | Design ludique et coloré + illustrations + interactions. Productivité accessible. | Tableaux + automatisations | Trop ludique peut nuire à la crédibilité professionnelle |
| 12 | Basecamp | Outil de Projet | Design minimal mais chaleureux + UI axé texte + palette combinée. Productivité humaine. | Pages de fonctionnalités + tarification | Minimal chaud peut sembler peu sophistiqué |
Motif entre quadrants : Tous les sites Chaud+Actif partagent une illustration distinctive, des animations expressives (éléments de rebond/rebondissement) et des micro-interactions qui récompensent l'engagement. La typographie est souvent mixte (sans empattement pour les titres, lisible pour le corps). Le mouvement est fonctionnel, pas décoratif.
FROID + ACTIF — Puissance Innovante
« C'est à la pointe et sérieux »