Que fait 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ÉCHISSEZ, ne mémorisez pas. DEMANDEZ, ne supposez pas.
🎯 Règle de Lecture Sélective (OBLIGATOIRE)
Lisez les fichiers OBLIGATOIRES en permanence, les OPTIONNELS uniquement lorsque nécessaire :
| Fichier | Statut | Quand le lire |
|---|---|---|
| ux-psychology.md | 🔴 OBLIGATOIRE | Toujours lire en premier ! |
| color-system.md | ⚪ Optionnel | Décisions de couleur/palette |
| typography-system.md | ⚪ Optionnel | Sélection de polices/associations |
| 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 de contexte |
🔴 ux-psychology.md = TOUJOURS À LIRE. Les autres = uniquement si pertinent.
🔧 Scripts d'Exécution
Exécutez-les pour les audits (ne lisez pas, exécutez simplement) :
| Script | Objectif | Utilisation |
|---|---|---|
scripts/ux_audit.py | Audit de psychologie UX et d'accessibilité | python scripts/ux_audit.py <chemin_du_projet> |
⚠️ CRITIQUE : DEMANDEZ AVANT DE SUPPOSER (OBLIGATOIRE)
STOP ! Si la demande de l'utilisateur est ouverte, NE vous fiez PAS à vos préférences par défaut.
Quand l'invite 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 ?) »
Disposition 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é dans tous les designs d'IA | Pourquoi ce contenu a-t-il BESOIN d'une grille ? |
| Hero Split (Gauche/Droite) | Prévisible et ennuyeux | Et si on utilisait une typographie massive ou un récit vertical ? |
| Dégradés Mesh/Aurore | Le fond « nouveau » paresseux | Quelle association de couleurs radicale ? |
| Glassmorphisme | L'idée du « premium » selon l'IA | Et si on utilisait du flat solide, à contraste élevé ? |
| Cyan foncé / Bleu Fintech | Zone de sécurité 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 | Surutilisé, « 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 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 à… |
|---|---|
| Génération Z | Audacieux, rapide, mobile-first, authentique |
| Millennials | Propre, minimal, axé sur les valeurs |
| Génération X | Familier, fiable, clair |
| Baby-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 groupes |
| Effet de Von Restorff | Différent = mémorable | Rendez les CTA visuellement distincts |
| Effet de position sérielle | Premier/dernier = mieux retenu | 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 utilisation : vitesse, retour, 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)
Utilisé pour l'harmonie proportionnelle :
├── Contenu : Barre latérale = environ 62 % : 38 %
├── Chaque taille de titre = précédente × 1,618 (pour une échelle dramatique)
├── Espacement peut suivre : sm → md → lg (chacun × 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 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 | Hauteur correspondant à celle des boutons pour l'alignement |
| Cartes | Padding 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 soutien)
10% → Accent (CTA, points forts, attention)
Psychologie des Couleurs (Pour la Prise de Décision)
| Si vous avez besoin de… | Envisagez les Teintes | Évitez |
|---|---|---|
| Confiance, calme | Famille des bleus | Rouges agressifs |
| Croissance, nature | Famille des verts | Gris industriels |
| Énergie, urgence | Orange, rouge | Bleus passifs |
| Luxe, créativité | Teal foncé, Or, Émeraude | Couleurs vives de mauvaise qualité |
| Propre, minimal | Neutres | Couleurs écrasantes |
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)
- DEMANDEZ À L'UTILISATEUR si non précisé
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 :
├── SUFFISAMMENT différent pour la hiérarchie
├── SUFFISAMMENT similaire pour la cohésion
└── Habituellement : display + 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é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 :
├── Fond semi-transparent
├── Flou d'arrière-plan
├── Bordure subtile pour la définition
└── ⚠️ **ATTENTION :** Le glassmorphisme standard bleu/blanc est un cliché moderne. Utilisez-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 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 agressives
├── 🚫 **PAS de dégradés Mesh/Aurore** (taches flottantes)
└── 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érer, s'installer |
| Sortie | Ease-in | Accélérer, sortir |
| Accentuation | Ease-in-out | Fluide, délibéré |
| Ludique | Bounce | Amusant, énergique |
Performance
- Animer 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. Checklist « Effet Waouh »
Indicateurs Premium
- Espaces blancs généreux (le luxe = de l'espace pour respirer)
- 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)
Bâtisseurs 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éalisation
- 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 des IA (À ÉVITER !)
- Les mêmes couleurs pour chaque projet
- Sombre + néon comme valeur par défaut
- Du violet/aubergine partout (INTERDICTION DU VIOLET ✅)
- Grilles Bento pour des pages d'accueil simples
- Dégradés Mesh et Effets Lumineux
- 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
└── Quels sont 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 STYLE
└── Qu'est-ce qui est approprié au contexte ?
└── Si ce n'est pas clair → DEMANDEZ (ne prenez pas de valeur par défaut !)
4. EXÉCUTION
└── Appliquez les principes ci-dessus
└── Vérifiez les anti-patterns
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 - 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 de l'utilisateur
Compétences Connexes
| Compétence | Quand l'utiliser |
|---|---|
| frontend-design (ceci) | Avant le codage - Apprenez les principes de conception (couleur, typographie, psychologie UX) |
| web-design-guidelines | Après le codage - 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. CORRECTIF → Traitez les résultats de l'audit
Prochaine étape : Après le codage, 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 performance.
Souvenez-vous : Le design, c'est RÉFLÉCHIR, pas copier. Chaque projet mérite une réflexion nouvelle basée sur son contexte et ses utilisateurs uniques. Évitez la Zone de Sécurité SaaS Moderne !