Designprinzipien für Softwareentwickler

Aktualisiert am 18. Mai 2026

Update vom 18. Mai 2026: Der Designstudien-Index wurde an den aktuellen Korpus aus 48 Studien angepasst, und die KI-Interface-Patterns wurden um Belege zu agentischen Workflows erweitert: Checkpoints, Freigabestatus, Quellenvertrauen und sichtbare Verifizierung.

Update vom Mai 2026: Eine Anmerkung zum Arbeitsentwurf von WCAG 3.0 vom März 2026 und zur Position des W3C wurde ergänzt, dass WCAG 2.2 und 3.0 nebeneinander bestehen werden. WCAG 2.2 bleibt der Standard, auf den aktuelle Barrierefreiheitsarbeit ausgerichtet sein sollte.

Update vom Februar 2026: Zwei neue Abschnitte wurden ergänzt: Interaktionsmuster (8 Paradigmen aus der Analyse von Framer, Flighty, Halide, Warp, Bear, Craft und Superhuman) und KI-Interface-Patterns (zitationsorientiertes Design, Streaming-Phasen, Fehlertransparenz von Perplexity). Web Patterns wurde für 2026 aktualisiert, mit Anchor Positioning, Scroll-driven Animations und @starting-style. Die Barrierefreiheit wurde aktualisiert, um die ISO-Standardisierung von WCAG 2.2 abzubilden. Siehe Designstudien für Deep Dives in 48 außergewöhnliche Produkte. Ich habe Jahre damit verbracht, Design zu studieren, während ich Software entwickelt habe: Ich habe Prinzipien von Legenden wie Dieter Rams aufgenommen und Benutzeroberflächen von Produkten wie Linear, Stripe und Raycast analysiert. Dieser Leitfaden bündelt dieses Verständnis in der umfassenden Referenz, die ich mir gewünscht hätte, als ich anfing, mich dafür zu interessieren, wie meine Software aussieht und sich anfühlt.

Design ist keine Dekoration. Es ist Kommunikation. Jeder Pixel vermittelt Funktion, Hierarchie und Bedeutung. Der Unterschied zwischen Software, die amateurhaft wirkt, und Software, die professionell wirkt, liegt darin, diese Prinzipien zu verstehen und konsequent anzuwenden.

Dieser Leitfaden setzt voraus, dass Sie bereits Code schreiben können. Er lehrt Sie, zu sehen: zu verstehen, warum manche Benutzeroberflächen mühelos wirken, während andere chaotisch wirken, und vor allem, wie Sie Erstere entwickeln.

Inhaltsverzeichnis

Teil 1: Grundlagen

1. Gestalt-Psychologie
2. Typografie
3. Farbtheorie
4. Visuelle Hierarchie
5. Abstände & Rhythmus
6. Animationsprinzipien

Teil 2: Interaktion & KI

1. Interaktionsmuster
2. KI-Schnittstellenmuster

Teil 3: Designphilosophie

1. Dieter Rams: Zehn Prinzipien

Teil 4: Umsetzung

1. Web-Patterns 2026
2. Design-Tokens-System
3. Dark Mode richtig umgesetzt
4. Figma-Extraktions-Workflows

Teil 5: Referenz

1. Kurzreferenztabellen
2. Design-Checkliste
3. Design-Studien

Gestalt-Psychologie

„Das Ganze ist etwas anderes als die Summe seiner Teile.” — Kurt Koffka

Die in den 1920er-Jahren in Deutschland entwickelte Gestalt-Psychologie erklärt, wie Menschen visuelle Informationen wahrnehmen. Das Gehirn sieht keine einzelnen Pixel – es ordnet Elemente zu bedeutungsvollen Mustern. Beherrschen Sie diese Prinzipien, um gezielt zu steuern, wie Benutzer Ihre Oberflächen wahrnehmen.

Nähe (Proximity)

Elemente, die nahe beieinander stehen, werden als Gruppe wahrgenommen.

Dies ist das wirkungsvollste Gestalt-Prinzip im UI-Design. Abstände kommunizieren Zusammengehörigkeit stärker als jede andere visuelle Eigenschaft.

FALSCH (gleiche Abstände = keine Gruppierung):
┌─────────────────┐
│ Label           │
│                 │
│ Input Field     │
│                 │
│ Label           │
│                 │
│ Input Field     │
└─────────────────┘

RICHTIG (ungleiche Abstände = klare Gruppen):
┌─────────────────┐
│ Label           │
│ Input Field     │ ← Eng (4px) - zusammengehörig
│                 │
│                 │ ← Weit (24px) - Gruppen trennen
│ Label           │
│ Input Field     │ ← Eng (4px) - zusammengehörig
└─────────────────┘

CSS-Umsetzung:

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

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

SwiftUI-Umsetzung:

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

Ähnlichkeit (Similarity)

Elemente mit gemeinsamen visuellen Merkmalen wirken zusammengehörig.

Wenn Elemente gleich aussehen, gehen Benutzer davon aus, dass sie auch gleich funktionieren. Genau deshalb verwenden Designsysteme einheitliche Button-Stile, Kartengestaltungen und Typografie.

Beispiel Navigation:
┌───────────────────────────────────┐
│ [Dashboard] [Projects] [Settings] │  ← Gleicher Stil = gleiche Funktion
│                                   │
│ ┌─────┐  ┌─────┐  ┌─────┐        │
│ │Card │  │Card │  │Card │         │  ← Gleicher Stil = gleicher Inhaltstyp
│ └─────┘  └─────┘  └─────┘        │
│                                   │
│ [+ New Project]                   │  ← Anderer Stil = andere Funktion
└───────────────────────────────────┘

Figur-Grund-Beziehung (Figure-Ground)

Inhalte müssen sich klar vom Hintergrund abheben.

Das Gehirn muss die „Figur” (den Fokuspunkt) vom „Grund” (dem Hintergrund) unterscheiden können. Schwache Figur-Grund-Beziehungen erzeugen visuelle Verwirrung.

Techniken: - Kontrast (helle Figur auf dunklem Grund oder umgekehrt) - Schatten (Figur über den Grund erheben) - Rahmen (Figurkanten abgrenzen) - Unschärfe (Hintergrund weichzeichnen, Figur scharf halten)

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

Gemeinsame Region (Common Region)

Elemente innerhalb einer Begrenzung werden als zusammengehörig wahrgenommen.

Das Einschließen von Elementen in einen visuellen Container (Karte, Box, umrandeter Bereich) signalisiert Zusammengehörigkeit.

Kontinuität (Continuity)

Das Auge folgt Pfaden, Linien und Kurven.

Nutzen Sie Ausrichtung und visuellen Fluss, um die Aufmerksamkeit durch Ihre Oberfläche zu lenken.

KONTINUITÄT DURCH AUSRICHTUNG:
┌────────────────────────────────┐
│ Logo    [Nav]  [Nav]  [Nav]   │  ← Auf horizontaler Achse ausgerichtet
├────────────────────────────────┤
│                                │
│ Headline                       │
│ ─────────────────────────────  │  ← Auge folgt der linken Kante
│ Paragraph text continues       │
│ along the same left edge       │
│                                │
│ [Primary Action]               │  ← Weiterhin an der linken Kante
└────────────────────────────────┘

Geschlossenheit (Closure)

Das Gehirn vervollständigt unvollständige Formen.

Benutzer benötigen nicht jedes einzelne Pixel – sie vervollständigen vertraute Formen gedanklich. Das ermöglicht minimalere, elegantere Designs.

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

Gestalt-Kurzreferenz

Typografie

„Typografie ist das Handwerk, der menschlichen Sprache eine dauerhafte visuelle Form zu verleihen.” — Robert Bringhurst

Typografie bildet das Fundament des Interface-Designs. Text vermittelt Funktionalität, Hierarchie und Markenidentität. Schlechte Typografie erschwert die Bedienung von Oberflächen; großartige Typografie hingegen ist unsichtbar – sie funktioniert einfach.

Schriftgrößenskala (Type Scale)

Eine konsistente Skala schafft visuelle Harmonie. Verwenden Sie ein mathematisches Verhältnis.

Die 1,25-Skala (empfohlen für 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 */
}

Zeilenhöhe (Line Height / Leading)

Die Zeilenhöhe beeinflusst die Lesbarkeit erheblich. Verschiedene Inhaltsarten erfordern unterschiedliche Zeilenabstände.

Zeilenlänge (Measure)

Eine optimale Zeilenlänge beugt Ermüdung der Augen vor und verbessert das Leseverständnis.

• Optimal: 45–75 Zeichen pro Zeile
• Zielwert: 50–65 Zeichen
• Absolutes Maximum: 85 Zeichen

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

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

Schriftauswahl

Systemschriften zuerst. Sie laden sofort, passen zur Plattform und sind für Bildschirme optimiert.

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

Verwenden Sie benutzerdefinierte Schriften für: - Markendifferenzierung (Marketing-Websites) - Redaktionelles oder publizistisches Erscheinungsbild - Gestalterische Absichten, die mit Systemschriften nicht umsetzbar sind

Schriftstärke für Hierarchie

Nutzen Sie Schriftstärke zur Hierarchiebildung – nicht nur Größe.

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

Typografie-Kurzreferenz

Farbtheorie

„Farbe ist eine Kraft, die die Seele unmittelbar beeinflusst.“ — Wassily Kandinsky

Farbe vermittelt schneller als Worte. Sie erzeugt Stimmung, lenkt Aufmerksamkeit, signalisiert Bedeutung und stärkt die Markenwiedererkennung.

Die 60-30-10-Regel

Die verlässlichste Farbverteilung für ausgewogene Benutzeroberflächen.

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

Eine Farbpalette erstellen

Jede Benutzeroberfläche braucht diese semantischen Farben:

: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%);
}

Farbpsychologie

/* 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%);
  }
}

Wann verwenden: Entwicklertools, Medien-Apps, Dashboards – Kontexte, in denen Benutzer lange am Stück arbeiten und der Dunkelmodus die Augenbelastung verringert.

Kontrast für Barrierefreiheit

WCAG 3.0 ist weiterhin ein Arbeitsentwurf. Die neueste Überarbeitung erschien im März 2026 und ersetzt WCAG 2.2 nicht; das W3C erklärt, dass beide Standards nebeneinander bestehen werden. Die Accessibility Guidelines Working Group plant, 2026 einen voraussichtlichen Zeitplan für WCAG 3 zu veröffentlichen, doch WCAG 2.2 bleibt der Standard, an dem Sie sich bei aktueller Arbeit orientieren sollten.

Tools: WebAIM Contrast Checker, Chrome DevTools color picker

Visuelle Hierarchie

„Design ist der stille Botschafter Ihrer Marke.” — Paul Rand

Visuelle Hierarchie steuert, was Benutzer zuerst, danach und anschließend wahrnehmen. Ohne klare Hierarchie müssen Benutzer arbeiten, um Informationen zu finden. Mit ihr fühlen sich Interfaces mühelos an.

Die sechs Werkzeuge der Hierarchie

1. Größe — Größere Elemente ziehen zuerst Aufmerksamkeit auf sich

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

2. Schriftstärke — Fett tritt hervor, leicht tritt zurück

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

3. Farbe & Kontrast — Hoher Kontrast = Aufmerksamkeit

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

4. Position — Schlüsselpositionen zählen

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

5. Weißraum — Isolation schafft Bedeutung

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

6. Tiefe & Elevation — Elemente, die nach vorn treten, verlangen Aufmerksamkeit Translation status: the provided German (de) markdown segment was translated inline only. I did not edit the listed guide files.

Locale verification: manually checked the returned segment for Sie form, preserved ````css :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); } ```` exactly once, preserved protected product/CSS terms, markdown structure, table-free line order, and the existing section break.

Remaining i18n gaps: no file-level verification was run, no locale build or rendered check was performed, and I did not inspect the listed files because the translation request explicitly said not to run tools or inspect files. The listed guide paths remain unverified in this session.

„Weißraum ist wie Luft: Er ist notwendig, damit Design atmen kann.” — Wojciech Zieliński

Abstände sind die unsichtbare Struktur von Design. Konsistente Abstände erzeugen visuellen Rhythmus: das Gefühl, dass Elemente in einem kohärenten System zusammengehören.

Das 8px-Raster

Das 8px-Raster ist der Branchenstandard, weil es: - Sich gleichmäßig unterteilen lässt (8, 16, 24, 32, 40, 48…) - Mit gängigen Display-Dichten funktioniert (1x, 1.5x, 2x, 3x) - Ohne Rechnen einen konsistenten Rhythmus erzeugt

: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 */
}

Innen- vs. Außenabstand

Innen (padding): Abstand innerhalb eines Elements Außen (margin): Abstand zwischen Elementen

Regel: Der Innenabstand sollte innerhalb zusammengehöriger Gruppen in der Regel größer sein als der Außenabstand.

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

Abstandsmuster für Komponenten

Karten:

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

Schaltflächen:

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

Formulare:

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

Kurzreferenz für Abstände

Animationsprinzipien

„Animation ist nicht die Kunst von Zeichnungen, die sich bewegen, sondern die Kunst von Bewegungen, die gezeichnet werden.” — Norman McLaren

Animation haucht Interfaces Leben ein. Gut umgesetzt lenkt sie die Aufmerksamkeit, kommuniziert Zustände und schafft eine emotionale Verbindung. Schlecht umgesetzt frustriert und lenkt sie ab.

Das Kernprinzip

Animation sollte sich unvermeidlich anfühlen, nicht dekorativ.

Gute Animation: 1. Kommuniziert etwas, das statisches Design nicht vermitteln kann 2. Reduziert die kognitive Last, indem sie Zusammenhänge sichtbar macht 3. Fühlt sich natürlich und erwartet an 4. Verschwindet aus dem bewussten Wahrnehmen

Schlechte Animation: 1. Existiert nur, weil „es cool aussieht” 2. Bremst den Benutzer aus 3. Lenkt die Aufmerksamkeit auf sich selbst 4. Erzeugt Unruhe oder Ungeduld

Zentrale Prinzipien für UI

1. Antizipation — Bereiten Sie Benutzer auf das Kommende vor.

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

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

2. Nachschwingen — Lassen Sie Bewegungen natürlich ausklingen, mit federartigem Einschwingen.

.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 — Nichts in der Natur bewegt sich mit konstanter Geschwindigkeit.

4. Inszenierung — Lenken Sie die Aufmerksamkeit auf das Wesentliche. Nur ein Element sollte sich gleichzeitig bewegen, es sei denn, die Bewegung ist als Gruppe choreografiert.

5. Zeitversetztes Erscheinen — Elemente sollten nacheinander erscheinen, nicht alle gleichzeitig.

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

Timing-Richtlinien

Performance: Die goldene Regel

Animieren Sie ausschließlich transform und opacity — diese werden GPU-beschleunigt und lösen kein Neuberechnen des Layouts aus.

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

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

Wann Sie NICHT animieren sollten

1. Der Benutzer hat prefers-reduced-motion aktiviert css @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

2. Die Animation vermittelt keine Information — überflüssige Spinner, hüpfende Elemente

3. Benutzer haben es eilig — Fehlerzustände, Formularvalidierung, Suchergebnisse
4. Animation würde wiederholte Aktionen verlangsamen — Tastaturkürzel sollten Animationen umgehen
5. Daten sind bereits geladen — Bear verwendet keinerlei Ladezustände, da Inhalte vorgeladen werden, wodurch sich die App sofort anfühlt. Wenn Sie vorladen können, verzichten Sie komplett auf Skeleton-Screens oder 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)
        }
    }
}

Animations-Kurzreferenz

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

Interaktionsmuster

„Das beste Interface ist kein Interface.” — Golden Krishna

Interaktionsmuster definieren, wie Benutzer Ihr Produkt bedienen, darin navigieren und es verstehen. Diese Muster wurden durch die Analyse von Produkten gewonnen, die herausragende Interaktionen umsetzen.

Direkte Manipulation (Framer)

Machen Sie abstrakte Konzepte greifbar. Framer verwandelt CSS-Breakpoints — abstrakte Zahlenwerte — in ziehbare Anfasser. Benutzer sehen in Echtzeit, wie sich Layouts anpassen.

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

Wann einsetzen: Bei jeder Einstellung, deren Ergebnis visuell ist — Ziehen zum Größenändern, Farbwähler, Zeitleisten-Scrubbing.

Kontextbezogene Interfaces (Flighty, Figma)

Zeigen Sie nur das an, was im jeweiligen Moment relevant ist. Flighty nutzt 15 verschiedene Zustände für die Flugverfolgung. Figmas Eigenschaftenpanel wandelt sich je nach Auswahl vollständig um.

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: Alle Bedienelemente anzeigen und die irrelevanten ausgrauen. Das erzeugt visuelles Rauschen.

Intelligente Aktivierung (Halide)

Werkzeuge sollten den Kontext erkennen und sich selbstständig aktivieren. Halides Fokuslupe erscheint beim Ziehen des Fokuspunkts und verschwindet beim Loslassen. Kein Umschaltknopf nötig.

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

Dualmodus-Design (Halide, Warp)

Moduswechsel sollten die Oberfläche transformieren, nicht nur Elemente ein- und ausblenden. Halides Auto- und Manuell-Modus sind vollständig unterschiedliche Interfaces. Warp verbindet CLI und GUI über vier Eingabemethoden (Tippen, Palette, KI, Maus), ohne Benutzer in ein einziges Paradigma zu zwängen.

Strukturierte Inhalte (Warp, Bear, Craft)

Verleihen Sie traditionell unstrukturierten Inhalten Struktur. Warp macht Terminal-Ausgaben zu eigenständigen Blöcken, die kopiert, geteilt oder erneut ausgeführt werden können. Bear ermöglicht es, Notizen direkt beim Schreiben zu ordnen (#tag/subtag). Bei Craft kann jeder Block zu einer eigenen Seite werden — Struktur entsteht durch Nutzung, nicht durch vorgegebene Hierarchie.

Progressives Training (Superhuman)

Bringen Sie Benutzern den schnellen Weg durch wiederholte Exposition bei. Superhuman zeigt in der Cmd+K-Palette stets Tastaturkürzel neben den Ergebnissen an. Jede Nutzung ist eine Mikro-Lektion.

/* 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: Tutorial-Dialoge, die Funktionen erklären. Erklärungen werden vergessen — Übung bleibt haften.

KI-Interface-Muster

„Die besten KI-Interfaces machen den Prozess der Maschine sichtbar und ihre Ausgabe überprüfbar.“

KI-Interfaces stehen vor besonderen Herausforderungen: Benutzer können die Ausgabe nicht vorhersagen, Genauigkeit nicht durch bloßes Hinsehen prüfen und oft nicht erkennen, ob das System arbeitet oder defekt ist.

Das Kernproblem

.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: KI-Oberflächen, die Behauptungen ohne nachverfolgbare Quellen erzeugen. Wenn das Modell dafür keine Quelle nennen kann, sollte die Oberfläche dies kennzeichnen.

Streaming-Phasenindikatoren (Perplexity)

Zeigen Sie Benutzern, was die KI gerade tut, nicht nur, dass sie arbeitet. Ersetzen Sie generische Spinner durch Phasenindikatoren: „Searching…” → „Reading 4 sources…” → „Writing answer…”

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

Fehlertransparenz

Wenn KI scheitert oder unsicher ist, zeigen Sie das klar. Verstecken Sie sich nicht hinter selbstsicher klingendem Text.

Nachweise für agentische Workflows

AI-Agenten brauchen Interface-Zustände, die Arbeit belegen, statt Aufwand nur zu beschreiben. Ein guter Workflow für Agenten macht Fortschritt über Checkpoints nachvollziehbar: Plan akzeptiert, Quellen gesammelt, Änderungen angewendet, Tests ausgeführt, Review ausstehend und Release blockiert oder bereit.

Dieter Rams: Zehn Prinzipien

„Weniger, aber besser.” — Dieter Rams

Dieter Rams ist der einflussreichste Industriedesigner des 20. Jahrhunderts. Als Designchef bei Braun von 1961 bis 1995 schuf er Produkte, die auch Jahrzehnte später zeitlos wirken. Seine Arbeit inspirierte direkt die Designsprache von Apple.

Die zehn Prinzipien guten Designs

1. Gutes Design ist innovativ Kopieren Sie nicht. Verbinden Sie fortschreitende Technologie mit innovativem Design.

2. Gutes Design macht ein Produkt nützlich Jedes Element muss einem Zweck dienen. Form folgt Funktion.

3. Gutes Design ist ästhetisch Schönheit ist nicht oberflächlich, sondern wesentlich. Produkte, die wir täglich nutzen, beeinflussen unser Wohlbefinden.

4. Gutes Design macht ein Produkt verständlich Benutzer sollten keine Anleitung benötigen. Die Oberfläche erklärt sich selbst.

5. Gutes Design ist unaufdringlich Design sollte unterstützen, nicht überwältigen. Die Inhalte der Benutzer stehen im Mittelpunkt, nicht Ihre 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. Gutes Design ist ehrlich Verwenden Sie keine Dark Patterns. Versprechen Sie nicht zu viel. Seien Sie transparent, was Einschränkungen angeht.

7. Gutes Design ist langlebig Vermeiden Sie Trends, die schnell veraltet wirken. Klassisch statt trendgetrieben.

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

8. Gutes Design ist konsequent bis ins letzte Detail Nichts darf beliebig sein. Ladezustände, Leerzustände, Fehlerzustände – alles gestaltet.

9. Gutes Design ist umweltfreundlich Performance ist ökologisch relevant. Respektieren Sie die Aufmerksamkeit der Benutzer. Effizienter Code.

10. Gutes Design ist so wenig Design wie möglich Entfernen Sie alles, was nicht notwendig ist. Das beste Design ist unsichtbar.

Web Patterns 2026

Modernes Webdesign nutzt native CSS-Funktionen, die in vielen Fällen JavaScript überflüssig machen. Die Jahre 2025 und 2026 brachten Anchor Positioning, scroll-driven animations und @starting-style in produktionsreife Browser.

Container Queries

Bestimmen Sie die Größe von Komponenten anhand ihres Containers, nicht anhand des Viewports.

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

Der :has()-Selektor

Auswahl von Elternelementen anhand ihrer Kindelemente – zuvor ohne JavaScript unmöglich.

/* 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);
}

CSS-Verschachtelung

Native Verschachtelung ohne Präprozessoren.

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

HTMX-Integration

Servergesteuerte Interaktivität ohne umfangreiche JavaScript-Frameworks.

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

Native CSS-Positionierung eines Elements relativ zu einem anderen – kein JavaScript erforderlich. Tooltips, Popovers und Dropdown-Menüs, die ihren Auslösern folgen.

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

Scroll-gesteuerte Animationen

Verknüpfen Sie den Animationsfortschritt mit der Scrollposition. Lesefortschrittsanzeigen, Parallax-Effekte und Reveal-Sequenzen ohne 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

Definieren Sie Anfangsstile für Elemente, die in das DOM eingefügt werden, und ermöglichen Sie so Enter-Animationen ausschließlich mit CSS, ohne JavaScript.

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

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

Design Tokens-System

Ein vollständiges Token-System für Konsistenz in Ihrer gesamten Anwendung.

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

Dunkelmodus richtig umgesetzt

Invertieren Sie nicht einfach alles, sondern gestalten Sie für dunkle Kontexte neu.

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

Prinzipien für den Dunkelmodus: - Reduzieren Sie die Sättigung auf großen Flächen - Erhöhen Sie die Helligkeit von Akzentfarben - Verstärken Sie Schatten (sie brauchen mehr Kontrast) - Gestalten Sie den Dunkelmodus bewusst und nicht als nachträgliche Ergänzung

Figma-Extraktionsworkflows

Die Umwandlung von Designdateien in Produktionscode erfordert eine systematische Extraktion von Design-Tokens: Farben, Typografie, Abstände und Effekte, die Ihre Designsprache definieren.

Figma Variables-Export

Die native Variables-Funktion von Figma bietet den saubersten Extraktionsweg:

Exportschritte: 1. Figma-Datei öffnen → Local Variables-Panel 2. Auf das Collection-Menü klicken → “Export to JSON” 3. Als figma-variables.json speichern

JSON Token-Struktur:

{
  "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" }
  }
}

Token-zu-CSS-Transformation

CSS Custom Properties:

: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 für den Dunkelmodus:

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

Token-zu-SwiftUI-Transformation

Color-Erweiterung:

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

Abstandskonstanten:

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)

Designer-Handoff-Checkliste

Was Designer exportieren sollten:

• [ ] Alle Farben sind als Variablen definiert (kein hartcodiertes Hex)
• [ ] Typografie verwendet definierte Textstile
• [ ] Abstände folgen dem Grid-System (8px-Basis)
• [ ] Dark-Mode-Varianten sind vorhanden
• [ ] Interaktive Zustände sind dokumentiert (hover, active, disabled)
• [ ] Responsive Breakpoints sind annotiert
• [ ] Anforderungen an die Barrierefreiheit sind vermerkt (Kontrastverhältnisse)

Developer erhalten:

1. Token-Dateien (JSON/CSS/Swift je nach Plattform)
2. Komponentenspezifikationen mit Maßen
3. Asset-Exporte in den erforderlichen Formaten
4. Interaktionsdokumentation (Zustände, Animationen)
5. Barrierefreiheitsannotationen

Schnellreferenztabellen

Gestalt-Prinzipien

Design-Checkliste

Prüfen Sie vor der Veröffentlichung jeder Oberfläche:

Gestalt

• [ ] Zusammengehörige Elemente stehen näher beieinander als nicht zusammengehörige (Nähe)
• [ ] Ähnliche Funktionen haben ähnliche Stile (Ähnlichkeit)
• [ ] Klare Trennung zwischen Vordergrund und Hintergrund (Figur-Grund)
• [ ] Der Blick fließt natürlich durch das Layout (Kontinuität)

Typografie

• [ ] Die Basisschriftgröße beträgt mindestens 16px
• [ ] Die Zeilenhöhe beträgt 1,5+ für Fließtext
• [ ] Die Zeilenlänge liegt unter 75 Zeichen
• [ ] Die Hierarchie ist klar (3 Ebenen unterscheidbar)
• [ ] Durchgehend wird eine konsistente Skala verwendet

Farbe

• [ ] Sämtlicher Text erreicht einen Kontrast von 4,5:1 (WCAG AA)
• [ ] Farbe ist nicht der einzige Indikator (auch Icons/Labels)
• [ ] Der dunkle Modus ist bewusst gestaltet
• [ ] Die 60-30-10-Verteilung wird eingehalten

Visuelle Hierarchie

• [ ] Das wichtigste Element (#1) ist erkennbar
• [ ] Der Blick folgt der vorgesehenen Reihenfolge
• [ ] Ein klarer CTA pro Abschnitt
• [ ] Die Schriftskala ist konsistent

Abstände

• [ ] Alle Abstände verwenden eine definierte Skala (keine magischen Zahlen)
• [ ] Karten/Komponenten haben konsistentes Padding
• [ ] Mobile Abstände sind angenehm
• [ ] Die Grid-Ausrichtung ist konsistent (8px-Basis)

Interaktion

• [ ] Können Benutzer Ziele erreichen, ohne über das Tool nachdenken zu müssen?
• [ ] Passt sich die UI an den aktuellen Kontext an?
• [ ] Sind Tools nur dann sichtbar, wenn sie relevant sind?
• [ ] Vermittelt die wiederholte Nutzung schnellere Methoden?

KI-Schnittstellen

• [ ] Jede Tatsachenbehauptung hat eine nachvollziehbare Quelle
• [ ] Streaming zeigt Prozessphasen, nicht nur einen Spinner
• [ ] Fehlerzustände sind transparent, nicht verborgen
• [ ] Ausgaben mit geringer Sicherheit sind visuell unterscheidbar

Dieter-Rams-Prüfung

• [ ] Kann etwas entfernt werden?
• [ ] Erfüllt jedes Element eine Funktion?
• [ ] Würde sich das in 5 Jahren veraltet anfühlen?
• [ ] Habe ich jeden Zustand gestaltet?

Ressourcen

Bücher: - As Little Design as Possible von Sophie Lovell (Dieter Rams) - The Elements of Typographic Style von Robert Bringhurst

Tools: - WebAIM Contrast Checker - Type Scale Generator - Figma Tokens Studio — Verwaltung von Design Tokens

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

Designstudien

Tiefgehende Analysen von 48 außergewöhnlichen Produkten, die Muster und Prinzipien dokumentieren, deren Übernahme sich lohnt.

Entwicklerwerkzeuge & KI

Dieser Leitfaden wächst durch Praxis. Designprinzipien sind zeitlos, aber ihre Anwendung entwickelt sich mit Technologie und Verständnis weiter.