Les principes fondamentaux du design d’interface en 2026

Ce que vous saurez faire à la fin

1. Comprendre les règles de base de la composition (rule of thirds, équilibre, hiérarchie).
2. Maîtriser typographie, couleurs, espacement (grille 8 px).
3. Construire des composants réutilisables (boutons, cards, inputs).
4. Designer 5 patterns courants (navigation, formulaire, dashboard, modal, liste).
5. Tester l’usabilité avec utilisateurs réels.

Durée : 6h pour intégrer + pratique sur projets. Pré-requis : Figma compte gratuit, notions UX/UI de base, accès à Lucide ou Phosphor pour icônes, polices Inter ou Manrope (Google Fonts), exemples Mobbin / Dribbble pour inspiration.

Étape 1 — Comprendre les 4 piliers du design d’interface

Étape 2 — Maîtriser la rule of thirds et la grille

Rule of thirds :
- Diviser l'écran en 3x3
- Placer les éléments importants aux intersections
- Évite le centre statique

Grille 8 px :
- Tous les espacements multiples de 8 (8, 16, 24, 32, 48, 64)
- Tailles boutons : 32px / 40px / 48px hauteur
- Padding cards : 16px / 24px
- Marges sections : 48px / 64px / 96px

Outil : Figma Layout Grid
- 12 colonnes
- Gutter 24 px
- Margin 32 px sur desktop
- 4 colonnes sur mobile

Étape 3 — Choisir une palette typographique

Choix polices 2026 :
- Inter : passe-partout, lisible, moderne
- Manrope : alternative géométrique douce
- Geist : Vercel, ultra moderne
- IBM Plex Sans : tech, mais chaleureux

Échelle modulaire (ratio 1.25) :
Display 2 : 56 / 64 / Bold
Display 1 : 40 / 48 / Bold
H1 : 32 / 40 / Semibold
H2 : 24 / 32 / Semibold
H3 : 20 / 28 / Semibold
Body L : 18 / 28 / Regular
Body : 16 / 24 / Regular
Small : 14 / 20 / Regular
Caption : 12 / 16 / Medium

Format : taille / line-height / poids

Étape 4 — Construire une palette de couleurs

Palette type 5 couleurs :

Primaire (votre marque) :
brand-50 : #EFF6FF (très clair, fond)
brand-500 : #2563EB (default)
brand-700 : #1D4ED8 (hover)
brand-900 : #1E3A8A (très sombre)

Neutres (texte, fond, bordures) :
neutral-50 : #F9FAFB
neutral-200 : #E5E7EB (bordures)
neutral-500 : #6B7280 (texte secondaire)
neutral-900 : #111827 (texte principal)

Sémantiques :
success-500 : #10B981
warning-500 : #F59E0B
danger-500 : #EF4444
info-500 : #3B82F6

Mode sombre : inverser les neutres + désaturer brand

Étape 5 — Designer les composants atomiques

Atoms à créer dans Figma library :

• Button : 5 variants (primary, secondary, ghost, danger, link) × 3 tailles
• Input : text, email, password, number, search avec états (default, focused, error, disabled)
• Checkbox / Radio / Toggle
• Avatar : 3 tailles (24/32/40 px)
• Badge : 3 couleurs (info, success, warning)
• Icon : 16/20/24 px
• Tooltip
• Spinner

Étape 6 — Designer les molécules

Étape 7 — Pattern 1 : Navigation

Top navigation desktop :
[Logo] [Home] [Products] [About] [Contact]      [Search] [Login]

Sidebar navigation app :
- Logo en haut
- 5-7 sections principales (icône + label)
- Badge si notifications
- Footer : profil utilisateur + settings

Mobile :
- Hamburger menu (icône en haut à droite)
- Bottom navigation tabs (4-5 max) pour app
- Recherche en haut

Étape 8 — Pattern 2 : Formulaire

Best practices :

• 1 champ par ligne (sauf nom + prénom côte à côte)
• Label au-dessus de l’input (pas placeholder seul)
• Astérisque rouge pour champs requis
• Helper text gris en dessous si besoin
• Erreur affichée sous le champ avec icône
• Bouton submit en pied, pleine largeur sur mobile
• Désactivé tant que validation incomplete
• Loading state pendant submission

Étape 9 — Pattern 3 : Dashboard

Layout dashboard exécutif :

Top bar : logo + search + user menu
Sidebar : navigation principale
Main area :
  Row 1 : 4 KPI cards (CA, marge, NPS, croissance)
    Format : grand chiffre + label + variation %
  Row 2 : 2 graphiques (ligne tendance + barres comparaison)
  Row 3 : 1 tableau Top 10 + 1 graph donut

Règles :
- Whitespace généreux (24-48 px entre sections)
- Couleurs limitées (3-4 max)
- Pas de bordures inutiles (utiliser background subtil)
- Date last update visible
- Refresh button

Étape 10 — Pattern 4 : Modal / Dialog

• Overlay sombre semi-transparent (rgba(0,0,0,0.5))
• Card centrée verticalement et horizontalement
• Largeur max 480 px (small), 720 px (large)
• Header avec titre + bouton fermer (X)
• Corps avec contenu
• Footer avec actions (Annuler à gauche, Confirmer à droite)
• Animation fade in 200ms
• Focus trap (Tab reste dans modal)
• Esc pour fermer

Étape 11 — Pattern 5 : Liste / Tableau

Étape 12 — Animations et micro-interactions

Règles d'animation 2026 :
- Durée : 150-300 ms pour micro-interactions
- 400-600 ms pour transitions de page
- Easing : ease-out pour entrées, ease-in pour sorties
- Cubic-bezier(0.4, 0.0, 0.2, 1) "Material Standard"

Cas d'usage :
- Hover bouton : scale 1.02 + ombre légère
- Click : scale 0.98 (feedback tactile)
- Loading : skeleton ou spinner
- Toast : slide in from top + auto dismiss 4s
- Page transition : fade ou slide

Performance :
- Animer transform et opacity uniquement (GPU accelerated)
- Éviter d'animer width, height, top, left (CPU)
- prefers-reduced-motion pour accessibilité

Étape 13 — Tester avec utilisateurs

Méthodes :

• 5-second test : montrer screen 5s puis demander « Que pouvez-vous faire ici ? »
• Tasks : 3-5 tâches concrètes à accomplir
• Click test (FirstClickFree) : où cliqueriez-vous pour faire X ?
• Heatmap (Hotjar / Microsoft Clarity) en prod
• Itération : 5 utilisateurs détectent 80 % des problèmes (Nielsen)

Étape 14 — Documenter dans le design system

Pour chaque composant et pattern :

• Description et cas d’usage
• Variants disponibles
• Anatomie (annotations)
• Specs (taille, padding, couleurs)
• Do / Don’t visuels
• Code snippet (HTML / React)
• Accessibilité (rôle, ARIA, clavier)

Erreurs classiques en design d’interface

• Trop de couleurs : 4 max selon charte.
• Trop de polices : 2 max (1 titre + 1 corps).
• Pas de hiérarchie : tout pareil = rien lu.
• Espacements aléatoires : grille 8 px casse cette confusion.
• Mobile en after-thought : design mobile-first obligatoire.
• Pas de feedback : utilisateur ne sait pas si action prise.

Checklist principes design d’interface

✓ 4 piliers compris (hiérarchie, cohérence, feedback, affordance)
✓ Grille 8 px appliquée partout
✓ Échelle typographique modulaire définie
✓ Palette 5 couleurs (brand + neutres + sémantiques)
✓ Mode sombre activé
✓ Composants atomiques créés (boutons, inputs, etc.)
✓ Composants moléculaires (form field, card, etc.)
✓ 5 patterns standards designés
✓ Animations 150-300 ms maîtrisées
✓ Tests utilisateurs 5-7 personnes
✓ Documentation design system
✓ Accessibilité WCAG AA respectée
✓ Mobile-first appliqué