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/appariement de polices |
| visual-effects.md | ⚪ Optionnel | Vitromorphisme, 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 = seulement si pertinent.
🔧 Scripts d'Exécution
Exécutez-les pour les audits (ne pas lire, exécuter seulement) :
| Script | Objectif | Utilisation |
|---|---|---|
| Audit manuel | Audit UX Psychologie & Accessibilité | Utiliser les outils de développement du navigateur et Lighthouse |
⚠️ CRITIQUE : DEMANDER AVANT DE SUPPOSER (OBLIGATOIRE)
STOP ! Si la demande de l'utilisateur est ouverte, ne prends pas tes favoris par défaut.
Quand l'invite de l'utilisateur est vague, DEMANDE :
Couleur non spécifiée ? Demande :
« Quelle palette de couleurs préférez-vous ? (bleu/vert/orange/neutre/autre ?) »
Style non spécifié ? Demande :
« Quel style recherchez-vous ? (minimal/audacieux/rétro/futuriste/organique ?) »
Mise en page non spécifiée ? Demande :
« Avez-vous une préférence de mise en page ? (colonne unique/grille/asymétrique/pleine largeur ?) »
⛔ TENANCES PAR DÉFAUT À ÉVITER (PORT SÛR ANTI-PATRON) :
| Tendance par défaut de l'IA | Pourquoi c'est mauvais | Pense plutôt |
|---|---|---|
| Grilles Bento (Cliché Moderne) | Utilisé dans chaque conception IA | Pourquoi ce contenu a-t-il BESOIN d'une grille ? |
| Hero Split (Gauche/Droite) | Prévisible & Ennuyeux | Et si on utilisait une Typographie Massive ou un Récit Vertical ? |
| Dégradés Mesh/Aurora | Le fond paresseux « nouveau » | Quelle est une association de couleurs radicale ? |
| Vitromorphisme | L'idée du « premium » par l'IA | Et si on utilisait du plat solide à contraste élevé ? |
| Bleu Cyan Foncé / 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 | Suremployé, « 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 bruts 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 |
|---|---|---|
| Calendrier | Combien de temps ? | Détermine la complexité |
| Contenu | Prêt ou provisoire ? | 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 ? | Conduit toutes les décisions visuelles |
Audience → Approche de conception
| Audience | Penser à |
|---|---|
| Génération Z | Audacieux, rapide, mobile-first, authentique |
| Millennials | Propre, minimaliste, axé sur la valeur |
| Génération X | Familier, fiable, clair |
| Boomers | Lisible, contraste élevé, simple |
| B2B | Professionnel, centré sur les données, confiance |
| Luxe | Élégance sobre, espace blanc |
2. Principes de Psychologie UX
Lois Fondamentales (À Intérioriser)
| Loi | Principe | Application |
|---|---|---|
| Loi de Hick | Plus de choix = décisions plus lentes | Limiter les options, utiliser la divulgation progressive |
| Loi de Fitts | Plus grand + plus proche = plus facile à cliquer | Taille appropriée des CTA |
| Loi de Miller | ~7 éléments en mémoire de travail | Regrouper le contenu par blocs |
| Effet Von Restorff | Différent = mémorable | Rendre les CTA visuellement distincts |
| Position Sérielle | Premier/dernier le plus mémorisé | 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) → En l'utilisant : rapidité, feedback, efficacité
RÉFLÉCHI (mémoire) → Après : « J'aime ce que cela dit de moi »
Établir la Confiance
- Indicateurs de sécurité sur les actions sensibles
- Preuve sociale si pertinent
- 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 une harmonie proportionnée :
├── Contenu : Barre latérale ≈ 62% : 38%
├── Chaque taille de titre = taille précédente × 1.618 (pour une échelle dramatique)
├── L'espacement peut suivre : petit → moyen → grand (chaque × 1.618)
Concept de Grille en 8 Points
Tout espacement et dimensionnement en multiples de 8 :
├── Serré : 4px (demi-pas pour micro)
├── Petit : 8px
├── Moyen : 16px
├── Grand : 24px, 32px
├── XL : 48px, 64px, 80px
└── Ajuster en fonction de la densité du contenu
Principes Clés de Dimensionnement
| Élément | Considération |
|---|---|
| Cibles tactiles | Taille de toucher confortable minimale |
| Boutons | Hauteur basée sur la hiérarchie d'importance |
| Champs de saisie | Correspondre à la hauteur 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 soutien)
10% → Accent (CTA, points forts, attention)
Psychologie des Couleurs (Pour la Prise de Décision)
| Si tu as besoin de... | 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 foncée, Or, Émeraude | Couleurs vives d'aspect bon marché |
| Propre, minimaliste | Neutres | Couleur écrasante |
Processus de Sélection
- Quel est le secteur ? (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 |
|---|---|---|
| UI 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
└── 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 corps du texte
- Contraste : Vérifier 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
Vitromorphisme (Quand Approprié)
Propriétés clés :
├── Fond semi-transparent
├── Flou d'arrière-plan
├── Bordure subtile pour la définition
└── ⚠️ **ATTENTION :** Le vitromorphisme 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 du dessus)
├── 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
├── Éviter les paires complémentaires dures
├── 🚫 **PAS de Dégradés Mesh/Aurora** (gouttes flottantes)
└── VARIE 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'Easing
| Action | Easing | Pourquoi |
|---|---|---|
| Entrée | Ease-out | Décélération, s'installe |
| Sortie | Ease-in | Accélération, sortie |
| Accentuation | Ease-in-out | Fluide, délibéré |
| Ludique | Rebond | Amusant, énergique |
Performance
- Animer seulement la transformation et l'opacité
- Respecter la préférence de mouvement réduit
- Tester sur des appareils bas de gamme
Pour des motifs d'animation : animation-guide.md, pour les avancés : motion-graphics.md
8. Liste de Contrôle « Facteur Wow »
Indicateurs Premium
- Espace blanc généreux (luxe = espace de respiration)
- Profondeur et dimension subtiles
- Animations fluides et ciblées
- Attention aux détails (alignement, cohérence)
- Rythme visuel cohérent
- Éléments personnalisés (pas que des valeurs par défaut)
Bâtisseurs de Confiance
- Indices de sécurité si 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-Patrons (Ce qu'il NE 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
❌ Motifs de Tendance IA (À ÉVITER !)
- Les mêmes couleurs à 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
- Structure de mise en page identique / clone Vercel
- Ne pas demander les préférences de l'utilisateur
❌ Patrons Sombres (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, l'audience ?
└── Si flou → DEMANDE
2. CONTENU
└── Quel contenu existe ?
└── Quelle est la hiérarchie ?
3. DIRECTION DE STYLE
└── Qu'est-ce qui est approprié pour le contexte ?
└── Si flou → DEMANDE (ne prends pas par défaut !)
4. EXÉCUTION
└── Appliquer les principes ci-dessus
└── Vérifier les anti-patrons
5. RÉVISION
└── « Cela sert-il 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 - Appariement de polices et décisions d'échelle
- visual-effects.md - Principes et techniques d'effets
- animation-guide.md - Principes de conception de mouvements
- 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 - Apprendre les principes de conception (couleur, typographie, psychologie UX) |
| web-design-guidelines | Après le codage - Auditer l'accessibilité, la performance et les meilleures pratiques |
Flux de Travail Post-Conception
Après avoir implémenté votre conception, exécutez l'audit :
1. CONCEVOIR → Lire les principes frontend-design ← VOUS ÊTES ICI
2. CODER → Implémenter la conception
3. AUDITER → Exécuter la revue web-design-guidelines
4. CORRIGER → Traiter les conclusions de l'audit
Prochaine Étape : Après le codage, utilisez la compétence
web-design-guidelinespour auditer votre implémentation en matière d'accessibilité, d'états de focus, d'animations et de problèmes de performance.
Souviens-toi : 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. Évite le Port Sûr SaaS Moderne !