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 guide général 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 guide général 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é

Pourquoi maitriser ces principes en 2026

Une interface mal pensee coute des conversions, du temps support, et finit par couler le produit. A Dakar comme a Paris, les utilisateurs comparent votre app au standard des grands services qu’ils utilisent quotidiennement (WhatsApp, Wave, Yango, Mixx by Yas). Si votre interface n’est pas au niveau, ils ferment l’onglet en 8 secondes. Ce tutoriel pose les principes operationnels — pas de theorie abstraite, des regles applicables a chaque ecran.

Pour un freelance facturant 200 000 a 800 000 FCFA (305 a 1 220 EUR) une refonte UI, ces principes sont la difference entre un livrable accepte sans retouche et trois cycles de feedback client.

Etape 1 : Definir l objectif primaire de chaque ecran

Chaque ecran doit avoir UNE action principale. Pas deux, pas trois. Sur une page produit, c est Ajouter au panier. Sur un dashboard, c est consulter la metrique du jour. Sur un formulaire, c est valider. Toutes les autres actions sont secondaires et doivent visuellement s effacer (couleur neutre, taille reduite).

Test rapide : montrez la maquette a quelqu un pendant 3 secondes, demandez « que feriez-vous ? ». Si la reponse n est pas l action principale prevue, refaites la hierarchie. Cette regle, popularisee par Steve Krug dans Don t Make Me Think, reste valable en 2026.

Etape 2 : Appliquer la grille 8-point

Toutes les marges, paddings, tailles de composant doivent etre des multiples de 8 (ou 4 pour les details). Ainsi : padding 8/16/24/32, gap 8/16, hauteur de bouton 40 ou 48. Cette contrainte transforme un design « presque aligne » en design propre, et facilite la cooperation avec les developpeurs qui codent en multiples de 8.

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
}

Sortie attendue dans le navigateur : tous les composants utilisent les variables CSS, le devtool montre des valeurs propres (24px et non 23,5px). Si vous voyez des valeurs « libres », vous avez derive et l oeil le sentira meme sans savoir pourquoi.

Etape 3 : Hierarchie typographique en 4 niveaux

Quatre tailles maximum par interface : H1 32px, H2 24px, body 16px, caption 12px. Une seule famille (Inter, Manrope, Geist, ou la police systeme). Deux poids : Regular 400 et Semibold 600. Plus que ca, vous fragmentez l identite visuelle.

Hauteur de ligne : 1.5 pour le body (22-24px), 1.2 pour les titres (38px sur un H1 32px). Espacement des lettres : 0 par defaut, -0.02em sur les gros titres pour resserrer. Test : copiez votre maquette en niveaux de gris. Si la hierarchie reste claire sans couleur, c est gagne.

Etape 4 : Contraste et accessibilite WCAG 2.2

Texte standard : ratio de contraste minimum 4.5:1 (WCAG AA). Texte large (18pt+ ou 14pt bold) : 3:1 minimum. Verifiez sur webaim.org/resources/contrastchecker. Le gris #757575 sur blanc passe juste. Le #999999 sur blanc echoue (2.85:1) — c est l erreur la plus frequente.

Pour les composants interactifs (boutons, inputs focus), WCAG 2.2 impose 3:1 entre l etat normal et l etat focus. Un anneau de focus visible (outline 2px solid bleu) est obligatoire pour les utilisateurs au clavier. Ne le supprimez jamais avec outline:none sans le remplacer par autre chose.

Etape 5 : Loi de Fitts pour les zones cliquables

La loi de Fitts dit : le temps pour atteindre une cible est proportionnel a la distance et inversement proportionnel a la taille. En pratique : boutons d action minimum 44×44 px (recommandation Apple HIG et Material Design pour le tactile). Sur desktop, 40px de hauteur convient.

Coins de l ecran et bord inferieur sont des zones « infinies » sur desktop (le pointeur s y arrete) — y placer les actions critiques (menu macOS, taskbar Windows). Sur mobile, le pouce atteint difficilement le haut de l ecran : actions principales en bas, secondaires en haut.

Etape 6 : Loi de Hick — limiter les choix

Plus il y a d options, plus la decision est lente. Limitez les menus a 7 items max, les formulaires a 5 champs visibles a la fois (utilisez l accordeon ou le multi-step pour le reste). Pour un onboarding, 3 etapes maximum avant valeur livree.

const steps = [
  { id: 1, title: 'Compte', fields: ['email','password'] },
  { id: 2, title: 'Profil', fields: ['nom','telephone','ville'] },
  { id: 3, title: 'Preference', fields: ['langue','notifications'] }
];

Sortie attendue cote utilisateur : taux de completion de l inscription qui passe de 30 % a 60 %+ apres reduction de 8 champs a 3 etapes de 2-3 champs. Mesurable dans Mixpanel ou PostHog.

Etape 7 : Etats vides, chargement, erreurs

Trois etats systematiquement oublies : empty state (la liste est vide), loading state (les donnees arrivent), error state (echec reseau). Chaque ecran doit definir les trois. Empty : illustration + phrase d aide + CTA pour demarrer. Loading : skeleton screens (rectangles gris animes) plutot que spinners. Error : message clair + bouton Reessayer + lien support.

Exemple texte d empty state qui marche : « Aucune commande pour l instant. Importez votre premier produit pour commencer a vendre. » + bouton Importer. Mauvais exemple : « Aucune donnee. » sec, qui laisse l utilisateur perdu.

Etape 8 : Mobile-first et zones reseau lente

En Afrique de l Ouest, 70 % du trafic est mobile et 40 % en 3G ou inferieur. Concevez d abord le mobile, ajoutez les colonnes au desktop. Images optimisees en WebP/AVIF, lazy loading natif (loading="lazy"). Premier rendu visible en moins de 2,5 secondes (LCP Core Web Vitals) sur connexion 3G simulee dans Chrome DevTools.

Test obligatoire : Chrome DevTools, Network tab, throttle Slow 3G, Lighthouse score sup a 80 sur Performance et Accessibility. Si vous tombez en dessous, retirez du JS, compressez les images, mettez en cache. Sur le même thème, lisez creer des infographies professionnelles et debuter sur Figma pas a pas.