Directeur Artistique Web
Cadre de direction de design visuel organisé par intention émotionnelle (Chaud/Froid × Actif/Calme). Le premier système de référence design qui catégorise les sites par ce qu'ils vous font RESSENTIR, pas par leur apparence. Inclut 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 fasse 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 au langage visuel
- Choisir entre différentes approches de design (mode sombre vs clair, minimal vs riche, éditorial vs produit)
- Construire 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 semblent « basés sur des templates » car 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 des motifs de design web — 48 sites publics analysés sur 4 quadrants émotionnels
- Analyse des lacunes de 12 plateformes d'inspiration design (Awwwards, Dribbble, Godly, Mobbin, etc.)
Aperçu Central : Chaque plateforme d'inspiration design existante (Awwwards, Dribbble, Behance, Godly, Mobbin, SiteInspire, Lapa.ninja) catégorise par style visuel, secteur d'activité, plateforme ou couleur. AUCUNE plateforme n'organise par intention émotionnelle. C'est la lacune. Un « site sombre minimaliste » peut paraître 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 wireframe.
Le Quadrant Émotionnel :
CHAUD
(approche, confiance)
|
Chaud+Actif | Chaud+Calme
(énergie, | (confort,
plaisir) | 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 dans quel quadrant vous concevez. Un psychologue pour enfants appartient au quadrant Chaud+Calme. Un outil pour développeurs appartient au quadrant Froid+Actif. Concevoir le site d'un psychologue pour enfants avec l'esthétique de Vercel est une incohérence de positionnement — peu importe à quel point il a l'air « 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 : est-ce que cette référence RESSEMBLE à ma marque ? |
| Extraire les motifs de design (typographie, espacement, couleur, mouvement) | Contraintes budgétaires et techniques |
| Générer un document de direction design avec justification | Approbation finale de la direction avant de commencer le code |
| 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érences est un point de départ pour la conversation, pas une prescription. La meilleure direction design vient souvent de la combinaison d'éléments de différents 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 correspondant à 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érence — Signale lorsque les choix de design contredisent le positionnement de marque
- Mélange Inter-Quadrants — Guide le mélange intentionnel d'éléments de différents quadrants
Comment Utiliser
Obtenir une direction design pour un nouveau site web
Je conçois un site web pour [type de marque/entreprise].
Public cible : [qui].
Sensation de marque : [2-3 mots émotionnels].
Alternatives concurrentielles : [ce qu'ils utiliseraient à la place de cette marque].
Charge 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 [quoi éviter]. La marque est dans le secteur [secteur d'activité].
Montre-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 positionner la marque :
## Cartographie Émotionnelle de la Marque
**1. Que devrait ressentir un visiteur dans les 3 premières secondes ?**
[ ] En sécurité, bienvenu, à l'aise (→ Chaud)
[ ] Impressionné, curieux, intrigué (→ Froid)
**2. Quel devrait être le niveau d'énergie du site ?**
[ ] Dynamique, tourné vers l'avant, « les choses se passent » (→ Actif)
[ ] Retenu, spacieux, « prenez votre temps » (→ Calme)
**3. Quelle est la relation de la marque avec le visiteur ?**
[ ] Pair/ami/guide (→ Chaud)
[ ] Exprert/autorité/institution (→ Froid)
**4. Alternatives concurrentielles — que les gens utiliseraient-ils à la place ?**
(Cela détermine votre territoire visuel — vous devez avoir l'air DIFFÉRENT des alternatives)
Détermination du quadrant :
| Combinaison | Quadrant | Sensation Signature |
|---|---|---|
| Chaud + Actif | Chaleur Énergique | « C'est excitant ET convivial » |
| Chaud + Calme | Confort Bienveillant | « Je me sens en sécurité et compris ici » |
| Froid + Actif | Puissance Innovante | « C'est de 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 inter-quadrants :
- Empruntez UN élément d'un quadrant adjacent pour créer du 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érez-vous à la bibliothèque pour faire un choix spécifique :
## Document de Direction Design
**Quadrant** : [Chaud+Calme / Chaud+Actif / Froid+Actif / Froid+Calme]
**Références principales** : [3 sites de la bibliothèque]
**Accent inter-quadrant** : [1 élément d'un 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 + raison du rapport de contraste]
- **Système** : [monochromatique / complémentaire / analogue]
### Typographie
- **Titres** : [serif/sans/display + graisse + suggestion de police spécifique]
- **Corps** : [police + taille + hauteur de ligne + justification de la référence]
- **Personnalité** : [ce que la typographie dit de la marque]
### Espacement & Mise en Page
- **Densité** : [généreuse/modérée/compacte + référence]
- **Grille** : [colonnes + largeur max + justification]
- **Espace blanc** : [aggressif/équilibré/minimal]
- **Rythme des sections** : [alterné/constant/progressif]
### Mouvement & Interaction
- **Style d'animation** : [subtil/expressif/aucun + référence]
- **Comportement de défilement** : [lisse/standard/parallax]
- **États de survol** : [type de transformation + timing]
- **Transitions de page** : [type ou aucune]
### Photographie & 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/contenu/scindé/texte seul]
- **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 d'incohérence :
## Vérification d'Incohérence 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-serif en majuscules)
- [ ] Un visiteur du public cible se sentirait-il bienvenu ou intimidé ?
- [ ] Ce design a-t-il l'air 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érences — 48 Sites Web Publics Annotés
CHAUD + CALME — Confort Bienveillant
« 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, des images douces, une typographie accessible, des transitions douces. Ils privilégient la lisibilité et le confort émotionnel plutôt que l'impact visuel.
| # | Site | Secteur d'Activité | Mécanisme de Design Clé | Meilleure Page à Étudier | Avertissement Anti-Pattern |
|---|---|---|---|---|---|
| 1 | Headspace | Bien-être/Méditation | Formes arrondies + illustration chaleureuse + palette pastel. Donne l'impression d'un câlin doux. | Hero de la page d'accueil + flux d'onboarding | Les illustrations peuvent basculer dans le juvénile si mal équilibrées |
| 2 | Allbirds | Mode Durable | Photographie aux tons terre + textures naturelles + grille propre. Axé sur le produit mais chaleureux. | Pages de détail produit | Peut paraître trop « éco-entreprise » sans personnalité |
| 3 | Wildling Shoes | Chaussures Enfants | Photographie de nature + neutres chauds + flux organique. Donne l'impression d'une promenade en forêt. | Narration de défilement de la page d'accueil | Facile de perdre le focus produit dans l'imagerie nature |
| 4 | Kinfolk | Éditorial Style de Vie | Axé sur la typographie + espace blanc généreux + photographie chaleureuse. Confiance tranquille. | Mises en page d'articles | Peut paraître trop clairsemé si le contenu est mince |
| 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 serif + mise en page sobre. Chaleur sophistiquée. | Localisateur de magasins + pages produit | Frôle la limite entre Chaud+Calme et Froid+Calme |
| 7 | Everlane | Mode Éthique | Mise en page propre + photographie de style de vie chaleureuse + prix transparents. Honnêteté chaleureuse. | Page « À propos » + histoires d'usine | Le message de transparence peut sembler moralisateur s'il est excessif |
| 8 | Patagonia | Plein Air / Mission | Photographie chaleureuse et audacieuse + contenu axé sur la mission + profondeur éditoriale. Chaleur activiste. | Histoires environnementales | Un design axé sur l'activisme peut éloigner les publics non activistes |
| 9 | Nurture Life | Repas Enfants | Pastels doux + UI arrondie + photographie culinaire chaleureuse. Conviviale pour les parents. | Page de plans de repas | Une utilisation excessive du pastel peut sembler générique « marque de 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 donner l'impression de « rien à voir ici » |
| 11 | Ritual | Bien-être/Compléments | Accent jaune chaleureux + mise en page propre + chaleur scientifique. Confiance par la transparence. | Page de traçabilité des ingrédients | L'accent jaune peut sembler clinique s'il est excessif |
| 12 | Mejuri | Bijoux Accessibles | Photographie de 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 inter-quadrant : Tous les sites Chaud+Calme partagent une hauteur de ligne généreuse (1.6-1.8), des palettes atténuées/terreuses, et une photographie mettant en scène de vraies personnes 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 d'Activité | Mécanisme de Design Clé | Meilleure Page à Étudier | Avertissement Anti-Pattern |
|---|---|---|---|---|---|
| 1 | Notion | Productivité | Illustrations chaleureuses + UI produit propre + micro-interactions conviviales. Enthousiasme organisé. | Galerie de modèles + page d'accueil | Le style d'illustration est lourdement copié — trouvez le vôtre |
| 2 | Figma | Outil de Design | Dégradés vibrants + énergie collaborative + typographie audacieuse. Axé sur le design sans être froid. | Page communauté/plugins | Le design lourd en dégradés vieillit vite |
| 3 | Mailchimp | Marketing par Email | Illustration distinctive + jaune de marque chaleureux + UI ludique. Axé sur la personnalité. | Page d'accueil + page de tarification | Le style d'illustration décalé nécessite un fort engagement envers la marque |
| 4 | Loom | Communication Vidéo | Violet chaleureux + UI accessible + animations axées sur le produit. Une technologie qui ne semble pas technologique. | Sections de démonstration produit | La chaleur violette peut sembler corporate si elle est saturée |
| 5 | Intercom | Communication Client | Couleurs vives + texte conversationnel + mise en page dynamique. Autorité conviviale. | Pages de visite guidée produit | Une palette audacieuse peut submerger sans discipline d'espace blanc |
| 6 | Monday.com | Gestion de Projet | Palette arc-en-ciel + UI gamifiée + animations énergiques. Productivité qui donne de l'énergie. | Tableaux de bord + modèles | L'arc-en-ciel peut sembler chaotique sans organisation claire |
| 7 | Duolingo | Apprentissage des Langues | Verte vif + mascotte + animations ludiques. Apprentissage comme un jeu. | Gamification d'une leçon | Le côté « jeu » peut éclipser la crédibilité éducative |
| 8 | Stripe | Paiements | Dégradés + illustrations + technologie accessible. Puissance qui sourit. | Page d'accueil + documentation | Les dégradés peuvent sembler datés s'ils ne sont pas renouvelés |
| 9 | Linear | Suivi de Projets | Bleu vif + UI épurée + animations réactives. Action énergique et précise. | Fonctionnalités de la feuille de route | Peut sembler froid sans la chaleur de l'UI |
| 10 | Vercel | Déploiement Front-End | Noir/violet + animations élégantes + esthétique centrée sur le code. Vitesse + finition. | Page d'accueil + page démo | Imité par TOUS les outils de développement — se démarquez |
| 11 | Webflow | Conception Web | Dégradés + illustrations + sensation de puissance créative. Design qui bouge. | Showcase des templates + page d'accueil | Les sites Webflow peuvent ressembler à une « vitrine de fonctionnalités » sans direction |
| 12 | Netlify | Infrastructure Web | Orange vif + lanternes de bord + design fonctionnel. Infra amicale. | Page d'accueil + documentation | Similaire à Vercel — besoin d'identité distincte |
Motif inter-quadrant : Les sites Chaud+Actif utilisent des illustrations plus que des photos, une typographie de titre audacieuse (poids 700+), et des animations expérimentées. L'interface utilisateur semble « vivante » — survoler un bouton n'est pas un simple effet de fondu. Les palettes utilisent 2 à 3 couleurs vives avec beaucoup d'espace blanc pour l'équilibre.
FROID + ACTIF — Puissance Innovante
« C'est de pointe et sérieux »
Les sites de ce quadrant utilisent : des palettes sombres/froides, une typographie audacieuse, des animations dynamiques, des visuels abstraits. Ils ressemblent à une salle de contrôle — sous tension, axés sur les données, puissants.
| # | Site | Secteur d'Activité | Mécanisme de Design Clé | Meilleure Page à Étudier | Avertissement Anti-Pattern |
|---|---|---|---|---|---|
| 1 | Dev.to | Communauté Développeurs | Design fonctionnel foncé + contenu communautaire + UI utilitaire. Sérieux mais ouvert. | Fil d'accueil + articles | Peut sembler négligé sans attention aux détails |
| 2 | GitHub | Hébergement de Code | Palette froide + UI axée sur les données + interface dense. Puissance utilitaire. | Pages de dépôt + demandes de tirage | Peut sembler submergeant pour les nouveaux utilisateurs |
| 3 | CrowdStrike | Cybersécurité | Fond noir + accents rouges + données de menace en temps réel. Alerte de puissance. | Pages de couverture des menaces | Le design axé sur la peur peut sembler manipulateur |
| 4 | Palantir | Analyse de Données | Design dense et orienté données + esthétique de tableau de bord + typographie à haute densité d'information. Sérieux et complexe. | Pages de cas d'utilisation peut sembler peu accueillant pour les non-experts | |
| 5 | Figma (dev mode) | Design Technologie | Foncé avec accent accessible + mode développeur + UI utilitaire. Focus sur le développeur. | Mode développeur | Dépend de l'accès Figma |
| 6 | Tailwind CSS | Framework CSS | Documentation axée sur l'utilitaire + démos de code en direct + fonds avec code. Puissance utilitaire. | Pages de documentation | Peut sembler trop technique si sans contexte |
| 7 | 8th Light | Conseil en Logiciel | Design épuré + contenu éditorial + vitrine de article technique. Axé sur la compétence. | Pages de blog + cas d'utilisation | Peut sembler trop corporate si sans personnalité |
| 8 | Clarisights | Analyse Marketing | Esthétique tableau de bord foncé + palette froide + visualisation de données. Tableau de bord premium. | Pages de fonctionnalités | Surcharge d'informations possible sans hiérarchie claire |
| 9 | Superset (Apache) | Exploration de Données | Vif minimaliste + palette violet/bleu + design open source. Orienté données. | Pages de fonctionnalités | Documentation lourde peut submerger |
| 10 | Apache Spark | Moteur d'Analyse | Foncé/bleu + design orienté info + documentation d'API. Ça fait le travail. | Pages d'API + guides | Peut sembler daté |
| 11 | DeepMind | Recherche IA | Foncé/noir + animations froides avec design épuré + orienté recherche. Dernier cri. | Pages de recherche | Complexité accessible pour professionnel |
| 12 | OpenAI | Recherche IA | Foncé + animations + design épuré. Innovant et accessible. | Page d'accueil + recherche | Accès contrôlé peut limiter démos |
Motif inter-quadrant : Les sites Froid+Actif partagent des fonds sombres avec un texte à contraste élevé, un espacement minimum pour la densité d'informations, et des données en temps réel ou des états dynamiques. Les animations sont souvent réactives aux entrées utilisateur. Ce sont les sites les plus « fonctionnels » esthétiquement.
FROID + CALME — Autorité Raffinée
« C'est élevé et exclusif »
Les sites de ce quadrant utilisent : des couleurs froides désaturées, un espacement généreux, une typographie sereine, un mouvement minimal, des visuels soigneusement sélectionnés. Ils ressemblent à une galerie — spacieux, intentionnel et exigeant.
| # | Site | Secteur d'Activité | Mécanisme de Design Clé | Meilleure Page à Étudier | Avertissement Anti-Pattern |
|---|---|---|---|---|---|
| 1 | Apple | Technologie | Design épuré + produits isolés + espace blanc généreux. Élégance qui ne s'excuse pas. | Pages produit + page d'accueil | Imité par toutes les marques de luxe — besoin de s'en différencier |
| 2 | Cartier | Bijouterie de Luxe | Fond noir + photographie produit luxueuse + typographie sereine. Présence silencieuse. | Pages de catégories de produits + pages produit | Peut sembler inaccessible sans éléments d'approche |
| 3 | Rolex | Montres de Luxe | Arrière-plan épuré + typographie en capitales + mise en page contrôlée. Tradition intemporelle. | Archives + pages produit | Manque de mouvement pour le moderne |
| 4 | Burberry | Mode de Luxe | Esthétique galerie + photographie artistique + défilement contrôlé. Pavillon d'exposition. | Pages de collection | Design lourd en images peut être lent |
| 5 | Mercedes-Benz | Automobile | Grille épurée + photographie de précision + design informatif. Précision et luxe. | Pages de modèles | Palette froide peut sembler froide — pas assez chaleureuse |
| 6 | Porsche | Automobile | Design axé sur l'action + images dynamiques + sentiment exclusif. Performance et luxe. | Pages de modèles + configuraateur | Plus orienté vitesse que certains publics de luxe veulent |
| 7 | Gallery Fumi | Galerie d'Art | Minimaliste + photos d'art + navigation calme. Dernier cri curatorial. | Exposition archives | Contenu très limité — pas pour grands sites |
| 8 | Miu Miu | Mode | Désaturé + expérimental + typographie froide. Avant-garde et élégant. | Page d'accueil + collection | Très design — peut dérouter visiteurs non mode |
| 9 | Louis Vuitton | Mode/Luxe | Marron foncé + typographie serif + mise en page galerie. Héritage et luxe. | Collection + hommages | Très lourd en images — besoin de contenu solide |
| 10 | Vacheron Constantin | Montres de Luxe | Design noir+or + typographie sereine + imagerie patrimoine. Savoir-faire intemporel. | Pages d'histoire + collection | Peut sembler très traditionnel pour certains |
| 11 | Christies | Maison de Ventes aux Enchères | Design épuré + mise en page galerie + accents prestige. Autorité discrète. | Pages d'enchères + éditorial | Orienté vente — peut sembler transactionnel |
| 12 | Prada | Mode de Luxe | Fond blanc + photographie artistique + disposition expérimentale. Avant-garde et minimal. | Page d'accueil + éditoriaux | Très expérimental — pas pour marques prudentes |
Motif inter-quadrant : Les sites Froid+Calme sont les plus « exigeants » visuellement — ils demandent à l'utilisateur de ralentir et d'apprécier. Les images sont grandes et clairsemées, le texte est dense mais concentré, la navigation est secondaire. Ils n'essaient JAMAIS d'être amusants.
Conseils de Mélange Inter-Quadrants
Ces combinaisons créent une tension intentionnelle qui semble fraîche et délibérée :
| Base | Accent | Résultat | À ne PAS faire |
|---|---|---|---|
| Chaud+Calme | Froid+Actif | Un site confortable mais pas endormi | Chaud+Calme + Froid+Calme = trop calme |
| Froid+Actif | Chaud+Actif | Technologie puissante qui sourit | Froid+Actif + Chaud+Calme = conflit d'énergie |
| Chaud+Actif | Froid+Actif | Plaisir avec crédibilité | Chaud+Actif + Froid+Calme = désorientation |
| Froid+Calme | Chaud+Calme | Galerie accessible (Chaud nuance Froid) | Froid+Calme + Chaud+Actif = affrontement tonal |
Règle principale : Adjacent seulement, jamais opposé.
Comment Utiliser la Bibliothèque
- Trouvez votre quadrant via le questionnaire d'émotion de marque
- Parcourez les 12 références — n'en choisissez pas plus de 5 pour commencer
- Lisez les annotations — le « Mécanisme de Design Clé » et l'« Avertissement Anti-Pattern » sont ce qui rend ces références utiles
- Visitez les sites — les captures d'écran ne suffisent pas ; regardez les animations, le défilement, les états de survol
- Extrayez les décisions — remplissez le Document de Direction Design pour vos choix spécifiques
Contributeurs & Crédits
Ce skill est maintenu par Matthieu Guía (https://muse.place/matthieu).
Processus de contribution :
- Suggestions de nouvelles références via PR de la bibliothèque de marques
- Améliorations du processus de mapping émotionnel
- Corrections de bugs dans le design du Directiveur
- Ajouts de cas d'utilisation ou d'exemples
Publié le 30 mai 2025 sous licence MIT.