Système de Conception Frontend
Philosophie : Chaque pixel a un but. La retenue est un luxe. La psychologie de l'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)
Lire les fichiers REQUIS toujours, les OPTIONNELS seulement si nécessaire :
| Fichier | Statut | Quand le lire |
|---|---|---|
| ux-psychology.md | 🔴 REQUIS | Toujours lire 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 = À LIRE TOUJOURS. Les autres = uniquement si pertinent.
🔧 Scripts d'Exécution
Exécutez ces audits (ne les lisez pas, exécutez-les simplement) :
| Script | Objectif | Utilisation |
|---|---|---|
ux_audit validateur | Audit de Psychologie UX et Accessibilité | call_tool_checklist |
⚠️ CRITIQUE : DEMANDEZ AVANT DE SUPPOSER (OBLIGATOIRE)
STOP ! Si la demande de l'utilisateur est ouverte, NE vous rabattez PAS par défaut sur vos favoris.
Lorsque la demande de l'utilisateur est vague, DEMANDEZ :
Couleur non spécifiée ? Demandez :
"Quelle palette de couleurs préférez-vous ? (bleu/vert/orange/neutre/autre ?)"
Style non spécifié ? Demandez :
"Quel style recherchez-vous ? (minimal/audacieux/rétro/futuriste/organique ?)"
Mise en page non spécifiée ? Demandez :
"Avez-vous une préférence de mise en page ? (colonne unique/grille/asymétrique/pleine largeur ?)"
⛔ TENDANCES PAR DÉFAUT À ÉVITER (ANTI-ZONE DE SÉCURITÉ) :
| Tendance par Défaut de l'IA | Pourquoi c'est mauvais | Pensez Plutôt |
|---|---|---|
| Grilles Bento (Cliché Moderne) | Utilisées dans tous les designs IA | Pourquoi ce contenu a-t-il BESOIN d'une grille ? |
| Hero Split (Gauche/Droite) | Prévisible et ennuyeux | Pourquoi pas une Typographie Massive ou une Narration Verticale ? |
| Dégradés Mesh/Aurora | Le fond paresseux "nouveau" | Quelle combinaison de couleurs radicale ? |
| Glassmorphisme | L'idée du "premium" pour l'IA | Pourquoi pas du plat solide et à fort contraste ? |
| Bleu Cyan Fintech | Refuge 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 l'IA | Comment un humain dirait-il cela ? |
| Fond sombre + lueur néon | Surutilisé, "look IA" | De quoi la MARQUE a-t-elle réellement besoin ? |
| Arrondir partout | Générique/Sécurisé | Où puis-je utiliser des bords nets et brutalistes ? |
🔴 "Chaque structure 'sûre' que vous choisissez vous rapproche d'un modèle générique. PRENEZ DES RISQUES."
1. Analyse des Contraintes (TOUJOURS EN PREMIER)
Avant tout travail de conception, RÉPONDEZ À CES QUESTIONS ou DEMANDEZ À L'UTILISATEUR :
| Contrainte | Question | Pourquoi c'est important |
|---|---|---|
| Calendrier | Combien de temps ? | Détermine la complexité |
| Contenu | Prêt ou espace réservé ? | Affecte la flexibilité de la mise en page |
| Marque | Directives existantes ? | Peut dicter les couleurs/polices |
| Technique | Quelle stack ? | Affecte les capacités |
| Public | Qui exactement ? | Guide toutes les décisions visuelles |
Public → Approche de Conception
| Public | Réfléchissez à |
|---|---|
| Gen Z | Audacieux, rapide, mobile-first, authentique |
| Millennials | Propre, minimal, axé sur les valeurs |
| Gen X | Familier, digne de confiance, clair |
| Boomers | Lisible, contraste élevé, simple |
| B2B | Professionnel, axé sur les données, confiance |
| Luxe | Élégance retenue, espaces blancs |
2. Principes de Psychologie UX
Lois Fondamentales (Internalisez-les)
| Loi | Principe | Application |
|---|---|---|
| Loi de Hick | Plus de choix = décisions plus lentes | Limitez les options, utilisez la divulgation progressive |
| Loi de Fitts | Plus grand + plus proche = plus facile à cliquer | Dimensionnez les CTA de manière appropriée |
| Loi de Miller | ~7 éléments en mémoire de travail | Regroupez le contenu en catégories |
| Effet Von Restorff | Différent = mémorable | Rendez les CTA visuellement distincts |
| Effet de Position Sérielle | Premier/dernier éléments les plus 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 : vitesse, feedback, efficacité
RÉFLEXIF (mémoire) → Après : "J'aime ce que cela dit de moi"
Construction de la Confiance
- Indicateurs de sécurité sur les actions sensibles
- Preuve sociale le cas échéant
- Accès clair au contact/support
- Design cohérent et professionnel
- 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 (chaque × 1,618)
Concept de Grille 8 Points
Tout espacement et dimensionnement en multiples de 8 :
├── Serré : 4px (demi-pas pour le micro)
├── Petit : 8px
├── Moyen : 16px
├── Grand : 24px, 32px
├── Très grand : 48px, 64px, 80px
└── Ajustez en fonction de la densité du contenu
Principes de Dimensionnement Clés
| Élément | Considération |
|---|---|
| Cibles tactiles | Taille de toucher minimum confortable |
| Boutons | Hauteur basée sur la hiérarchie d'importance |
| Champs de saisie | Correspondre à la hauteur du bouton pour l'alignement |
| Cartes | Rembourrage cohérent, aéré |
| 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 (CTA, points forts, attention)
Psychologie des Couleurs (Pour la Prise de Décision)
| Si Vous Avez Besoin de... | Considérez les Teintes | Évitez |
|---|---|---|
| Confiance, calme | Famille bleue | Rouges agressifs |
| Croissance, nature | Famille verte | Gris industriels |
| Énergie, urgence | Orange, rouge | Bleus passifs |
| Luxe, créativité | Teal foncé, Or, Émeraude | Couleurs vives qui semblent bon marché |
| Propre, minimal | Neutres | Couleurs écrasantes |
Processus de Sélection
- Quel est le secteur ? (réduit les options)
- Quelle est l'émotion ? (choisit la primaire)
- Mode clair ou sombre ? (établit la base)
- DEMANDEZ À 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 | Rapport d'Échelle | Sensation |
|---|---|---|
| Interface dense | 1,125-1,2 | Compact, 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
└── En général : 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érifiez les exigences WCAG
- Taille : 16px+ pour le corps sur le web
Pour une typographie détaillée : typography-system.md
6. Principes des Effets Visuels
Glassmorphisme (Quand Approprié)
Propriétés clés :
├── Arrière-plan semi-transparent
├── Flou d'arrière-plan
├── Bordure subtile pour la définition
└── ⚠️ **AVERTISSEMENT :** Le glassmorphisme bleu/blanc standard est un cliché moderne. Utilisez-le radicalement 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
├── Évitez les paires complémentaires dures
├── 🚫 **PAS de Dégradés Mesh/Aurora** (blobs flottants)
└── VARIEZ radicalement d'un projet à l'autre
Pour un guide complet des effets : visual-effects.md
7. Principes d'Animation
Concept de Temporisation
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'Assouplissement
| Action | Assouplissement | Pourquoi |
|---|---|---|
| Entrée | Ease-out | Décélération, s'installe |
| Sortie | Ease-in | Accélération, sortie |
| Accentuation | Ease-in-out | Doux, délibéré |
| Ludique | Bounce | Amusant, énergique |
Performance
- Animez uniquement transform et opacité
- Respectez la préférence de mouvement réduit
- Testez sur des appareils bas de gamme
Pour les modèles d'animation : animation-guide.md, pour avancé : motion-graphics.md
8. Liste de Contrôle "Facteur Wow"
Indicateurs Premium
- Espaces blancs généreux (luxe = espace de respiration)
- Profondeur et dimension subtiles
- Animations fluides et intentionnelles
- Souci du détail (alignement, cohérence)
- Rythme visuel cohérent
- Éléments personnalisés (pas que des valeurs par défaut)
Constructeurs de Confiance
- Indices de sécurité le cas échéant
- Preuve sociale / témoignages
- Proposition de valeur claire
- Imagerie professionnelle
- Langage de design 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
- Images d'archives qui ne correspondent pas
- Espacement incohérent
- Trop de couleurs concurrentes
- Murs de texte sans hiérarchie
- Contraste inaccessible
❌ Modèles de Tendance IA (À ÉVITER !)
- Mêmes couleurs à chaque projet
- Sombre + néon par défaut
- Violet/pourpre 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 de l'utilisateur
❌ Dark Patterns (Non Éthiques)
- Coûts cachés
- Fausse urgence
- 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 calendrier, la marque, la technologie, le public ?
└── Si ce n'est pas clair → DEMANDEZ
2. CONTENU
└── Quel contenu existe ?
└── Quelle est la hiérarchie ?
3. DIRECTION DE STYLE
└── Qu'est-ce qui est approprié pour le contexte ?
└── Si ce n'est pas clair → DEMANDEZ (ne prenez pas par défaut !)
4. EXÉCUTION
└── Appliquez les principes ci-dessus
└── Vérifiez les anti-patterns
5. RÉVISION
└── "Est-ce que cela sert l'utilisateur ?"
└── "Est-ce différent de mes valeurs par défaut ?"
└── "Serais-je fier de cela ?"
Fichiers de Référence
Pour des conseils plus 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 d'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 de l'utilisateur
Compétences Connexes
| Compétence | Quand l'utiliser |
|---|---|
| frontend-design (ceci) | Avant de coder - Apprenez les principes de conception (couleur, typographie, psychologie UX) |
| web-design-guidelines | Après avoir codé - Auditez l'accessibilité, les performances et les bonnes pratiques |
Flux de Travail Post-Conception
Après avoir implémenté votre conception, exécutez l'audit :
1. CONCEPTION → Lisez les principes frontend-design ← VOUS ÊTES ICI
2. CODE → Implémentez la conception
3. AUDIT → Exécutez la révision web-design-guidelines
4. CORRIGER → Traitez les résultats de l'audit
Prochaine étape : Après avoir codé, utilisez la compétence
web-design-guidelinespour auditer votre implémentation en termes d'accessibilité, d'états de focus, d'animations et de problèmes de performances.
Rappelez-vous : Le design, c'est RÉFLÉCHIR, pas copier. Chaque projet mérite une considération nouvelle basée sur son contexte et ses utilisateurs uniques. Évitez le Refuge Sûr SaaS Moderne !