Web-Design-Muster
CSS-Implementierungsmuster für produktionsreife Oberflächen. Für Design-Grundlagen und Entscheidungsfindung siehe ui-design. Diese Skill konzentriert sich auf Code.
Siehe auch:
ui-designfür Typografie-/Farb-/Abstandstheorie,frontend-designfür kreative Ästhetik.
Installation
OpenClaw / Moltbot / Clawbot
npx clawhub@latest install web-design
Layout-Prinzipien
Verwenden Sie CSS Grid für zweidimensionale Layouts und Flexbox für eindimensionalen Fluss. Wählen Sie das richtige Werkzeug für den jeweiligen Kontext.
| Layout-Bedarf | Werkzeug | Warum |
|---|---|---|
| Seitenstruktur | CSS Grid (grid-template-areas) | Benannte Bereiche, explizite Zeilen-/Spaltenkontrolle |
| Navigationsleisten | Flexbox | Eindimensionale Ausrichtung, Abstand mit gap |
| Kartenraster | Grid (auto-fill / auto-fit) | Responsiv ohne Media-Queries |
| Zentrierung | Grid (place-items: center) | Kürzeste, zuverlässigste Zentrierung |
| Seitenleiste + Inhalt | Grid (grid-template-columns: 250px 1fr) | Proportionale Größenanpassung mit fester Seitenleiste |
| Überlappungen stapeln | Grid + grid-area: 1/1 | Elemente übereinander schichten ohne position: absolute |
Räumliche Komposition
Gehen Sie über vorhersehbare Layouts hinaus. Gezielte Asymmetrie, überlappende Elemente und das Raster durchbrechende Akzente schaffen visuelles Interesse. Verwenden Sie Raster-Stapelung (grid-area: 1/1) anstelle von position: absolute für überlappende Elemente. Wählen Sie großzügigen Negativraum für Luxus-/Editorial-Ästhetik oder kontrollierte Dichte für datenreiche Oberflächen – die Wahl muss bewusst getroffen werden.
Typografie
Typografie trägt 90 % der Persönlichkeit eines Designs. Wählen Sie Schriftarten, die zum Zweck der Oberfläche passen.
| Kontext | Ausrichtung Display-Schrift | Ausrichtung Körper-Schrift | Beispiel-Paarung |
|---|---|---|---|
| Redaktionell / Magazin | Serife mit hohem Kontrast | Neutrale humanistische Serifenlose | Playfair Display + Source Sans 3 |
| SaaS-Dashboard | Geometrische Serifenlose | Passende Serifenlose derselben Stärke | DM Sans + DM Mono (Daten) |
| Kreativ-Portfolio | Ausdrucksstarke Display-Schrift | Saubere, lesbare Serifenlose | Syne + Outfit |
| E-Commerce-Luxus | Dünne, moderne Serife | Elegante Serifenlose | Cormorant Garamond + Jost |
| Entwickler-Tools | Monospace-Display-Schrift | Monospace-Körper-Schrift | JetBrains Mono + IBM Plex Mono |
Schriftskala
Verwenden Sie ein konsistentes Verhältnis. Eine Skala von 1,25 (große Terz) funktioniert für die meisten Oberflächen: text-xs 0.64rem, text-sm 0.8rem, text-base 1rem, text-lg 1.25rem, text-xl 1.563rem, text-2xl 1.953rem, text-3xl 2.441rem, text-4xl 3.052rem. Setzen Sie Körpertext auf 1rem (mindestens 16px), Zeilenhöhe 1.5 für Körpertext, 1.1–1.2 für Überschriften. Begrenzen Sie die Zeilenlänge auf 60–75ch.
Farbe
Eine Palette erstellen
Jede Palette benötigt fünf funktionale Rollen:
| Rolle | Zweck | Beispielverwendung |
|---|---|---|
| Primär | Markenidentität, primäre Aktionen | Schaltflächen, Links, aktive Zustände |
| Neutral | Text, Rahmen, Hintergründe | Körpertext, Karten, Trennlinien |
| Akzent | Sekundäre Aktionen, Hervorhebungen | Tags, Abzeichen, sekundäre Schaltflächen |
| Erfolg / Warnung / Fehler | Semantisches Feedback | Toasts, Formularvalidierung, Status |
| Oberfläche | Geschichtete Hintergründe | Karten auf Seite, Modals auf Overlay |
Kontrast und Tiefe
Erzeugen Sie Tiefe durch Schichtung von Oberflächen, nicht nur durch Schatten:
:root {
--surface-0: hsl(220 15% 8%); /* Seitenhintergrund */
--surface-1: hsl(220 15% 12%); /* Karte */
--surface-2: hsl(220 15% 16%); /* Erhöhtes Element */
--surface-3: hsl(220 15% 20%); /* Popover / Modal */
}
Verwenden Sie HSL oder OKLCH für wahrnehmungsmäßig einheitliche Farbmanipulation. Dominante Farbe mit scharfen Akzenten ist besser als gleichmäßig verteilte Paletten. Überprüfen Sie immer den WCAG-Kontrast: 4,5:1 für normalen Text, 3:1 für großen Text.
Abstände
Konsistente Abstände erzeugen Rhythmus. Verwenden Sie eine 8px-Basiseinheit (oder 4px für dichte Oberflächen):
| Token | Wert | Verwendung |
|---|---|---|
--space-1 | 0,25rem (4px) | Inline-Symbolabstände, enge Innenabstände |
--space-2 | 0,5rem (8px) | Eingabe-Innenabstände, kompakte Listen |
--space-3 | 0,75rem (12px) | Schaltflächen-Innenabstände, Karten-Innenabstände |
--space-4 | 1rem (16px) | Standard-Elementabstand |
--space-6 | 1,5rem (24px) | Abschnitts-Innenabstände, Kartenabstände |
--space-8 | 2rem (32px) | Abschnittstrennung |
--space-12 | 3rem (48px) | Große Abschnittswechsel |
--space-16 | 4rem (64px) | Vertikaler Rhythmus auf Seitenebene |
Wenden Sie Abstände konsistent an: Verwenden Sie gap auf Grid-/Flexbox-Containern anstelle von Rändern auf Kindern. Dies vermeidet Randkollaps-Fehler und vereinfacht responsive Anpassungen.
Visuelle Hierarchie
Führen Sie das Auge durch bewusste Kontraste in Größe, Gewicht, Farbe und Raum.
Hierarchie-Techniken
| Technik | Wie | Wirkung |
|---|---|---|
| Größenkontrast | Hero-Überschrift 3–4x Körpergröße | Sofortiger Blickfang |
| Gewichtskontrast | Fette Überschriften + normaler Körpertext | Scanbarkeit |
| Farbkontrast | Primärer Text vs. gedämpfter sekundärer Text | Informationsschichtung |
| Räumliche Gruppierung | Enger Abstand innerhalb von Gruppen, weit zwischen Gruppen | Gestalt-Gesetz der Nähe |
| Erhöhung | Schatten / Oberflächenschichten | Interaktive Affordanz |
| Leerraum-Isolation | Leerer Raum um Schlüsselelement | Betonung durch Abwesenheit |
Praxis-Muster – Karten-Hierarchie
Schichten Sie Hierarchie innerhalb von Karten: Markierung (xs, Großbuchstaben, gedämpft) → Titel (xl, halbfett) → Körpertext (Basis, sekundäre Farbe, 1.6 Zeilenhöhe) → Aktion (mit margin-top beabstandet). Verwenden Sie Oberflächenfarbe zur Trennung und konsistente Innenabstände aus Abstands-Token.
Responsives Design
Breakpoint-Strategie
| Breakpoint | Ziel | Ansatz |
|---|---|---|
< 640px | Mobil | Einspaltig, gestapelte Navigation, Touch-Ziele ≥ 44px |
640–1024px | Tablet | Zweispaltige Optionen, einklappbare Seitenleisten |
1024–1440px | Desktop | Vollständiges Layout, Hover-Interaktionen aktiviert |
> 1440px | Breit | Max-Breite-Container (1280px), verhindert ultra-breite Zeilenlängen |
Fluide Techniken
Bevorzugen Sie fließende Größenanpassung gegenüber starren Breakpoints, wo möglich:
/* Fließende Typografie – skaliert zwischen 640px und 1440px Viewport */
h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
/* Fließende Abstände */
section { padding-block: clamp(2rem, 1rem + 4vw, 6rem); }
/* Intrinsisches Grid – keine Media-Queries nötig */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-6); }
Verwenden Sie Container-Queries (@container) für komponentenbezogene Reaktionsfähigkeit, wenn das Layout einer Komponente auf ihren Container und nicht auf den Viewport reagieren soll.
Barrierefreiheit
Barrierefreiheit ist optional. Bauen Sie sie von Anfang an ein.
| Anforderung | Implementierung | Standard |
|---|---|---|
| Farbkontrast | 4,5:1 normaler Text, 3:1 großer Text / UI | WCAG 2.1 AA |
| Tastaturnavigation | Alle interaktiven Elemente fokussierbar und bedienbar | WCAG 2.1.1 |
| Fokus-Indikatoren | Sichtbarer :focus-visible-Ring, 2px+ Versatz | WCAG 2.4.7 |
| Semantisches HTML | Verwenden Sie <button>, <nav>, <main>, <article> usw. | WCAG 1.3.1 |
| Alt-Text | Beschreibend für informative Bilder, alt="" für dekorative | WCAG 1.1.1 |
| Bewegungssicherheit | Respektieren Sie prefers-reduced-motion | WCAG 2.3.3 |
| Touch-Ziele | Mindestens 44×44px interaktive Bereiche | WCAG 2.5.8 |
| ARIA bei Bedarf | aria-label, aria-live, role nur, wenn native Semantik nicht ausreicht | WCAG 4.1.2 |
/* Robuster Fokus-Indikator */
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Bewegungseinstellungen respektieren */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
Komponenten-Design
Anatomie einer gut gestalteten Komponente
Jede UI-Komponente sollte klare Zustände, konsistente Abstände und vorhersehbares Verhalten haben:
| Zustand | Visuelle Behandlung | Beispiel |
|---|---|---|
| Standard | Basis-Stil | Schaltfläche im Ruhezustand |
| Hover | Subtile Verschiebung – Hintergrund, Schatten oder Skalierung | background wird 5-10 % heller |
| Aktiv / Gedrückt | Komprimiertes Gefühl – reduzierter Schatten, leichter Inset | transform: scale(0.98) |
| Fokus | Hochsichtbarer Ring, keine Unterbrechung der Umrisslinie | :focus-visible-Ring |
| Deaktiviert | Reduzierte Deckkraft, cursor: not-allowed | opacity: 0.5 |
| Laden | Spinner oder Skelett, deaktivierte Interaktion | Inline-Spinner ersetzt Beschriftung |
Design-Token-Architektur
Strukturieren Sie Token in drei Schichten für Wartbarkeit:
/* Schicht 1: Primitive Werte */
--blue-500: oklch(0.55 0.2 250);
--gray-100: oklch(0.95 0.005 250);
--radius-md: 0.5rem;
/* Schicht 2: Semantische Aliase */
--color-primary: var(--blue-500);
--color-surface: var(--gray-100);
--radius-button: var(--radius-md);
/* Schicht 3: Komponentenspezifisch */
--btn-bg: var(--color-primary);
--btn-radius: var(--radius-button);
--btn-padding: var(--space-2) var(--space-4);
Dieser dreischichtige Ansatz ermöglicht Themenwechsel durch Neuzuordnung von Schicht 2, ohne Komponenten zu berühren.
Interaktionsmuster
Bewegung und Animation
Verwenden Sie Bewegung, um Zustandsänderungen zu kommunizieren, nicht um zu dekorieren. Konzentrieren Sie sich auf Momente mit hoher Wirkung:
| Interaktion | Dauer | Beschleunigung | Zweck |
|---|---|---|---|
| Schaltflächen-Hover | 150ms | ease-out | Interaktion bestätigen |
| Modal öffnen | 250ms | ease-out | Aufmerksamkeit erregen |
| Modal schließen | 200ms | ease-in | Schnelles Schließen |
| Seitenübergang | 300ms | ease-in-out | Räumlichen Kontext bewahren |
| Gestaffelte Einblendung | 50–80ms Verzögerung pro Element | ease-out | Sequenzielles Laden von Inhalten |
| Mikro-Feedback | 100ms | ease-out | Umschalter, Kontrollkästchen, Schalter |
/* Gestaffelte Eintrittsanimation */
.stagger-item {
opacity: 0;
translate: 0 1rem;
animation: reveal 0.5s ease-out forwards;
}
.stagger-item:nth-child(1) { animation-delay: 0ms; }
.stagger-item:nth-child(2) { animation-delay: 60ms; }
.stagger-item:nth-child(3) { animation-delay: 120ms; }
@keyframes reveal {
to { opacity: 1; translate: 0 0; }
}
Scrollgesteuerte Effekte
Verwenden Sie natives animation-timeline: scroll() (hinter @supports) für Parallax- und Einblendungseffekte ohne JavaScript. Wickeln Sie es in eine Feature-Erkennung ein, um einen anmutigen Abbau zu gewährleisten.
Design-Qualitäts-Checkliste
Überprüfen Sie vor der Veröffentlichung die folgenden Kriterien:
- Typografie: Gezielte Schriftarten-Paarung, konsistente Skala, lesbare Zeilenlängen
- Farbe: Kohärente Palette, WCAG-Kontrast erfüllt, semantische Feedback-Farben definiert
- Abstände: Konsistenter Rhythmus unter Verwendung von Abstands-Token, keine Ad-hoc-Pixelwerte
- Hierarchie: Klarer visueller Fluss – der Augenweg folgt der beabsichtigten Lesereihenfolge
- Reaktionsfähigkeit: Getestet auf Mobil, Tablet, Desktop; kein horizontaler Überlauf
- Barrierefreiheit: Tastaturnavigierbar, Fokus sichtbar, Bildschirmleseprogramm getestet, bewegungssicher
- Zustände: Alle interaktiven Elemente haben Hover-, Aktiv-, Fokus-, Deaktiviert- und Ladezustände
- Persönlichkeit: Design hat einen klaren Standpunkt – kein generischer Vorlagenstil
- Leistung: Bilder optimiert, Schriftarten subsetiert, Animationen GPU-beschleunigt (
transform,opacity) - Dunkler Modus: Wenn unterstützt, verwenden Oberflächen geschichtete Helligkeit, keine invertierten Farben