Principes de design pour ingenieurs logiciels

Mis à jour le 9 février 2026

Mise à jour de février 2026 : Ajout de deux nouvelles sections — Interaction Patterns (8 paradigmes issus de l’étude de Framer, Flighty, Halide, Warp, Bear, Craft et Superhuman) et AI Interface Patterns (design axé sur les citations, phases de streaming, transparence des erreurs inspirés de Perplexity). Mise à jour des Web Patterns pour 2026 avec le positionnement par ancrage, les animations pilotées par le défilement et @starting-style. Mise à jour de l’accessibilité pour refléter la standardisation ISO de WCAG 2.2. Consultez les Design Studies pour des analyses approfondies de 16 produits exceptionnels.

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 à décortiquer les interfaces de produits comme Linear, Stripe et Raycast. Ce guide condense cette compréhension en une référence exhaustive — celle que j’aurais aimé avoir quand j’ai commencé à me soucier de l’apparence et du 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 une signification. La différence entre un logiciel qui fait amateur et un logiciel qui fait professionnel réside dans la compréhension de ces principes et leur application cohérente.

Ce guide part du principe que vous savez déjà coder. Il vous apprend à voir — à comprendre pourquoi certaines interfaces semblent fluides tandis que d’autres semblent chaotiques, et surtout, comment concevoir 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. Modèles d’interaction
2. Modèles d’interface IA

Partie 3 : Philosophie du design

1. Dieter Rams : dix principes

Partie 4 : Implémentation

1. Modèles web 2026
2. Système de design tokens
3. Le mode sombre bien fait
4. Flux 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 humains perçoivent l’information visuelle. Le cerveau ne voit pas des pixels individuels — il organise les éléments en motifs significatifs. 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 plus que toute autre propriété visuelle.

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

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

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 fonctionnent de la même manière. C’est pourquoi les systèmes de design utilisent des styles de boutons, des traitements de cartes et une typographie cohérents.

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 se distinguer clairement de l’arrière-plan.

Le cerveau a besoin de distinguer la « figure » (ce sur quoi se concentrer) du « fond » (l’arrière-plan). Un mauvais rapport 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.

Enfermer des éléments dans un conteneur visuel (carte, boîte, zone bordée) signale qu’ils vont 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é 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
└────────────────────────────────┘

Fermeture

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 doter le langage humain d’une forme visuelle durable. » — Robert Bringhurst

La typographie est le fondement du design d’interface. Le texte communique la fonctionnalité, la hiérarchie et la marque. Une mauvaise typographie rend les interfaces plus difficiles à utiliser ; une excellente typographie 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 (interlignage)

La hauteur de ligne affecte considérablement la lisibilité. Différents contenus nécessitent différents interlignages.

Longueur de ligne (mesure)

La 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;
}

Sélection de police

Les polices système d’abord. 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/publication - Une intention de design spécifique non réalisable 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 typographie

Théorie des couleurs

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

La couleur communique plus vite que les mots. Elle établit l’ambiance, guide l’attention, signale le sens et construit la reconnaissance de marque.

La règle du 60-30-10

La distribution de couleurs la plus fiable pour des interfaces équilibrées.

┌──────────────────────────────────────────┐
│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ 60% - Dominante (Arrière-plan)
│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│
│░░░░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░│ 30% - Secondaire (Cartes, sections)
│░░░░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░│
│░░░░░▓▓▓▓▓▓▓▓▓▓▓▓██████▓▓▓▓▓▓▓▓▓▓░░░░░░░░│ 10% - Accent (Boutons, liens)
└──────────────────────────────────────────┘

Construire une palette de couleurs

Chaque interface a besoin de ces couleurs sémantiques :

: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

Le design « dark mode first » (Vercel)

Vercel conçoit d’abord pour le mode sombre, puis en dérive le mode clair. Cela produit de meilleures interfaces sombres, car le mode sombre devient la considération principale plutôt qu’un ajout après coup.

/* 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 pour développeurs, applications multimédia, tableaux de bord — des contextes où les utilisateurs passent de longues sessions et où le mode sombre réduit la fatigue oculaire.

Contraste et accessibilité

WCAG 2.2 est devenu une norme ISO (ISO/IEC 40500:2025) en octobre 2025, ajoutant des critères pour la visibilité du focus, la saisie redondante et l’authentification accessible. Ajouts clés : les indicateurs de focus ne doivent pas être entièrement masqués par d’autres contenus (2.4.11), et l’authentification ne doit pas reposer uniquement sur des tests de fonction cognitive (3.3.8).

Outils : WebAIM Contrast Checker, sélecteur de couleurs 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 semblent naturelles et fluides.

Les six outils de la hiérarchie

1. La 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. La graisse — Le gras ressort au premier plan, le léger s’efface

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

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

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

4. La position — Les emplacements clés comptent

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

5. L’espace blanc — L’isolement crée 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 captent 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); }

Exemples concrets

Présence collaborative (Figma) : Plusieurs curseurs d’utilisateurs avec des étiquettes de noms, des surbrillances de sélection et des contours de composants créent un document vivant. La couleur de chaque collaborateur est distincte mais d’importance égale — aucun curseur n’est « plus fort » qu’un autre.

Indicateurs d’état ambiants (Vercel) : Le statut de déploiement utilise des indicateurs subtils et persistants plutôt que des alertes intrusives. Une fine barre colorée en haut communique l’état (en construction, déployé, échoué) sans interrompre le flux de travail.

Analogies visuelles du monde réel (Flighty) : Les visualisations de progression de vol reproduisent les instruments d’aviation physiques — courbes d’altitude, indicateurs de vitesse et plans de portes d’embarquement utilisent des métaphores visuelles familières plutôt que des barres de progression abstraites.

Le test du plissement d’yeux

Plissez les yeux face à 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 — le sentiment que les éléments forment un tout dans un système cohérent.

La grille de 8px

La grille de 8px est le standard de l’industrie car : - Elle se divise de manière régulière (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 calculs complexes

: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 externe

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

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

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

Modèles d’espacement par composant

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; }

Référence rapide des espacements

Principes d’animation

« L’animation n’est pas l’art des dessins qui bougent, mais l’art des mouvements qui sont dessinés. » — Norman McLaren

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

Le principe fondamental

L’animation doit sembler inévitable, pas 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 entre les éléments 3. Semble naturelle et attendue 4. Disparaît de la perception consciente

Une mauvaise animation : 1. Existe uniquement 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. L’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. Le suivi — 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. La mise en scène — Dirigez l’attention vers ce qui compte. Un seul élément devrait bouger à la fois, sauf s’il s’agit d’une chorégraphie de groupe.

5. L’échelonnement — Les éléments doivent arriver 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); }
}

Recommandations 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 — indicateurs de chargement gratuits, éléments qui rebondissent

3. Les utilisateurs sont pressés — états d’erreur, validation de formulaire, résultats de recherche
4. L’animation ralentirait des actions répétées — les raccourcis clavier devraient contourner les animations
5. Les données sont déjà chargées — Bear utilise zéro état de chargement en préchargeant le contenu, rendant l’application instantanée. Si vous pouvez précharger, évitez entièrement les squelettes et indicateurs de chargement.

// 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 des animations

: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

« La meilleure interface, c’est l’absence d’interface. » — Golden Krishna

Les modèles d’interaction définissent la manière dont 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 déplaçables. 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 : tout paramètre dont le résultat est visuel — redimensionnement par glisser-déposer, 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 des vols. Le panneau de propriétés de Figma se transforme entièrement en fonction de l’élément 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-modèle : 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 lors du glissement de focus et disparaît au relâchement. Aucun bouton d’activation nécessaire.

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 des interfaces complètement différentes. Warp fait le pont entre CLI et interface graphique grâce à quatre méthodes de saisie (saisie clavier, palette de commandes, IA, souris) sans contraindre les utilisateurs à un seul paradigme.

Contenu structuré (Warp, Bear, Craft)

Ajoutez de la structure à un contenu traditionnellement non structuré. Warp transforme la sortie du terminal en blocs distincts qui peuvent être copiés, partagés ou réexécutés. Bear vous permet d’organiser vos notes en ligne pendant la rédaction (#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.

Apprentissage progressif (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-modèle : les fenêtres modales de tutoriel qui expliquent les fonctionnalités. L’explication est oubliée ; la pratique est retenue.

Modèles d’interface IA

« Les meilleures interfaces IA rendent le processus de la machine visible et ses résultats vérifiables. »

Les interfaces IA font face à des défis uniques : les utilisateurs ne peuvent pas prédire les résultats, ne peuvent pas vérifier leur exactitude par simple inspection, et souvent ne peuvent pas distinguer si le système fonctionne ou dysfonctionne.

Le problème fondamental

Conception centrée sur les citations (Perplexity)

Chaque affirmation factuelle doit renvoyer à sa source. Perplexity intègre des citations en ligne [1] dans chaque affirmation, avec des aperçus au survol et un panneau de sources persistant.

.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 IA qui génèrent des affirmations sans sources traçables. Si le modèle ne peut pas citer sa source, l’interface devrait le signaler.

Indicateurs de phase en streaming (Perplexity)

Montrez aux utilisateurs ce que l’IA fait, pas seulement qu’elle travaille. Remplacez les indicateurs de chargement génériques par des indicateurs de phase : « Recherche en cours… » → « 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

Quand l’IA échoue ou manque de certitude, montrez-le clairement — ne vous réfugiez pas derrière un texte faussement assuré.

Point clé : les utilisateurs pardonnent une IA honnête sur son incertitude. Ils ne pardonnent pas une IA qui se trompe avec assurance.

Dieter Rams : les dix principes

« Weniger, aber besser. » (Moins, mais mieux.) — Dieter Rams

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

Les dix principes du bon design

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

2. Un bon design rend un produit utile Chaque élément doit servir un objectif. La forme suit la fonction.

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

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

5. Un bon design est discret Le design doit soutenir, pas submerger. Le contenu de l’utilisateur est la vedette, 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 survendez pas. Soyez transparent sur les limites.

7. Un bon design est durable Évitez les tendances qui se démoderont vite. Privilégiez le classique au tendance.

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 rigoureux jusque dans les moindres détails Rien ne doit être arbitraire. États de chargement, états vides, états d’erreur — tout doit être conçu.

9. Un bon design est respectueux de l’environnement La performance est une question environnementale. Respectez l’attention de l’utilisateur. Un code efficace.

10. Un bon design, c’est aussi peu de design que possible Supprimez tout ce qui n’est pas nécessaire. Le meilleur design est invisible.

Patterns web 2026

Le design web moderne s’appuie sur les capacités CSS natives qui éliminent le besoin de JavaScript dans de nombreux cas. Les années 2025-2026 ont apporté le positionnement par ancre, les animations pilotées par le défilement et @starting-style aux navigateurs en production.

Container Queries

Dimensionnez les composants en fonction de leur conteneur, et non du 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 parentale basée sur les 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 native

L’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 ancre

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 entrant dans le DOM — permettant des animations d’entrée uniquement en 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 design tokens

Un système de tokens complet pour assurer la cohérence à travers 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;
}

Le 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’accentuation - Renforcez les ombres (elles nécessitent plus de contraste) - Concevez le mode sombre intentionnellement, pas comme une réflexion après coup

Workflows d’extraction Figma

Transformer des fichiers de design en code de production nécessite une extraction systématique des design tokens — couleurs, typographie, espacement et effets qui définissent votre langage visuel.

Export des variables Figma

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

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

Structure JSON des tokens :

{
  "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 des tokens en CSS

Propriétés personnalisées 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 pour le 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 au designer

Ce que les designers doivent exporter :

Critères de validation qualité :

• [ ] Toutes les couleurs définies en variables (pas de hex en dur)
• [ ] La typographie utilise des styles de texte définis
• [ ] L’espacement suit le système de grille (base 8px)
• [ ] Les variantes du mode sombre sont fournies
• [ ] Les états interactifs sont documentés (survol, actif, désactivé)
• [ ] Les points de rupture responsifs sont annotés
• [ ] Les exigences d’accessibilité sont notées (ratios de contraste)

Ce que le développeur reçoit :

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

Tableaux de référence rapide

Principes Gestalt

Typographie

Rôles des couleurs

Échelle d’espacement

Liste de vérification du design

Avant de livrer toute interface, vérifiez :

Gestalt

• [ ] Les éléments liés sont plus proches que les éléments non liés (Proximité)
• [ ] Les fonctions similaires ont des styles similaires (Similarité)
• [ ] Séparation nette entre premier plan et arrière-plan (Figure-Fond)
• [ ] Le regard parcourt naturellement 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+ pour le corps du texte
• [ ] La longueur de ligne est inférieure à 75 caractères
• [ ] La hiérarchie est claire (3 niveaux distinguables)
• [ ] Une échelle cohérente est utilisée partout

Couleur

• [ ] Tout le texte atteint 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 distribution 60-30-10 est respectée

Hiérarchie visuelle

• [ ] On peut identifier l’élément n°1 le plus important
• [ ] Le regard suit l’ordre prévu
• [ ] Un seul CTA clair par section
• [ ] L’échelle typographique est cohérente

Espacement

• [ ] Tout l’espacement utilise une échelle définie (pas de valeurs arbitraires)
• [ ] Les cartes/composants ont un padding cohérent
• [ ] L’espacement mobile est confortable
• [ ] L’alignement sur la grille est cohérent (base de 8px)

Interaction

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

Interfaces IA

• [ ] Chaque affirmation factuelle a une source traçable
• [ ] Le streaming montre les phases du processus, pas simplement un indicateur de chargement
• [ ] Les états d’erreur sont transparents, pas masqués
• [ ] Les résultats à faible confiance sont visuellement différenciés

Vérification Dieter Rams

• [ ] Peut-on retirer quelque chose ?
• [ ] Chaque élément remplit-il une fonction ?
• [ ] Ce design paraîtra-t-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

Systèmes de design : - Apple HIG - Material Design 3 - Radix UI - shadcn/ui

Études de design

Analyses approfondies de 16 produits exceptionnels, documentant les patterns et principes qui méritent d’être adoptés.

Outils pour développeurs

iOS natif (lauréats des Apple Design Awards)

Productivité et IA

Ce guide s’enrichit par la pratique. Les principes de design sont intemporels, mais leur application évolue avec la technologie et la compréhension.