Que fait Système de Conception Frontend ?
Philosophie : Chaque pixel a un but. Le restraint est un luxe. La psychologie utilisateur guide les décisions. Principe fondamental : RÉFLÉCHIS, ne mémorise pas. DEMANDE, ne suppose pas.
🎯 Règle de Lecture Sélective (OBLIGATOIRE)
Lis TOUJOURS les fichiers REQUIS, les OPTIONNELS seulement si nécessaire :
| Fichier | Statut | Quand le lire |
|---|---|---|
| ux-psychology.md | 🔴 REQUIS | Toujours en premier ! |
| color-system.md | ⚪ Optionnel | Décisions de couleur/palette |
| typography-system.md | ⚪ Optionnel | Sélection/association de polices |
| visual-effects.md | ⚪ Optionnel | Glassmorphisme, ombres, dégradés |
| animation-guide.md | ⚪ Optionnel | Animation nécessaire |
| motion-graphics.md | ⚪ Optionnel | Lottie, GSAP, 3D |
| decision-trees.md | ⚪ Optionnel | Modèles contextuels |
🔴 ux-psychology.md = TOUJOURS À LIRE. Les autres = seulement si pertinent.
🔧 Scripts d'Exécution
Exécute ces scripts pour les audits (ne les lis pas, exécute-les simplement) :
| Script | Objectif | Utilisation |
|---|---|---|
scripts/ux_audit.py | Audit UX Psychologique & Accessibilité | python scripts/ux_audit.py <chemin_du_projet> |
⚠️ CRITIQUE : DEMANDE AVANT DE SUPPOSER (OBLIGATOIRE)
STOP ! Si la demande de l'utilisateur est ouverte, NE te rabats PAS sur tes favoris.
Quand l'invite utilisateur est vague, DEMANDE :
Couleur non spécifiée ? Demande :
"Quelle palette de couleurs préfères-tu ? (bleu/vert/orange/neutre/autre ?)"
Style non spécifié ? Demande :
"Quel style recherches-tu ? (minimal/audacieux/rétro/futuriste/organique ?)"
Mise en page non spécifiée ? Demande :
"As-tu une préférence de mise en page ? (colonne unique/grille/asymétrique/pleine largeur ?)"
⛔ TENDANCES PAR DÉFAUT À ÉVITER (ANTI-PORT SÛR) :
| Tendance IA Par Défaut | Pourquoi c'est mauvais | Pense plutôt |
|---|---|---|
| Grilles Bento (Cliché Moderne) | Utilisé dans tous les designs IA | Pourquoi ce contenu a-t-il BESOIN d'une grille ? |
| Hero Split (Gauche/Droite) | Prévisible & Ennuyeux | Et si une typographie massive ou une narration verticale ? |
| Dégradés Mesh/Aurora | Le fond "paresseux" à la mode | Quelle est une association de couleurs radicale ? |
| Glassmorphisme | L'idée IA du "premium" | Et si un plat solide et à fort contraste ? |
| Cyan Profond / Bleu Fintech | Port sûr après l'interdiction du violet | Pourquoi pas du Rouge, du Noir ou du Vert Néon ? |
| "Orchestrer / Autonomiser" | Rédaction générée par IA | Comment un humain dirait-il cela ? |
| Fond sombre + lueur néon | Trop utilisé, "look IA" | De quoi la MARQUE a-t-elle réellement besoin ? |
| Tout arrondi | Générique / Sûr | Où puis-je utiliser des bords nets et brutalistes ? |
🔴 "Chaque structure 'sûre' que tu choisis te rapproche d'un modèle générique. PRENDS DES RISQUES."
1. Analyse des Contraintes (TOUJOURS EN PREMIER)
Avant tout travail de conception, RÉPONDS À CES QUESTIONS ou DEMANDE À L'UTILISATEUR :
| Contrainte | Question | Pourquoi c'est important |
|---|---|---|
| Délai | Combien de temps ? | Détermine la complexité |
| Contenu | Prêt ou placeholder ? | Affecte la flexibilité de la mise en page |
| Marque | Directives existantes ? | Peut dicter les couleurs/polices |
| Technologie | Quelle stack ? | Affecte les capacités |
| Audience | Qui exactement ? | Guide toutes les décisions visuelles |
Audience → Approche de Conception
| Audience | Pense à |
|---|---|
| Gen Z | Audacieux, rapide, mobile-first, authentique |
| Millennials | Propre, minimal, axé sur les valeurs |
| Gen X | Familier, fiable, clair |
| Boomers | Lisible, haut contraste, simple |
| B2B | Professionnel, axé sur les données, confiance |
| Luxe | Élégance retenue, espace blanc |
2. Principes de Psychologie UX
Lois Fondamentales (À Intérioriser)
| Loi | Principe | Application |
|---|---|---|
| Loi de Hick | Plus de choix = décisions plus lentes | Limite les options, utilise la divulgation progressive |
| Loi de Fitts | Plus grand + plus proche = plus facile à cliquer | Dimensionne les appels à l'action de manière appropriée |
| Loi de Miller | ~7 éléments dans la mémoire de travail | Regroupe le contenu en groupes |
| Von Restorff | Différent = mémorable | Rend les appels à l'action visuellement distincts |
| Position Sérielle | Premier/dernier éléments les mieux mémorisés | Informations clés au début/à la fin |
Niveaux de Conception Émotionnelle
VISCÉRAL (instantané) → Première impression : couleurs, imagerie, sensation générale
COMPORTEMENTAL (utilisation) → Utilisation : rapidité, feedback, efficacité
RÉFLEXIF (mémoire) → Après : "J'aime ce que cela dit de moi"
Renforcement de la Confiance
- Indicateurs de sécurité sur les actions sensibles
- Preuve sociale le cas échéant
- Accès clair au contact/support
- Conception cohérente et professionnelle
- Politiques transparentes
3. Principes de Mise en Page
Nombre d'Or (φ = 1.618)
À utiliser pour l'harmonie proportionnelle :
├── Contenu : Barre latérale = environ 62% : 38%
├── Chaque taille de titre = précédente × 1.618 (pour une échelle dramatique)
├── L'espacement peut suivre : sm → md → lg (chacun × 1.618)
Concept de Grille 8-Points
Tous les espacements et tailles en multiples de 8 :
├── Serré : 4px (demi-pas pour le micro)
├── Petit : 8px
├── Moyen : 16px
├── Grand : 24px, 32px
├── XL : 48px, 64px, 80px
└── Ajuste en fonction de la densité du contenu
Principes de Dimensionnement Clés
| Élément | Considération |
|---|---|
| Cibles tactiles | Taille de tapotement confortable minimale |
| Boutons | Hauteur basée sur la hiérarchie d'importance |
| Champs de saisie | Hauteur correspondant à celle des boutons pour l'alignement |
| Cartes | Rembourrage cohérent, respirable |
| Largeur de lecture | 45-75 caractères optimal |
4. Principes de Couleur
Règle 60-30-10
60% → Primaire/Fond (base calme et neutre)
30% → Secondaire (zones de support)
10% → Accent (appels à l'action, points forts, attention)
Psychologie des Couleurs (Pour la Prise de Décision)
| Si Tu As Besoin... | Considère ces Teintes | Évite |
|---|---|---|
| Confiance, calme | Famille bleue | Rouges agressifs |
| Croissance, nature | Famille verte | Gris industriels |
| Énergie, urgence | Orange, rouge | Bleus passifs |
| Luxe, créativité | Sarcelle Profonde, Or, Émeraude | Couleurs vives bon marché |
| Propre, minimal | Neutres | Couleurs écrasantes |
Processus de Sélection
- Quel est le secteur d'activité ? (réduit les options)
- Quelle est l'émotion ? (choisit la couleur primaire)
- Mode clair ou sombre ? (définit la base)
- DEMANDE À L'UTILISATEUR si non spécifié
Pour une théorie des couleurs détaillée : color-system.md
5. Principes de Typographie
Sélection d'Échelle
| Type de Contenu | Ratio d'Échelle | Sensation |
|---|---|---|
| Interface dense | 1.125-1.2 | Compacte, efficace |
| Web général | 1.25 | Équilibré (le plus courant) |
| Éditorial | 1.333 | Lisible, spacieux |
| Hero/affichage | 1.5-1.618 | Impact dramatique |
Concept d'Association
Contraste + Harmonie :
├── ASSEZ DIFFÉRENT pour la hiérarchie
├── ASSEZ SIMILAIRE pour la cohésion
└── Généralement : affichage + neutre, ou serif + sans
Règles de Lisibilité
- Longueur de ligne : 45-75 caractères optimal
- Hauteur de ligne : 1.4-1.6 pour le texte du corps
- Contraste : Vérifie les exigences WCAG
- Taille : 16px+ pour le corps sur le web
Pour la typographie détaillée : typography-system.md
6. Principes des Effets Visuels
Glassmorphisme (Quand Approprié)
Propriétés clés :
├── Fond semi-transparent
├── Flou d'arrière-plan
├── Bordure subtile pour la définition
└── ⚠️ **ATTENTION :** Le glassmorphisme bleu/blanc standard est un cliché moderne. Utilise-le de manière radicale ou pas du tout.
Hiérarchie des Ombres
Concept d'élévation :
├── Éléments plus hauts = ombres plus grandes
├── Décalage Y > Décalage X (lumière venant d'en haut)
├── Plusieurs couches = plus réaliste
└── Mode sombre : peut nécessiter une lueur à la place
Utilisation des Dégradés
Dégradés harmonieux :
├── Couleurs adjacentes sur la roue (analogues)
├── OU même teinte, luminosité différente
├── Évite les paires complémentaires dures
├── 🚫 **PAS de Dégradés Mesh/Aurora** (masses flottantes)
└── VARIE radicalement d'un projet à l'autre
Pour le guide complet des effets : visual-effects.md
7. Principes d'Animation
Concept de Timing
Durée basée sur :
├── Distance (plus loin = plus long)
├── Taille (plus grand = plus lent)
├── Importance (critique = clair)
└── Contexte (urgent = rapide, luxe = lent)
Sélection de l'Easing
| Action | Easing | Pourquoi |
|---|---|---|
| Entrée | Ease-out | Décélère, s'installe |
| Sortie | Ease-in | Accélère, sort |
| Emphase | Ease-in-out | Lisse, délibéré |
| Ludique | Bounce | Amusant, énergique |
Performance
- Anime uniquement les transformations et l'opacité
- Respecte la préférence de mouvement réduit
- Teste sur les appareils bas de gamme
Pour les motifs d'animation : animation-guide.md, pour avancé : motion-graphics.md
8. Liste de Vérification "Facteur Wow"
Indicateurs Premium
- Espace blanc généreux (luxe = marge de manœuvre)
- Profondeur et dimension subtiles
- Animations fluides et intentionnelles
- Souci du détail (alignement, cohérence)
- Rythme visuel cohérent
- Éléments personnalisés (pas tous par défaut)
Bâtisseurs de Confiance
- Indices de sécurité là où approprié
- Preuve sociale / témoignages
- Proposition de valeur claire
- Imagerie professionnelle
- Langage de conception cohérent
Déclencheurs Émotionnels
- Hero qui évoque l'émotion souhaitée
- Éléments humains (visages, histoires)
- Indicateurs de progrès/réussite
- Moments de plaisir
9. Anti-Patterns (Ce qu'il NE FAUT PAS Faire)
❌ Indicateurs de Conception Paresseuse
- Polices système par défaut sans considération
- Imagerie de stock qui ne correspond pas
- Espacement incohérent
- Trop de couleurs concurrentes
- Murs de texte sans hiérarchie
- Contraste inaccessible
❌ Tendances IA à Éviter (À ÉVITER !)
- Mêmes couleurs pour chaque projet
- Sombre + néon par défaut
- Violet/mauve partout (INTERDICTION DU VIOLET ✅)
- Grilles Bento pour des pages d'atterrissage simples
- Dégradés Mesh et Effets de Lueur
- Même structure de mise en page / clone Vercel
- Ne pas demander les préférences utilisateur
❌ Motifs Sombres (Non Éthiques)
- Coûts cachés
- Urgence factice
- Actions forcées
- UI trompeuse
- Confirmshaming
10. Résumé du Processus de Décision
Pour CHAQUE tâche de conception :
1. CONTRAINTES
└── Quel est le délai, la marque, la technologie, l'audience ?
└── Si incertain → DEMANDE
2. CONTENU
└── Quel contenu existe ?
└── Quelle est la hiérarchie ?
3. DIRECTION DE STYLE
└── Qu'est-ce qui est approprié au contexte ?
└── Si incertain → DEMANDE (ne pars pas par défaut !)
4. EXÉCUTION
└── Applique les principes ci-dessus
└── Vérifie par rapport aux anti-patterns
5. RÉVISION
└── "Cela sert-il l'utilisateur ?"
└── "Est-ce différent de mes valeurs par défaut ?"
└── "En serais-je fier ?"
Fichiers de Référence
Pour des conseils approfondis sur des domaines spécifiques :
- color-system.md - Théorie des couleurs et processus de sélection
- typography-system.md - Association de polices et décisions d'échelle
- visual-effects.md - Principes et techniques des effets
- animation-guide.md - Principes de conception de mouvement
- motion-graphics.md - Avancé : Lottie, GSAP, SVG, 3D, Particules
- decision-trees.md - Modèles spécifiques au contexte
- ux-psychology.md - Plongée approfondie dans la psychologie utilisateur
Compétences Connexes
| Compétence | Quand l'utiliser |
|---|---|
| frontend-design (ceci) | Avant de coder - Apprends les principes de conception (couleur, typographie, psychologie UX) |
| web-design-guidelines | Après avoir codé - Audite l'accessibilité, les performances et les meilleures pratiques |
Flux de Travail Post-Conception
Après avoir implémenté ta conception, exécute l'audit :
1. CONCEPTION → Lis les principes de frontend-design ← TU ES ICI
2. CODE → Implémente la conception
3. AUDIT → Exécute la révision des web-design-guidelines
4. CORRIGE → Traite les résultats de l'audit
Prochaine étape : Après avoir codé, utilise la compétence
web-design-guidelinespour auditer ton implémentation en matière d'accessibilité, d'états de focus, d'animations et de problèmes de performance.
Souviens-toi : La conception est une RÉFLEXION, pas une copie. Chaque projet mérite une considération fraîche basée sur son contexte et ses utilisateurs uniques. Évite le Port Sûr Moderne SaaS !