Principes de design pour les ingénieurs logiciels

Mis à jour le 18 mai 2026

Mise à jour du 18 mai 2026 : actualisation de l’index des Études de design pour l’aligner sur le corpus actuel de 48 études, et enrichissement des patterns d’interfaces IA avec des preuves issues de workflows agentiques : checkpoints, états d’approbation, fiabilité des sources et vérification visible.

Mise à jour de mai 2026 : ajout d’une note sur le brouillon de travail de mars 2026 pour WCAG 3.0 et sur la position du W3C selon laquelle WCAG 2.2 et 3.0 coexisteront. WCAG 2.2 reste la norme à viser pour les travaux d’accessibilité actuels.

Mise à jour de février 2026 : ajout de deux nouvelles sections : Patterns d’interaction (8 paradigmes issus de l’étude de Framer, Flighty, Halide, Warp, Bear, Craft et Superhuman) et Patterns d’interfaces IA (design axé sur les citations, phases de streaming, transparence des erreurs à partir de Perplexity). Mise à jour des Web Patterns pour 2026 avec anchor positioning, animations pilotées par le défilement et @starting-style. Mise à jour de l’accessibilité pour refléter la normalisation ISO de WCAG 2.2. Consultez Études de design pour des analyses approfondies de 48 produits d’exception. J’ai passé des années à étudier le design tout en développant des logiciels, à assimiler les principes de légendes comme Dieter Rams et à disséquer les interfaces de produits comme Linear, Stripe et Raycast. Ce guide condense cette compréhension en la référence complète que j’aurais aimé trouver lorsque j’ai commencé à m’intéresser à l’apparence et au ressenti de mes logiciels.

Le design n’est pas de la décoration. C’est de la communication. Chaque pixel communique une fonction, une hiérarchie et un sens. Ce qui distingue un logiciel qui donne une impression d’amateurisme d’un logiciel qui paraît professionnel, c’est la compréhension de ces principes et leur application cohérente.

Ce guide part du principe que vous savez déjà écrire du code. Il vous apprend à voir — à comprendre pourquoi certaines interfaces semblent évidentes tandis que d’autres paraissent chaotiques, et surtout, comment créer les premières.

Table des matières

Partie 1 : Fondations

1. Psychologie de la Gestalt
2. Typographie
3. Théorie des couleurs
4. Hiérarchie visuelle
5. Espacement et rythme
6. Principes d’animation

Partie 2 : Interaction et IA

1. Patterns d’interaction
2. Patterns d’interface IA

Partie 3 : Philosophie du design

1. Dieter Rams : dix principes

Partie 4 : Mise en œuvre

1. Patterns web 2026
2. Système de design tokens
3. Le dark mode bien fait
4. Workflows d’extraction Figma

Partie 5 : Référence

1. Tableaux de référence rapide
2. Checklist de design
3. Études de design

Psychologie de la Gestalt

« Le tout est autre chose que la somme de ses parties. » — Kurt Koffka

La psychologie de la Gestalt, développée dans l’Allemagne des années 1920, explique comment les êtres humains perçoivent l’information visuelle. Le cerveau ne voit pas des pixels individuels — il organise les éléments en patterns signifiants. Maîtrisez ces principes pour contrôler la façon dont les utilisateurs perçoivent vos interfaces.

Proximité

Les éléments proches les uns des autres sont perçus comme un groupe.

C’est le principe de Gestalt le plus puissant en design UI. L’espace communique la relation entre les éléments plus que toute autre propriété visuelle.

INCORRECT (espacement égal = pas de regroupement) :
┌─────────────────┐
│ Label           │
│                 │
│ Input Field     │
│                 │
│ Label           │
│                 │
│ Input Field     │
└─────────────────┘

CORRECT (espacement inégal = groupes distincts) :
┌─────────────────┐
│ Label           │
│ Input Field     │ ← Serré (4px) - éléments liés
│                 │
│                 │ ← Large (24px) - séparation des groupes
│ Label           │
│ Input Field     │ ← Serré (4px) - éléments liés
└─────────────────┘

Implémentation CSS :

.form-group {
  margin-bottom: 24px;  /* Between groups: wide */
}

.form-group label {
  margin-bottom: 4px;   /* Label to input: tight */
  display: block;
}

Implémentation SwiftUI :

VStack(alignment: .leading, spacing: 4) {  // Tight within group
    Text("Email")
        .font(.caption)
        .foregroundStyle(.secondary)
    TextField("[email protected]", text: $email)
        .textFieldStyle(.roundedBorder)
}
.padding(.bottom, 24)  // Wide between groups

Similarité

Les éléments partageant des caractéristiques visuelles semblent liés.

Lorsque des éléments se ressemblent, les utilisateurs supposent qu’ils ont la même fonction. C’est pourquoi les systèmes de design utilisent des styles cohérents pour les boutons, les cartes et la typographie.

Exemple de navigation :
┌───────────────────────────────────┐
│ [Dashboard] [Projects] [Settings] │  ← Même style = même fonction
│                                   │
│ ┌─────┐  ┌─────┐  ┌─────┐        │
│ │Card │  │Card │  │Card │         │  ← Même style = même type de contenu
│ └─────┘  └─────┘  └─────┘        │
│                                   │
│ [+ New Project]                   │  ← Style différent = fonction différente
└───────────────────────────────────┘

Figure-fond

Le contenu doit clairement se distinguer de l’arrière-plan.

Le cerveau a besoin de distinguer la « figure » (ce sur quoi se concentrer) du « fond » (l’arrière-plan). Une mauvaise relation figure-fond crée de la confusion visuelle.

Techniques : - Contraste (figure claire sur fond sombre, ou inversement) - Ombres (élever la figure au-dessus du fond) - Bordures (délimiter les contours de la figure) - Flou (flouter l’arrière-plan, affiner la figure)

/* Strong figure-ground relationship */
.card {
  background: var(--color-surface);     /* Figure */
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);  /* Elevation */
}

.modal-overlay {
  background: rgba(0, 0, 0, 0.5);  /* Dim ground */
  backdrop-filter: blur(4px);      /* Blur ground */
}

Région commune

Les éléments à l’intérieur d’une limite sont perçus comme groupés.

Entourer des éléments dans un conteneur visuel (carte, boîte, zone bordée) signale qu’ils appartiennent au même ensemble.

Continuité

L’œil suit les chemins, les lignes et les courbes.

Utilisez l’alignement et le flux visuel pour guider l’attention à travers votre interface.

CONTINUITÉ DANS L'ALIGNEMENT :
┌────────────────────────────────┐
│ Logo    [Nav]  [Nav]  [Nav]   │  ← Alignés sur l'axe horizontal
├────────────────────────────────┤
│                                │
│ Headline                       │
│ ─────────────────────────────  │  ← L'œil suit le bord gauche
│ Paragraph text continues       │
│ along the same left edge       │
│                                │
│ [Primary Action]               │  ← Toujours sur le bord gauche
└────────────────────────────────┘

Clôture

Le cerveau complète les formes incomplètes.

Les utilisateurs n’ont pas besoin que chaque pixel soit dessiné — ils complètent mentalement les formes familières. Cela permet des designs plus minimalistes et élégants.

/* Horizontal scroll with partial card (closure) */
.card-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-right: 48px;  /* Show partial card = scroll hint */
}

.card-carousel .card {
  flex: 0 0 280px;  /* Fixed width, partial visible */
}

Référence rapide Gestalt

Typographie

« La typographie est l’art de donner au langage humain une forme visuelle durable. » — Robert Bringhurst

La typographie est le socle du design d’interface. Le texte communique la fonctionnalité, la hiérarchie et l’identité de marque. Une typographie médiocre rend les interfaces plus difficiles à utiliser ; une typographie réussie est invisible — elle fonctionne, tout simplement.

Échelle typographique

Une échelle cohérente crée une harmonie visuelle. Utilisez un ratio mathématique.

L’échelle 1.25 (recommandée pour les UI) :

:root {
  /* Base: 16px (1rem) */
  --text-xs: 0.64rem;    /* 10.24px - use sparingly */
  --text-sm: 0.8rem;     /* 12.8px - captions, labels */
  --text-base: 1rem;     /* 16px - body text */
  --text-lg: 1.25rem;    /* 20px - lead text */
  --text-xl: 1.563rem;   /* 25px - h4 */
  --text-2xl: 1.953rem;  /* 31.25px - h3 */
  --text-3xl: 2.441rem;  /* 39px - h2 */
  --text-4xl: 3.052rem;  /* 48.8px - h1 */
}

Hauteur de ligne (interligne)

La hauteur de ligne affecte considérablement la lisibilité. Différents types de contenu nécessitent des interlignes différents.

Longueur de ligne (mesure)

Une longueur de ligne optimale prévient la fatigue oculaire et améliore la compréhension en lecture.

• Optimale : 45-75 caractères par ligne
• Cible : 50-65 caractères
• Maximum absolu : 85 caractères

p {
  max-width: 65ch;  /* ch unit = width of '0' character */
}

.article-body {
  max-width: 70ch;
  margin: 0 auto;
}

Choix de la police

Les polices système en priorité. Elles se chargent instantanément, correspondent à la plateforme et sont optimisées pour les écrans.

:root {
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code',
               'JetBrains Mono', Consolas, monospace;
}

Utilisez des polices personnalisées pour : - La différenciation de marque (sites marketing) - Un rendu éditorial ou de publication - Une intention de design spécifique impossible à obtenir avec les polices système

Graisse de police pour la hiérarchie

Utilisez la graisse pour établir la hiérarchie, pas uniquement la taille.

h1 { font-weight: 700; }  /* Bold */
h2 { font-weight: 600; }  /* Semibold */
h3 { font-weight: 600; }  /* Semibold */
.lead { font-weight: 500; }  /* Medium */
p { font-weight: 400; }   /* Regular */
.meta { font-weight: 400; color: var(--text-muted); }

Référence rapide typographique

Théorie des couleurs

« La couleur est une puissance qui influence directement l’âme. » — Wassily Kandinsky

Les couleurs communiquent plus vite que les mots. Elles installent une ambiance, guident l’attention, signalent le sens et renforcent la reconnaissance de marque.

La règle 60-30-10

La répartition des couleurs la plus fiable pour des interfaces équilibrées.

┌──────────────────────────────────────────┐
│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ 60% - Dominant (Background)
│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│
│░░░░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░│ 30% - Secondary (Cards, sections)
│░░░░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░│
│░░░░░▓▓▓▓▓▓▓▓▓▓▓▓██████▓▓▓▓▓▓▓▓▓▓░░░░░░░░│ 10% - Accent (Buttons, links)
└──────────────────────────────────────────┘

Construire une palette de couleurs

Toute interface a besoin des couleurs sémantiques suivantes :

:root {
  /* Brand */
  --color-primary: hsl(220, 80%, 50%);
  --color-primary-hover: hsl(220, 80%, 45%);

  /* Semantic */
  --color-success: hsl(142, 76%, 36%);  /* Green - positive */
  --color-warning: hsl(38, 92%, 50%);   /* Amber - caution */
  --color-error: hsl(0, 84%, 60%);      /* Red - danger */

  /* Neutrals */
  --color-background: hsl(0, 0%, 100%);
  --color-surface: hsl(220, 14%, 96%);
  --color-border: hsl(220, 13%, 91%);

  /* Text */
  --color-text: hsl(220, 13%, 13%);
  --color-text-secondary: hsl(220, 9%, 46%);
  --color-text-muted: hsl(220, 9%, 64%);
}

Psychologie des couleurs

/* Design dark first, derive light */
:root {
  /* Dark mode defaults */
  --color-background: hsl(0, 0%, 0%);
  --color-surface: hsl(0, 0%, 7%);
  --color-border: hsl(0, 0%, 15%);
  --color-text: hsl(0, 0%, 93%);
  --color-text-secondary: hsl(0, 0%, 63%);
}

@media (prefers-color-scheme: light) {
  :root {
    --color-background: hsl(0, 0%, 100%);
    --color-surface: hsl(0, 0%, 97%);
    --color-border: hsl(0, 0%, 89%);
    --color-text: hsl(0, 0%, 9%);
    --color-text-secondary: hsl(0, 0%, 40%);
  }
}

Quand l’utiliser : Outils de développement, applications multimédias, tableaux de bord, dans les contextes où les utilisateurs restent longtemps et où le mode sombre réduit la fatigue visuelle.

Contraste d’accessibilité

WCAG 3.0 est encore un brouillon de travail. La dernière révision a été publiée en mars 2026 et ne remplace pas WCAG 2.2 ; le W3C indique que les deux standards coexisteront. L’Accessibility Guidelines Working Group prévoit de publier en 2026 un calendrier prévisionnel pour WCAG 3, mais WCAG 2.2 reste le standard à viser pour les travaux actuels.

Outils : WebAIM Contrast Checker, sélecteur de couleurs de Chrome DevTools

Hiérarchie visuelle

« Le design est l’ambassadeur silencieux de votre marque. » — Paul Rand

La hiérarchie visuelle contrôle ce que les utilisateurs voient en premier, en deuxième et en troisième. Sans hiérarchie claire, les utilisateurs doivent faire un effort pour trouver l’information. Avec elle, les interfaces paraissent naturelles.

Les six outils de la hiérarchie

1. Taille — Les éléments plus grands attirent l’attention en premier

.hero-title { font-size: 3rem; }      /* Dominant */
.section-title { font-size: 1.5rem; } /* Secondary */
.body-text { font-size: 1rem; }       /* Baseline */

2. Graisse — Le gras se détache, le léger s’efface

h1 { font-weight: 700; }
.lead { font-weight: 500; }
p { font-weight: 400; }

3. Couleur et contraste — Un contraste élevé = attention

.title { color: var(--color-text); }  /* Near black */
.meta { color: var(--color-text-muted); }  /* Gray */

4. Position — Les positions clés comptent

F-PATTERN (content pages):     Z-PATTERN (landing pages):
████████████████████████      1 ──────────────────► 2
████████                            ↘
████                                     ↘
██                                            ↘
                                   3 ──────────────────► 4

5. Espaces vides — L’isolement crée de l’importance

.hero { padding: 120px 48px; }  /* Generous space */
.data-table { padding: 12px; }  /* Dense content */

6. Profondeur et élévation — Les éléments qui se détachent vers l’avant exigent l’attention

:root {
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
}

.card { box-shadow: var(--shadow-sm); }
.card:hover { box-shadow: var(--shadow-md); }
.modal { box-shadow: var(--shadow-lg); }

Motifs appliqués

Présence collaborative (Figma) : Plusieurs curseurs d’utilisateurs accompagnés d’étiquettes de nom, de surlignages de sélection et de contours de composants créent un document vivant. La couleur de chaque collaborateur est distincte mais de poids équivalent : aucun curseur n’est « plus voyant » qu’un autre.

Indicateurs d’état discrets (Vercel) : Le statut de déploiement s’appuie sur des indicateurs subtils et persistants plutôt que sur des alertes intrusives. Une fine barre de couleur en haut communique l’état (build en cours, déployé, échoué) sans interrompre le flux de travail.

Analogies de design ancrées dans le réel (Flighty) : Les visualisations de progression de vol reflètent les instruments d’aviation physiques : courbes d’altitude, indicateurs de vitesse et plans de porte d’embarquement utilisent des métaphores visuelles familières plutôt que des barres de progression abstraites.

Le test du plissement des yeux

Plissez les yeux devant votre design. Pouvez-vous encore percevoir la hiérarchie ? Si oui, elle est solide.

Espacement et rythme

« L’espace blanc est comme l’air : il est nécessaire pour que le design respire. » — Wojciech Zieliński

L’espacement est la structure invisible du design. Un espacement cohérent crée un rythme visuel : cette impression que les éléments appartiennent au même système cohérent.

La grille de 8 px

La grille de 8 px est le standard du secteur, car : - Elle se divise régulièrement (8, 16, 24, 32, 40, 48…) - Elle fonctionne avec les densités d’écran courantes (1x, 1.5x, 2x, 3x) - Elle crée un rythme cohérent sans calcul

:root {
  --space-1: 4px;    /* Tight: icon gaps */
  --space-2: 8px;    /* Compact: inline elements */
  --space-3: 12px;   /* Snug: form fields */
  --space-4: 16px;   /* Default: most gaps */
  --space-6: 24px;   /* Spacious: card padding */
  --space-8: 32px;   /* Section gaps */
  --space-12: 48px;  /* Major sections */
  --space-16: 64px;  /* Page sections */
  --space-20: 80px;  /* Hero spacing */
}

Espacement interne vs espacement externe

Interne (padding) : espace à l’intérieur d’un élément Externe (margin) : espace entre les éléments

Règle : l’espacement interne doit généralement être plus important que l’espacement externe au sein de groupes liés.

.card {
  padding: 24px;        /* Internal: spacious */
  margin-bottom: 16px;  /* External: less than padding */
}

Schémas d’espacement des composants

Cartes :

.card { padding: 24px; border-radius: 12px; }
.card-header { margin-bottom: 16px; }
.card-title { margin-bottom: 4px; }  /* Tight to subtitle */

Boutons :

.btn { padding: 12px 24px; border-radius: 8px; }
.btn--sm { padding: 8px 16px; }
.btn--lg { padding: 16px 32px; }
.btn-group { display: flex; gap: 12px; }

Formulaires :

.form-row { margin-bottom: 24px; }
.form-label { margin-bottom: 4px; }
.form-help { margin-top: 4px; }
.form-actions { margin-top: 32px; display: flex; gap: 12px; }

Aide-mémoire sur l’espacement

Principes d’animation

« Animation is not the art of drawings that move but the art of movements that are drawn. » — Norman McLaren

L’animation donne vie aux interfaces. Bien exécutée, elle guide l’attention, communique l’état et crée une connexion émotionnelle. Mal exécutée, elle frustre et distrait.

Le principe fondamental

L’animation doit sembler inévitable, jamais décorative.

Une bonne animation : 1. Communique quelque chose que le design statique ne peut pas transmettre 2. Réduit la charge cognitive en montrant les relations 3. Paraît naturelle et attendue 4. Disparaît de la conscience

Une mauvaise animation : 1. N’existe que parce que « ça fait joli » 2. Ralentit l’utilisateur 3. Attire l’attention sur elle-même 4. Crée de l’anxiété ou de l’impatience

Principes clés pour les interfaces

1. Anticipation — Préparez les utilisateurs à ce qui va suivre.

.button {
  transition: transform 0.1s ease-out;
}

.button:active {
  transform: scale(0.97);  /* Slight press before action */
}

2. Suivi du mouvement — Laissez le mouvement s’achever naturellement avec un effet de ressort.

.panel {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

withAnimation(.spring(response: 0.4, dampingFraction: 0.7)) {
    isOpen = true
}

3. Ease-In, Ease-Out — Rien dans la nature ne se déplace à vitesse constante.

4. Mise en scène — Dirigez l’attention vers ce qui compte. Un seul élément doit bouger à la fois, sauf s’il s’agit d’une chorégraphie de groupe.

5. Échelonnement — Les éléments doivent apparaître en séquence, pas tous en même temps.

.list-item {
  animation: fadeSlideIn 0.3s ease-out both;
}

.list-item:nth-child(1) { animation-delay: 0ms; }
.list-item:nth-child(2) { animation-delay: 50ms; }
.list-item:nth-child(3) { animation-delay: 100ms; }
.list-item:nth-child(4) { animation-delay: 150ms; }

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

Repères de durée

Performance : la règle d’or

N’animez que transform et opacity — ces propriétés sont accélérées par le GPU et ne déclenchent pas de recalcul de mise en page.

/* BAD: Animating layout */
.panel { transition: left 0.3s, width 0.3s; }

/* GOOD: Using transform */
.panel { transition: transform 0.3s; }

Quand NE PAS animer

1. L’utilisateur a activé prefers-reduced-motion css @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

2. L’animation n’apporte aucune information — spinners gratuits, éléments qui rebondissent

3. L’utilisateur est pressé — états d’erreur, validation de formulaire, résultats de recherche
4. L’animation ralentirait des actions répétées — les raccourcis clavier doivent contourner l’animation
5. Les données sont déjà chargées — Bear utilise zéro état de chargement en préchargeant le contenu, ce qui rend l’application instantanée. Si vous pouvez précharger, supprimez entièrement le skeleton/spinner.

// Bear's approach: preload so no loading state is needed
struct NoteListView: View {
    @Query var notes: [Note]  // SwiftData loads from disk instantly
    // No loading state, no skeleton, no spinner — data is always there
    var body: some View {
        List(notes) { note in
            NoteRow(note: note)
        }
    }
}

Référence rapide pour l’animation

:root {
  /* Durations */
  --duration-instant: 0.1s;
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
  --duration-slow: 0.4s;

  /* Easings */
  --ease-out: cubic-bezier(0.0, 0.0, 0.58, 1.0);
  --ease-in: cubic-bezier(0.42, 0.0, 1.0, 1.0);
  --ease-in-out: cubic-bezier(0.42, 0.0, 0.58, 1.0);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

Modèles d’interaction

« The best interface is no interface. » — Golden Krishna

Les modèles d’interaction définissent comment les utilisateurs manipulent, naviguent et comprennent votre produit. Ces modèles sont extraits de l’étude de produits qui offrent des interactions exceptionnelles.

Manipulation directe (Framer)

Rendez les concepts abstraits tangibles. Framer transforme les breakpoints CSS — des nombres abstraits — en poignées glissables. Les utilisateurs voient les mises en page s’adapter en temps réel.

/* Breakpoint handle styling */
.breakpoint-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent);
  cursor: col-resize;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.breakpoint-handle:hover,
.breakpoint-handle:active {
  opacity: 1;
  width: 6px;
}

Quand l’utiliser : pour tout paramètre dont le résultat est visuel — redimensionnement par glisser, sélecteurs de couleur, défilement de timeline.

Interfaces contextuelles (Flighty, Figma)

N’affichez que ce qui est pertinent à l’instant présent. Flighty utilise 15 états distincts pour le suivi de vol. Le panneau de propriétés de Figma se transforme entièrement selon ce que vous avez sélectionné.

enum ContextState: CaseIterable {
    case farOut, dayBefore, headToAirport, atAirport
    case atGate, boarding, inFlight, landed, connection

    static func current(for flight: Flight, context: UserContext) -> ContextState {
        // Factor in: time, location, flight status
        // Return the single most relevant state
    }
}

Anti-pattern : afficher tous les contrôles et griser ceux qui ne sont pas pertinents. Cela crée du bruit visuel.

Activation intelligente (Halide)

Les outils doivent détecter le contexte et s’activer d’eux-mêmes. La loupe de mise au point de Halide apparaît lorsqu’on glisse pour faire la mise au point et disparaît au relâchement. Aucun bouton à basculer.

struct IntelligentlyActivated<Content: View>: ViewModifier {
    let isInteracting: Bool
    @State private var isVisible = false

    func body(content: Content) -> some View {
        content
            .opacity(isVisible ? 1 : 0)
            .scaleEffect(isVisible ? 1 : 0.95)
            .animation(.easeInOut(duration: 0.2), value: isVisible)
            .onChange(of: isInteracting) { _, newValue in
                if newValue {
                    withAnimation { isVisible = true }
                } else {
                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
                        if !isInteracting { isVisible = false }
                    }
                }
            }
    }
}

Conception bimodale (Halide, Warp)

Les changements de mode doivent transformer l’interface, pas simplement basculer des éléments. Les modes Auto et Manuel de Halide sont deux interfaces complètement différentes. Warp fait le pont entre CLI et GUI grâce à quatre méthodes de saisie (frappe, palette, IA, souris) sans imposer un seul paradigme aux utilisateurs.

Contenu structuré (Warp, Bear, Craft)

Ajoutez de la structure à un contenu traditionnellement non structuré. Warp transforme la sortie terminal en blocs distincts que l’on peut copier, partager ou relancer. Bear permet d’organiser les notes en ligne pendant l’écriture (#tag/subtag). Craft permet à n’importe quel bloc de devenir une page — la structure émerge de l’usage, pas d’une hiérarchie prédéfinie.

Formation progressive (Superhuman)

Enseignez la méthode rapide par l’exposition répétée. La palette Cmd+K de Superhuman affiche systématiquement les raccourcis clavier à côté des résultats. Chaque utilisation est une micro-leçon.

/* Always show shortcut alongside command name */
.command-result {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
}

.command-shortcut {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-subtle);
  padding: 2px 6px;
  border-radius: 4px;
}

Anti-pattern : les modales de tutoriel qui expliquent les fonctionnalités. L’explication s’oublie ; la pratique se retient.

Patterns d’interface IA

« Les meilleures interfaces d’IA rendent le processus de la machine visible et son résultat vérifiable. »

Les interfaces d’IA posent des défis particuliers : les utilisateurs ne peuvent pas prédire le résultat, ne peuvent pas vérifier l’exactitude d’un simple coup d’œil et ne savent souvent pas si le système fonctionne ou s’il est défaillant.

Le problème central

.citation-marker {
  position: relative;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.8em;
  vertical-align: super;
}

.citation-preview {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  padding: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

Anti-modèle : Les interfaces d’IA qui génèrent des affirmations sans sources traçables. Si le modèle ne peut pas en citer la source, l’interface devrait le signaler.

Indicateurs de phase en streaming (Perplexity)

Montrez aux utilisateurs ce que fait l’IA, pas seulement qu’elle travaille. Remplacez les indicateurs de chargement génériques par des indicateurs de phase : « Recherche… » → « Lecture de 4 sources… » → « Rédaction de la réponse… »

.phase-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--phase-color) 10%, transparent);
  border-radius: 16px;
  font-size: 13px;
  color: var(--phase-color);
  transition: all 0.3s ease;
}

.loading-dots span {
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
  animation: pulse 1.4s ease-in-out infinite;
}

Transparence des erreurs

Lorsque l’IA échoue ou n’est pas sûre, indiquez-le clairement : ne vous cachez pas derrière un texte qui semble assuré.

Preuves du workflow agentique

Les agents d’IA ont besoin d’états d’interface qui prouvent le travail, et ne se contentent pas de raconter l’effort fourni. Un bon flux de travail agentique rend la progression lisible grâce à des points de contrôle : plan accepté, sources collectées, modifications appliquées, tests exécutés, revue en attente, et publication bloquée ou prête.

Dieter Rams : dix principes

« Moins, mais mieux. » — Dieter Rams

Dieter Rams est le designer industriel le plus influent du 20e siècle. Directeur du design chez Braun de 1961 à 1995, il a créé des produits qui restent intemporels plusieurs décennies plus tard. Son travail a directement inspiré le langage de design d’Apple.

Les dix principes du bon design

1. Le bon design est innovant Ne copiez pas. Associez les avancées technologiques à un design innovant.

2. Le bon design rend un produit utile Chaque élément doit avoir une raison d’être. La forme suit la fonction.

3. Le bon design est esthétique La beauté n’est pas superficielle : elle est essentielle. Les produits que nous utilisons au quotidien influencent notre bien-être.

4. Le bon design rend un produit compréhensible Les utilisateurs ne devraient pas avoir besoin d’instructions. L’interface s’explique d’elle-même.

5. Le bon design est discret Le design doit accompagner, pas dominer. Le contenu de l’utilisateur est au premier plan, pas votre UI.

/* Obtrusive: UI competes with content */
.editor {
  background: linear-gradient(135deg, purple, blue);
  border: 3px dashed gold;
}

/* Unobtrusive: UI recedes, content shines */
.editor {
  background: var(--color-background);
  border: 1px solid var(--color-border);
}

6. Un bon design est honnête N’utilisez pas de dark patterns. Ne promettez pas trop. Soyez transparent sur les limites.

7. Un bon design est fait pour durer Évitez les tendances qui vieilliront vite. Privilégiez l’intemporel à l’effet de mode.

TRENDY (will date):           TIMELESS:
- Extreme glassmorphism       - Clean typography
- Neon colors, glitch effects - Subtle elevation
- Aggressive gradients        - Neutral palette with considered accent

8. Un bon design est soigné jusque dans les moindres détails Rien ne doit être arbitraire. États de chargement, états vides, états d’erreur : tout est conçu.

9. Un bon design est respectueux de l’environnement La performance a un impact environnemental. Respectez l’attention de l’utilisateur. Code efficace.

10. Un bon design consiste à concevoir le moins possible Supprimez tout ce qui n’est pas nécessaire. Le meilleur design est invisible.

Patterns web 2026

Le design web moderne exploite les capacités natives CSS, qui éliminent souvent le besoin de JavaScript. 2025-2026 a apporté le positionnement par ancre, les animations pilotées par le défilement et @starting-style aux navigateurs de production.

Container Queries

Dimensionnez les composants selon leur conteneur, et non selon le viewport.

.card-grid {
  container-type: inline-size;
  container-name: card-grid;
}

.card {
  display: grid;
  gap: 16px;
  padding: 20px;
}

@container card-grid (min-width: 400px) {
  .card {
    grid-template-columns: auto 1fr;
  }
}

@container card-grid (min-width: 600px) {
  .card {
    padding: 32px;
    gap: 24px;
  }
}

Le sélecteur :has()

Sélection du parent en fonction de ses enfants — auparavant impossible sans JavaScript.

/* Card with image gets different padding */
.card:has(img) {
  padding: 0;
}

.card:has(img) .card-content {
  padding: 20px;
}

/* Form group with error */
.form-group:has(.input:invalid) .form-label {
  color: var(--color-error);
}

/* Highlight navigation when on that page */
.nav-item:has(a[aria-current="page"]) {
  background: var(--color-surface);
}

Imbrication CSS

Imbrication native sans préprocesseurs.

.card {
  background: var(--color-surface);
  border-radius: 12px;
  padding: 24px;

  & .card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 8px;
  }

  & .card-body {
    color: var(--color-text-secondary);
    line-height: 1.6;
  }

  &:hover {
    box-shadow: var(--shadow-md);
  }

  @media (min-width: 768px) {
    padding: 32px;
  }
}

Intégration HTMX

Interactivité pilotée par le serveur sans frameworks JavaScript lourds.

<!-- Load content on click -->
<button hx-get="/api/more-items"
        hx-target="#item-list"
        hx-swap="beforeend"
        hx-indicator="#loading">
  Load More
</button>

<!-- Form with inline validation -->
<form hx-post="/api/contact"
      hx-target="#form-response"
      hx-swap="outerHTML">
  <input type="email" name="email"
         hx-post="/api/validate-email"
         hx-trigger="blur"
         hx-target="next .error" />
  <span class="error"></span>
</form>

Positionnement par ancrage

Positionnement CSS natif d’un élément par rapport à un autre, sans JavaScript. Infobulles, popovers et menus déroulants qui suivent leurs déclencheurs.

/* Anchor an element to another */
.trigger {
  anchor-name: --my-trigger;
}

.tooltip {
  position: fixed;
  position-anchor: --my-trigger;
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 8px;
}

Animations pilotées par le défilement

Liez la progression de l’animation à la position de défilement. Indicateurs de progression de lecture, effets de parallaxe et séquences de révélation sans JavaScript.

/* Reading progress bar */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-primary);
  transform-origin: left;
  animation: progress linear;
  animation-timeline: scroll();
}

@keyframes progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@starting-style

Définissez les styles initiaux des éléments ajoutés au DOM, ce qui permet des animations d’entrée uniquement avec CSS, sans JavaScript.

.card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;

  @starting-style {
    opacity: 0;
    transform: translateY(10px);
  }
}

Système de tokens de design

Un système complet de tokens pour garantir la cohérence dans toute votre application.

:root {
  /* Colors */
  --color-text: #1a1a1a;
  --color-text-secondary: #666666;
  --color-text-muted: #999999;

  --color-background: #ffffff;
  --color-surface: #f8f9fa;
  --color-surface-elevated: #ffffff;

  --color-border: #e5e7eb;
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;

  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* Typography */
  --font-sans: system-ui, -apple-system, sans-serif;
  --font-mono: "SF Mono", Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* Spacing (8px base) */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* Borders */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 100ms;
  --duration-normal: 200ms;
}

Mode sombre bien conçu

Ne vous contentez pas d’inverser les couleurs : repensez le design pour les contextes sombres.

@media (prefers-color-scheme: dark) {
  :root {
    /* Neutrals */
    --color-background: hsl(220, 13%, 10%);
    --color-surface: hsl(220, 13%, 15%);
    --color-surface-elevated: hsl(220, 13%, 18%);
    --color-border: hsl(220, 13%, 23%);

    /* Text (inverted) */
    --color-text: hsl(220, 9%, 93%);
    --color-text-secondary: hsl(220, 9%, 70%);
    --color-text-muted: hsl(220, 9%, 55%);

    /* Adjust saturation for dark mode */
    --color-primary: hsl(220, 80%, 60%);
    --color-success: hsl(142, 70%, 45%);
    --color-error: hsl(0, 80%, 65%);

    /* Shadows in dark mode need adjustment */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  }
}

Principes du mode sombre : - Réduisez la saturation sur les grandes surfaces - Augmentez la luminosité des couleurs d’accent - Renforcez les ombres (elles ont besoin de plus de contraste) - Concevez le mode sombre intentionnellement, pas comme un ajout de dernière minute

Flux de travail d’extraction Figma

Transformer des fichiers de design en code de production exige d’extraire systématiquement les tokens de design : couleurs, typographie, espacement et effets qui définissent votre langage de design.

Export des Variables Figma

La fonctionnalité native Variables de Figma offre le parcours d’extraction le plus propre :

Étapes d’export : 1. Ouvrez le fichier Figma → panneau Local Variables 2. Cliquez sur le menu de la collection → « Export to JSON » 3. Enregistrez sous figma-variables.json

Structure des tokens JSON :

{
  "colors": {
    "primitive": {
      "blue-500": { "value": "#3b82f6", "type": "color" },
      "blue-600": { "value": "#2563eb", "type": "color" }
    },
    "semantic": {
      "primary": { "value": "{colors.primitive.blue-500}", "type": "color" },
      "primary-hover": { "value": "{colors.primitive.blue-600}", "type": "color" }
    }
  },
  "spacing": {
    "1": { "value": "4px", "type": "spacing" },
    "2": { "value": "8px", "type": "spacing" },
    "4": { "value": "16px", "type": "spacing" }
  }
}

Transformation de tokens vers CSS

Custom Properties CSS :

:root {
  /* Primitive colors (direct values) */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-900: #1e3a8a;

  /* Semantic colors (reference primitives) */
  --color-primary: var(--color-blue-500);
  --color-primary-hover: var(--color-blue-600);
  --color-background: var(--color-white);
  --color-surface: var(--color-gray-50);

  /* Spacing (8px grid) */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */

  /* Typography */
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

Tokens du mode sombre :

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--color-gray-900);
    --color-surface: var(--color-gray-800);
    --color-text: var(--color-gray-100);
    --color-text-secondary: var(--color-gray-400);

    /* Adjusted shadows for dark mode */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  }
}

Transformation des tokens en SwiftUI

Extension Color :

import SwiftUI

extension Color {
    // MARK: - Primitive Colors
    static let blue50 = Color(hex: "eff6ff")
    static let blue500 = Color(hex: "3b82f6")
    static let blue600 = Color(hex: "2563eb")

    // MARK: - Semantic Colors
    static let brandPrimary = Color.blue500
    static let brandPrimaryHover = Color.blue600

    // MARK: - Surface Colors
    static let surfaceBackground = Color(light: .white, dark: Color(hex: "0f172a"))
    static let surfaceElevated = Color(light: Color(hex: "f8fafc"), dark: Color(hex: "1e293b"))
}

extension Color {
    init(hex: String) {
        // Standard hex parsing implementation
    }

    init(light: Color, dark: Color) {
        self.init(UIColor { traits in
            traits.userInterfaceStyle == .dark ? UIColor(dark) : UIColor(light)
        })
    }
}

Constantes d’espacement :

enum Spacing {
    static let xs: CGFloat = 4    // --space-1
    static let sm: CGFloat = 8    // --space-2
    static let md: CGFloat = 16   // --space-4
    static let lg: CGFloat = 24   // --space-6
    static let xl: CGFloat = 32   // --space-8
}

// Usage
VStack(spacing: Spacing.md) {
    // ...
}
.padding(Spacing.lg)

Checklist de transmission pour les designers

Ce que les designers doivent exporter :

• [ ] Toutes les couleurs sont définies comme variables (aucun hex codé en dur)
• [ ] La typographie utilise les styles de texte définis
• [ ] L’espacement suit le système de grille (base de 8px)
• [ ] Les variantes du mode sombre sont fournies
• [ ] Les états interactifs sont documentés (hover, active, disabled)
• [ ] Les breakpoints responsives sont annotés
• [ ] Les exigences d’accessibilité sont notées (ratios de contraste)

Ce que reçoit le développeur :

1. Fichiers de tokens (JSON/CSS/Swift selon la plateforme)
2. Spécifications des composants avec mesures
3. Exports de ressources dans les formats requis
4. Documentation des interactions (états, animations)
5. Annotations d’accessibilité

Tableaux de référence rapide

Principes Gestalt

Checklist de design

Avant de livrer une interface, vérifiez :

Gestalt

• [ ] Les éléments liés sont plus proches les uns des autres que les éléments sans lien (proximité)
• [ ] Les fonctions similaires ont des styles similaires (similarité)
• [ ] La séparation entre premier plan et arrière-plan est claire (figure-fond)
• [ ] Le regard circule naturellement dans la mise en page (continuité)

Typographie

• [ ] La taille de police de base est d’au moins 16px
• [ ] La hauteur de ligne est de 1,5 ou plus pour le corps du texte
• [ ] La longueur des lignes reste inférieure à 75 caractères
• [ ] La hiérarchie est claire (3 niveaux distincts)
• [ ] Une échelle cohérente est utilisée partout

Couleur

• [ ] Tout le texte respecte un contraste de 4,5 :1 (WCAG AA)
• [ ] La couleur n’est pas le seul indicateur (icônes/libellés également)
• [ ] Le mode sombre est conçu intentionnellement
• [ ] La répartition 60-30-10 est respectée

Hiérarchie visuelle

• [ ] L’élément le plus important (#1) est identifiable
• [ ] Le regard suit l’ordre prévu
• [ ] Un CTA clair par section
• [ ] L’échelle typographique est cohérente

Espacement

• [ ] Tous les espacements utilisent une échelle définie (pas de nombres magiques)
• [ ] Les cartes/composants ont un padding cohérent
• [ ] L’espacement sur mobile est confortable
• [ ] L’alignement de la grille est cohérent (base 8px)

Interaction

• [ ] Les utilisateurs peuvent-ils atteindre leurs objectifs sans penser à l’outil ?
• [ ] L’UI s’adapte-t-elle au contexte actuel ?
• [ ] Les outils ne sont-ils visibles que lorsqu’ils sont pertinents ?
• [ ] L’utilisation répétée révèle-t-elle des méthodes plus rapides ?

Interfaces d’IA

• [ ] Chaque affirmation factuelle dispose d’une source traçable
• [ ] Le streaming montre les phases du processus, pas seulement un spinner
• [ ] Les états d’erreur sont explicites, pas masqués
• [ ] Les sorties à faible niveau de confiance sont différenciées visuellement

Vérification Dieter Rams

• [ ] Peut-on supprimer quelque chose ?
• [ ] Chaque élément sert-il une fonction ?
• [ ] Cela paraîtrait-il daté dans 5 ans ?
• [ ] Ai-je conçu chaque état ?

Ressources

Livres : - As Little Design as Possible de Sophie Lovell (Dieter Rams) - The Elements of Typographic Style de Robert Bringhurst

Outils : - WebAIM Contrast Checker - Type Scale Generator - Figma Tokens Studio — Gestion des design tokens

Design Systems : - Apple HIG - Material Design 3 - Radix UI - shadcn/ui

Études de design

Analyses approfondies de 48 produits exceptionnels, documentant des schémas et principes dont s’inspirer.

Outils pour développeurs et IA

Ce guide se développe par la pratique. Les principes de design sont intemporels, mais leur application évolue avec la technologie et notre compréhension.