Principes de design pour les ingénieurs 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. 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

La couleur communique plus vite que les mots. Elle établit une atmosphère, guide l’attention, véhicule du sens et construit la reconnaissance de marque.

La règle 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 nécessite 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

Conception « dark mode first » (Vercel)

Vercel conçoit d’abord en mode sombre, puis en dérive le mode clair. Cette approche 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 de développement, applications multimédias, 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é

Les WCAG 2.2 sont devenues 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. Parmi les 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, l’utilisateur doit fournir 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, le léger s’efface

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

3. Couleur et contraste — Un contraste élevé capte l’attention

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

4. La position — Certaines positions clés comptent davantage

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

5. L’espace blanc — 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 en relief attirent 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) : De multiples curseurs utilisateurs avec étiquettes de nom, surlignages de sélection et contours de composants créent un document vivant. La couleur de chaque collaborateur est distincte mais d’importance égale — aucun curseur n’est plus « bruyant » 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 de couleur en haut de page communique l’état (en cours de build, 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 devant votre design. Distinguez-vous encore 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 constitue la structure invisible du design. Un espacement cohérent crée un rythme visuel — cette impression que les éléments s’inscrivent ensemble dans un système harmonieux.

La grille de 8 px

La grille de 8 px est le standard de l’industrie, car elle : - Se divise de manière régulière (8, 16, 24, 32, 40, 48…) - Fonctionne avec les densités d’écran courantes (1x, 1,5x, 2x, 3x) - 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 et 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 grand 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 */
}

Patrons 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 des espacements

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.

Modèles d’interfaces IA

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

Les interfaces IA posent des défis uniques : les utilisateurs ne peuvent ni prédire les résultats, ni vérifier leur exactitude par simple inspection, ni même déterminer si le système fonctionne correctement ou dysfonctionne.

Le problème fondamental

Conception axé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-pattern : 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 simplement 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 face aux erreurs

Quand l’IA échoue ou manque d’assurance, affichez-le clairement — ne masquez pas l’incertitude derrière un texte au ton assuré.

Point clé : Les utilisateurs pardonnent une IA honnête sur ses incertitudes. Ils ne pardonnent pas une IA qui se trompe avec assurance.

Dieter Rams : 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. Le bon design est innovant Ne copiez pas. Associez l’avancée technologique à 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 L’utilisateur ne devrait pas avoir besoin d’un mode d’emploi. L’interface s’enseigne d’elle-même.

5. Le bon design est discret Le design doit accompagner, 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. Le bon design est honnête Pas de dark patterns. Pas de promesses excessives. Soyez transparent sur les limites.

7. Le bon design est durable Évitez les tendances qui vieilliront 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. Le bon design est rigoureux jusque dans le moindre détail Rien ne doit être arbitraire. États de chargement, états vides, états d’erreur — tout doit être conçu.

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

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

Tendances web 2026

Le web moderne tire parti des capacités natives de CSS qui éliminent le recours à JavaScript dans de nombreux cas. 2025-2026 a vu l’arrivée de l’anchor positioning, des animations pilotées par le scroll et de @starting-style dans les navigateurs en production.

Container Queries

Dimensionnez vos composants en fonction de leur conteneur, pas 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 du parent en fonction de ses enfants — impossible auparavant 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 native CSS

L’imbrication native sans préprocesseur.

.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>

Anchor Positioning

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

/* 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 scroll

Liez la progression de l’animation à la position du scroll. Indicateurs de progression de lecture, effets de parallaxe et séquences de révélation — le tout 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 — pour des animations d’entrée purement 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 garantir 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 — 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 davantage de contraste) - Concevez le mode sombre de manière intentionnelle, pas comme un ajout tardif

Workflows d’extraction depuis Figma

Transformer des fichiers de design en code de production exige une extraction systématique des design tokens — couleurs, typographie, espacements 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 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 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 passation designer-développeur

Ce que les designers doivent exporter :

Critères de validation qualité :

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

Le développeur reçoit :

1. Fichiers de tokens (JSON/CSS/Swift selon la plateforme)
2. Spécifications des composants avec mesures
3. Exports des ressources aux 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

Checklist de design

Avant de livrer une 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
• [ ] Le line-height est de 1.5 ou plus pour le corps de texte
• [ ] La longueur de ligne reste sous 75 caractères
• [ ] La hiérarchie est claire (3 niveaux distinguables)
• [ ] Une échelle cohérente est utilisée partout

Couleur

• [ ] Tous les textes respectent un contraste de 4.5:1 (WCAG AA)
• [ ] La couleur n’est jamais le seul indicateur (icônes/libellés en complément)
• [ ] Le mode sombre est conçu de manière intentionnelle
• [ ] La distribution 60-30-10 est respectée

Hiérarchie visuelle

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

Espacement

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

Interaction

• [ ] Les utilisateurs peuvent-ils atteindre leurs objectifs sans réfléchir à 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 affiche les phases du processus, pas un simple 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 à retenir.

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.