Frontend Design System
Philosophie: Jeder Pixel hat einen Zweck. Zurückhaltung ist Luxus. Benutzerpsychologie treibt Entscheidungen. Kernprinzip: DENKEN, nicht auswendig lernen. FRAGEN, nicht annehmen.
🎯 Selektive Lese-Regel (VERPFLICHTEND)
Immer PFLICHT-Dateien lesen, OPTIONALE nur bei Bedarf:
| Datei | Status | Wann lesen |
|---|---|---|
| ux-psychology.md | 🔴 PFLICHT | Immer zuerst lesen! |
| color-system.md | ⚪ Optional | Farb-/Palettenentscheidungen |
| typography-system.md | ⚪ Optional | Schriftauswahl/-kombination |
| visual-effects.md | ⚪ Optional | Glasphormismus, Schatten, Verläufe |
| animation-guide.md | ⚪ Optional | Animation benötigt |
| motion-graphics.md | ⚪ Optional | Lottie, GSAP, 3D |
| decision-trees.md | ⚪ Optional | Kontext-Vorlagen |
🔴 ux-psychology.md = IMMER LESEN. Andere nur, wenn relevant.
🔧 Laufzeit-Skripte
Diese für Audits ausführen (nicht lesen, einfach ausführen):
| Skript | Zweck | Verwendung |
|---|---|---|
ux_audit Validator | UX-Psychologie & Barrierefreiheits-Audit | call_tool_checklist |
⚠️ KRITISCH: VOR ANNAHMEN FRAGEN (VERPFLICHTEND)
STOPP! Wenn die Anfrage des Benutzers vage ist, verwende NICHT deine Standardeinstellungen.
Wenn die Benutzereingabe vage ist, FRAGE:
Farbe nicht angegeben? Frage:
„Welche Farbpalette bevorzugst du? (blau/grün/orange/neutral/andere?)“
Stil nicht angegeben? Frage:
„Welchen Stil möchtest du? (minimalistisch/gewagt/retro/zukunftsorientiert/organisch?)“
Layout nicht angegeben? Frage:
„Hast du eine Layout-Präferenz? (einsäulig/Raster/asymmetrisch/vollflächig?)“
⛔ ZU VERMEIDENDE STANDARDTENDENZEN (ANTI-SAFE-HARBOR):
| KI-Standardtendenz | Warum sie schlecht ist | Denke stattdessen |
|---|---|---|
| Bento-Grids (Modernes Klischee) | In jedem KI-Design verwendet | Warum braucht dieser Inhalt ein Raster? |
| Hero-Split (Links/Rechts) | Vorhersehbar & langweilig | Wie wäre es mit massiver Typografie oder vertikaler Erzählung? |
| Mesh/Aurora-Verläufe | Der „neue“ faule Hintergrund | Was ist eine radikale Farbkombination? |
| Glasphormismus | KIs Vorstellung von „Premium“ | Wie wäre es mit solide, kontrastreicher Fläche? |
| Tiefes Cyan / Fintech-Blau | Sicherer Hafen nach dem Lila-Verbot | Warum nicht Rot, Schwarz oder Neon-Grün? |
| „Orchestrieren / Befähigen“ | KI-generiertes Copywriting | Wie würde ein Mensch das sagen? |
| Dunkler Hintergrund + Neon-Glow | Übernutzt, „KI-Look“ | Was braucht die MARKE tatsächlich? |
| Alles abgerundet | Generisch/sicher | Wo kann ich scharfe, brutale Kanten verwenden? |
🔴 „Jede ‚sichere‘ Struktur, die du wählst, bringt dich einen Schritt näher an eine generische Vorlage. GEHE RISIKEN EIN.“
1. Einschränkungsanalyse (IMMER ZUERST)
Vor jeder Designarbeit, BEANTWORTE DIESE ODER FRAGE DEN BENUTZER:
| Einschränkung | Frage | Warum wichtig |
|---|---|---|
| Zeitplan | Wie viel Zeit? | Bestimmt die Komplexität |
| Inhalt | Bereit oder Platzhalter? | Beeinflusst Layout-Flexibilität |
| Marke | Bestehende Richtlinien? | Kann Farben/Schriften vorgeben |
| Technologie | Welcher Stack? | Beeinflusst Fähigkeiten |
| Zielgruppe | Wer genau? | Treibt alle visuellen Entscheidungen |
Zielgruppe → Designansatz
| Zielgruppe | Denke an |
|---|---|
| Gen Z | Gewagt, schnell, mobil-first, authentisch |
| Millennials | Sauber, minimalistisch, werteorientiert |
| Gen X | Vertraut, vertrauenswürdig, klar |
| Boomer | Lesbar, hoher Kontrast, einfach |
| B2B | Professionell, datenorientiert, vertrauenswürdig |
| Luxus | Zurückhaltende Eleganz, Weißraum |
2. UX-Psychologie-Prinzipien
Kerngesetze (Verinnerliche diese)
| Gesetz | Prinzip | Anwendung |
|---|---|---|
| Hick's Law | Mehr Auswahl = langsamere Entscheidungen | Optionen begrenzen, progressive Offenlegung nutzen |
| Fitts' Law | Größer + näher = einfacher zu klicken | CTAs angemessen dimensionieren |
| Miller's Law | ~7 Elemente im Arbeitsgedächtnis | Inhalt in Gruppen aufteilen |
| Von Restorff | Unterschiedlich = einprägsam | CTAs visuell abheben lassen |
| Serial Position | Erstes/Letztes wird am besten erinnert | Schlüsselinformationen am Anfang/Ende |
Ebenen des emotionalen Designs
VISZERAL (sofort) → Erster Eindruck: Farben, Bilder, Gesamtgefühl
VERHALTEN (Nutzung) → Nutzung: Geschwindigkeit, Feedback, Effizienz
REFLEKTIEREND (Erinnerung) → Danach: „Ich mag, was das über mich aussagt“
Vertrauensaufbau
- Sicherheitsindikatoren bei sensiblen Aktionen
- Soziale Beweise, wo relevant
- Klarer Kontakt-/Support-Zugang
- Konsistentes, professionelles Design
- Transparente Richtlinien
3. Layout-Prinzipien
Goldener Schnitt (φ = 1,618)
Für proportionale Harmonie verwenden:
├── Inhalt : Seitenleiste = ca. 62 % : 38 %
├── Jede Überschriftgröße = vorherige × 1,618 (für dramatischen Maßstab)
├── Abstände können folgen: sm → md → lg (jeweils × 1,618)
8-Punkt-Raster-Konzept
Alle Abstände und Größen in Vielfachen von 8:
├── Eng: 4px (Halbschritt für Mikro)
├── Klein: 8px
├── Mittel: 16px
├── Groß: 24px, 32px
├── XL: 48px, 64px, 80px
└── An Inhaltsdichte anpassen
Wichtige Größenprinzipien
| Element | Überlegung |
|---|---|
| Touch-Ziele | Minimale komfortable Antippgröße |
| Buttons | Höhe basierend auf Wichtigkeitshierarchie |
| Eingabefelder | Button-Höhe für Ausrichtung anpassen |
| Karten | Konsistente Abstände, luftig |
| Lesebreite | 45-75 Zeichen optimal |
4. Farbprinzipien
60-30-10-Regel
60 % → Primär/Hintergrund (ruhig, neutrale Basis)
30 % → Sekundär (unterstützende Bereiche)
10 % → Akzent (CTAs, Highlights, Aufmerksamkeit)
Farbpsychologie (Zur Entscheidungsfindung)
| Wenn du brauchst... | Ziehe in Betracht... | Vermeide |
|---|---|---|
| Vertrauen, Ruhe | Blau-Familie | Aggressive Rottöne |
| Wachstum, Natur | Grün-Familie | Industrielle Grautöne |
| Energie, Dringlichkeit | Orange, Rot | Passive Blautöne |
| Luxus, Kreativität | Tiefes Teal, Gold, Smaragd | Billig wirkende Knallfarben |
| Sauber, minimalistisch | Neutrale | Überwältigende Farben |
Auswahlprozess
- Welche Branche? (schränkt Optionen ein)
- Welche Emotion? (wählt Primärfarbe)
- Heller oder dunkler Modus? (legt Grundlage fest)
- FRAGE BENUTZER, falls nicht angegeben
Für detaillierte Farbtheorie: color-system.md
5. Typografie-Prinzipien
Skalenauswahl
| Inhaltstyp | Skalenverhältnis | Gefühl |
|---|---|---|
| Dichte UI | 1,125-1,2 | Kompakt, effizient |
| Allgemeines Web | 1,25 | Ausgewogen (am häufigsten) |
| Redaktionell | 1,333 | Lesbar, geräumig |
| Hero/Display | 1,5-1,618 | Dramatische Wirkung |
Kombinationskonzept
Kontrast + Harmonie:
├── UNTERSCHIEDLICH genug für Hierarchie
├── ÄHNLICH genug für Zusammenhalt
└── Üblich: Display + Neutral, oder Serif + Sans
Lesbarkeitsregeln
- Zeilenlänge: 45-75 Zeichen optimal
- Zeilenhöhe: 1,4-1,6 für Fließtext
- Kontrast: WCAG-Anforderungen prüfen
- Größe: 16px+ für Fließtext im Web
Für detaillierte Typografie: typography-system.md
6. Prinzipien für visuelle Effekte
Glasphormismus (wenn angemessen)
Wichtige Eigenschaften:
├── Halbtransparenter Hintergrund
├── Backdrop-Blur
├── Subtiler Rand für Abgrenzung
└── ⚠️ **WARNUNG:** Standard-Blau/Weiß-Glasphormismus ist ein modernes Klischee. Verwende ihn radikal oder gar nicht.
Schattenhierarchie
Höhenkonzept:
├── Höhere Elemente = größere Schatten
├── Y-Versatz > X-Versatz (Licht von oben)
├── Mehrere Ebenen = realistischer
└── Dunkler Modus: ggf. Glühen stattdessen
Verlauf verwenden
Harmonische Verläufe:
├── Benachbarte Farben im Farbkreis (analog)
├── ODER gleicher Farbton, unterschiedliche Helligkeit
├── Harte komplementäre Paare vermeiden
├── 🚫 **KEINE Mesh/Aurora-Verläufe** (schwebende Kleckse)
└── Von Projekt zu Projekt radikal variieren
Für vollständige Effektanleitung: visual-effects.md
7. Animationsprinzipien
Timing-Konzept
Dauer basierend auf:
├── Distanz (weiter = länger)
├── Größe (größer = langsamer)
├── Wichtigkeit (kritisch = klar)
└── Kontext (dringend = schnell, luxuriös = langsam)
Easing-Auswahl
| Aktion | Easing | Warum |
|---|---|---|
| Hereinkommen | Ease-out | Verlangsamen, einpendeln |
| Verlassen | Ease-in | Beschleunigen, verlassen |
| Betonung | Ease-in-out | Glatt, bewusst |
| Verspielt | Bounce | Spaß, energiegeladen |
Leistung
- Nur transform und opacity animieren
- „Reduzierte Bewegung“-Einstellung respektieren
- Auf Geräten mit niedriger Leistung testen
Für Animationsmuster: animation-guide.md, für Fortgeschrittene: motion-graphics.md
8. „Wow-Effekt“-Checkliste
Premium-Indikatoren
- Großzügiger Weißraum (Luxus = Atemraum)
- Subtile Tiefe und Dimension
- Sanfte, zielgerichtete Animationen
- Liebe zum Detail (Ausrichtung, Konsistenz)
- Kohäsiver visueller Rhythmus
- Benutzerdefinierte Elemente (nicht nur Standard)
Vertrauensbilder
- Sicherheitshinweise wo angebracht
- Soziale Beweise / Testimonials
- Klares Wertversprechen
- Professionelle Bilder
- Konsistente Designsprache
Emotionale Auslöser
- Hero, das die gewünschte Emotion hervorruft
- Menschliche Elemente (Gesichter, Geschichten)
- Fortschritts-/Erfolgsindikatoren
- Momente der Freude
9. Anti-Patterns (Was man NICHT tun sollte)
❌ Faule Design-Indikatoren
- Standard-Systemschriften ohne Überlegung
- Stock-Bilder, die nicht passen
- Inkonsistente Abstände
- Zu viele konkurrierende Farben
- Textwüsten ohne Hierarchie
- Unzugänglicher Kontrast
❌ KI-Tendenzmuster (VERMEIDEN!)
- Jedes Projekt die gleichen Farben
- Dunkel + Neon als Standard
- Lila/Violett überall (LILA-VERBOT ✅)
- Bento-Grids für einfache Landingpages
- Mesh-Verläufe & Glow-Effekte
- Gleiche Layout-Struktur / Vercel-Klon
- Benutzerpräferenzen nicht erfragen
❌ Dark Patterns (Unethisch)
- Versteckte Kosten
- Vorgetäuschte Dringlichkeit
- Erzwungene Aktionen
- Täuschende UI
- „Confirmshaming“
10. Entscheidungsprozess-Zusammenfassung
Für JEDE Designaufgabe:
1. EINSCHRÄNKUNGEN
└── Was sind Zeitplan, Marke, Technologie, Zielgruppe?
└── Wenn unklar → FRAGEN
2. INHALT
└── Welcher Inhalt existiert?
└── Was ist die Hierarchie?
3. STILRICHTUNG
└── Was ist für den Kontext angemessen?
└── Wenn unklar → FRAGEN (nicht standardmäßig vorgehen!)
4. UMSETZUNG
└── Prinzipien von oben anwenden
└── Gegen Anti-Patterns prüfen
5. ÜBERPRÜFUNG
└── „Dient dies dem Benutzer?“
└── „Unterscheidet sich dies von meinen Standardeinstellungen?“
└── „Würde ich stolz darauf sein?“
Referenzdateien
Für tiefere Anleitung zu bestimmten Bereichen:
- color-system.md – Farbtheorie und Auswahlprozess
- typography-system.md – Schriftkombination und Skalenentscheidungen
- visual-effects.md – Effektprinzipien und -techniken
- animation-guide.md – Bewegungsdesign-Prinzipien
- motion-graphics.md – Fortgeschritten: Lottie, GSAP, SVG, 3D, Partikel
- decision-trees.md – Kontextspezifische Vorlagen
- ux-psychology.md – Tiefergehende Benutzerpsychologie
Verwandte Skills
| Skill | Wann verwenden |
|---|---|
| frontend-design (dieses) | Vor dem Codieren – Designprinzipien lernen (Farbe, Typografie, UX-Psychologie) |
| web-design-guidelines | Nach dem Codieren – Prüfung auf Barrierefreiheit, Leistung und Best Practices |
Workflow nach dem Design
Nachdem du dein Design umgesetzt hast, führe den Audit durch:
1. DESIGN → frontend-design-Prinzipien lesen ← DU BIST HIER
2. CODE → Design implementieren
3. AUDIT → web-design-guidelines-Überprüfung durchführen
4. FIX → Ergebnisse aus dem Audit beheben
Nächster Schritt: Verwende nach dem Codieren das Skill
web-design-guidelines, um deine Implementierung auf Barrierefreiheit, Fokus-Zustände, Animationen und Leistungsprobleme zu prüfen.
Denke dran: Design ist DENKEN, nicht Kopieren. Jedes Projekt verdient frische Überlegungen basierend auf seinem einzigartigen Kontext und seinen Benutzern. Vermeide den modernen SaaS-Safe-Harbor!