Parent : [[INDEX-WEB-UIUX]]

Principes fondamentaux du bon design UI/UX

Ce document synthétise les principes essentiels pour créer des interfaces de qualité. Pour les outils et ressources avancés, voir le workflow unifié KNOW-PAT-193.

Les 3 piliers du bon design

Ce qu'il faut éviter absolument (anti-patterns)

1. Le design générique IA (AI slop)

Symptômes (KNOW-ANT-WEB-001, KNOW-ANT-WEB-002) :

• Police Inter seule
• Dégradé violet/bleu dans le hero
• Cards imbriquées (3 niveaux)
• Gris sur fond coloré illisible
• Hero template : badge pulse + titre highlight + 2 CTA identiques
• Icône rounded-square au-dessus de chaque H2

Pourquoi c'est mauvais :

• Manque de différenciation
• Confiance réduite
• Mémorabilité faible
• Donne l'impression d'un produit "cheap"

Solution :

• Choisir une typographie distinctive (display + body)
• Créer une palette personnalisée
• Varier les layouts et les espacements
• Ajouter des micro-détails uniques

2. Le design sans tokens

Symptômes (KNOW-WEB-001) :

• Couleurs hardcodées (#6366f1, #000000)
• Inline styles partout
• Pas de design system documenté

Pourquoi c'est mauvais :

• Inconsistance visuelle
• Maintenance impossible
• Dark mode difficile
• Thématisation impossible

Solution :

• Créer un DESIGN.md (KNOW-PAT-144)
• Utiliser des tokens CSS variables (KNOW-PAT-111)
• Centraliser les décisions de design

Ce qu'il faut faire absolument (best practices)

1. Hiérarchie visuelle claire

Règles :

• Un seul élément dominant par section (titre, CTA, image)
• Contraste suffisant entre les niveaux (4.5:1 minimum)
• Espacements proportionnels à l'importance
• Typographie : display pour les titres, body pour le texte

Exemple :

/* Bon */
h1 { font-size: 3rem; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 2rem; font-weight: 600; }
p { font-size: 1rem; line-height: 1.6; color: var(--text-muted); }

2. Feedback immédiat

Règles :

• Hover states sur tous les éléments interactifs
• Focus states visibles pour navigation clavier
• Loading states pendant les actions asynchrones
• Messages d'erreur/succès explicites

Exemple :

button {
  transition: all 0.2s ease;
}
button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

3. Accessibilité native

Règles (KNOW-PAT-142) :

• Contraste 4.5:1 minimum
• Navigation clavier complète (Tab, Escape, Arrow keys)
• HTML sémantique (nav, main, section, article)
• ARIA labels sur les boutons icônes
• Alt text descriptif sur les images

Vérification :

• Lighthouse Accessibility ≥ 90
• Test clavier : Tab du haut au bas

4. Responsive mobile-first

Règles :

• 375px minimum (mobile)
• Pas de scroll horizontal
• Touch target ≥ 44x44px
• Texte lisible sans zoom

Vérification :

• DevTools mobile device emulation
• Test sur vrai mobile si possible

Le workflow pour faire du bon design

Étape 1 — Inspiration

Avant de coder, regarder ce qui existe :

• Godly Corpus (KNOW-PAT-189) pour les patterns par secteur
• Mobbin pour les apps mobiles
• Références produits dans le domaine

Règle : Ne jamais designer dans le vide (KNOW-PAT-146)

Étape 2 — Design system

Définir les tokens avant de coder :

• Couleurs (primary, secondary, accent, surface, text)
• Typographie (display + body)
• Espacements (scale 4, 8, 16, 24, 32, 48, 64)
• Bordures (radius, border-width)
• Ombres (elevation levels)

Outil : DESIGN.md (KNOW-PAT-144)

Étape 3 — Implémentation

Utiliser des composants réels plutôt que réinventer :

• 21st.dev (KNOW-PAT-191, KNOW-PAT-194) pour les composants React
• shadcn/ui pour les composants de base
• Adapter au design system du projet

Étape 4 — Validation

Avant de shipper :

• Checklist qualité (KNOW-PAT-143)
• Lighthouse scores
• Test clavier
• Test mobile

Les ressources à connaître

Checklist rapide pour chaque interface

• Hiérarchie visuelle claire (un seul dominant par section)
• Typographie distinctive (pas Inter seul)
• Palette personnalisée (pas gradient violet IA)
• Tokens CSS (pas de couleurs hardcodées)
• Hover/focus states sur tous les interactifs
• Contraste 4.5:1 minimum
• Navigation clavier complète
• Mobile 375px OK
• Loading/empty/error states designés
• Anti-slop visuel (≤ 2 signaux KNOW-ANT-WEB-002)

Références

• Anti-patterns IA : KNOW-ANT-WEB-001, KNOW-ANT-WEB-002
• Checklist qualité : KNOW-PAT-143
• Design system : KNOW-PAT-111, KNOW-PAT-144
• Accessibilité : KNOW-PAT-142
• Workflow unifié : KNOW-PAT-193