Was macht Frontend Design System?
Philosophie: Jedes Pixel hat einen Zweck. Zurückhaltung ist Luxus. Die Nutzerpsychologie treibt Entscheidungen. Kernprinzip: DENKE, nicht auswendig lernen. FRAGE, nicht annehmen.
🎯 Selektive Leseregel (PFLICHT)
Lese PFLICHT-Dateien immer, 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 | Glassmorphism, Schatten, Verläufe |
| animation-guide.md | ⚪ Optional | Animation nötig |
| motion-graphics.md | ⚪ Optional | Lottie, GSAP, 3D |
| decision-trees.md | ⚪ Optional | Kontextvorlagen |
🔴 ux-psychology.md = IMMER LESEN. Andere nur, wenn relevant.
🔧 Laufzeit-Skripte
Führe diese für Audits aus (nicht lesen, einfach ausführen):
| Skript | Zweck | Verwendung |
|---|---|---|
scripts/ux_audit.py | UX-Psychologie- & Barrierefreiheits-Audit | python scripts/ux_audit.py <project_path> |
⚠️ WICHTIG: FRAGE, BEVOR DU ANN IMMST (PFLICHT)
STOPP! Wenn die Anfrage des Benutzers offen ist, verwende NICHT deine Standardvorlieben.
Wenn die Benutzeraufforderung vage ist, FRAGE:
Farbe nicht angegeben? Frage:
"Welche Farbpalette bevorzugst du? (blau/grün/orange/neutral/andere?)"
Stil nicht angegeben? Frage:
"Welchen Stil strebst du an? (minimalistisch/kühn/retro/zukunftsorientiert/organisch?)"
Layout nicht angegeben? Frage:
"Hast du eine Layout-Präferenz? (einspaltig/Raster/asymmetrisch/vollbreit?)"
⛔ STANDARDTENDENZEN, DIE VERMIEDEN WERDEN SOLLTEN (ANTI-SICHERER HAFEN):
| KI-Standardtendenz | Warum sie schlecht ist | Denke stattdessen |
|---|---|---|
| Bento-Grids (moderne Klischees) | 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? |
| Glassmorphism | KIs Vorstellung von „Premium“ | Wie wäre es mit solider, kontrastreicher Fläche? |
| Tiefes Cyan / Fintech-Blau | Sicherer Hafen nach dem Purpur-Verbot | Warum nicht Rot, Schwarz oder Neon-Grün? |
| „Orchestrieren / Befähigen“ | KI-generierter Text | Wie würde ein Mensch das sagen? |
| Dunkler Hintergrund + Neon-Glow | Überstrapaziert, „KI-Look“ | Was braucht die MARKE eigentlich? |
| Alles abgerundet | Generisch/Sicher | Wo kann ich scharfe, brutalistische Kanten verwenden? |
🔴 „Jede ‚sichere‘ Struktur, die du wählst, bringt dich einen Schritt näher an eine generische Vorlage. GEHE RISIKEN EIN.“
1. Constraints-Analyse (IMMER ZUERST)
Beantworte diese FRAGEN oder frage den BENUTZER vor jeder Designarbeit:
| Einschränkung | Frage | Warum wichtig |
|---|---|---|
| Zeitplan | Wie viel Zeit? | Bestimmt die Komplexität |
| Inhalt | Fertig oder Platzhalter? | Beeinflusst Layout-Flexibilität |
| Marke | Existierende 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 | Kühn, schnell, mobile-first, authentisch |
| Millennials | Sauber, minimalistisch, wertebasiert |
| Gen X | Vertraut, vertrauenswürdig, klar |
| Boomer | Lesbar, hoher Kontrast, einfach |
| B2B | Professionell, datenfokussiert, vertrauenswürdig |
| Luxus | Zurückhaltende Eleganz, Weißraum |
2. UX-Psychologie-Prinzipien
Kern-Gesetze (Verinnerliche diese)
| Gesetz | Prinzip | Anwendung |
|---|---|---|
| Hick's Gesetz | Mehr Auswahl = langsamere Entscheidungen | Optionen begrenzen, progressive Offenlegung nutzen |
| Fitts' Gesetz | Größer + näher = einfacher zu klicken | CTAs entsprechend dimensionieren |
| Miller's Gesetz | ~7 Elemente im Kurzzeitgedächtnis | Inhalt in Gruppen aufteilen |
| Von Restorff | Anders = einprägsam | CTAs visuell unterscheiden |
| Serieller Positionseffekt | Erstes/Letztes am besten erinnert | Schlüsselinformationen an Anfang/Ende |
Ebenen des Emotionalen Designs
VISCERAL (sofort) → Erster Eindruck: Farben, Bilder, Gesamtgefühl
VERHALTEN (Nutzung) → Bedienung: Geschwindigkeit, Feedback, Effizienz
REFLEXIV (Erinnerung) → Danach: „Ich mag, was das über mich aussagt“
Vertrauensaufbau
- Sicherheitsindikatoren bei sensiblen Aktionen
- Soziale Beweise, wo relevant
- Klarer Kontakt-/Supportzugang
- Konsistentes, professionelles Design
- Transparente Richtlinien
3. Layout-Prinzipien
Goldener Schnitt (φ = 1,618)
Verwende für proportionale Harmonie:
├── Inhalt : Seitenleiste = etwa 62 % : 38 %
├── Jede Überschriftgröße = vorherige × 1,618 (für dramatische Skalierung)
├── 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 (halber Schritt für Mikro)
├── Klein: 8px
├── Mittel: 16px
├── Groß: 24px, 32px
├── XL: 48px, 64px, 80px
└── Anpassung basierend auf Inhaltsdichte
Wichtige Größenprinzipien
| Element | Überlegung |
|---|---|
| Touch-Ziele | Minimale komfortable Tippgröße |
| Schaltflächen | Höhe basierend auf Wichtigkeitshierarchie |
| Eingabefelder | Höhe an Schaltflächen anpassen für Ausrichtung |
| Karten | Konsistente Polsterung, atmungsaktiv |
| Lesebreite | 45–75 Zeichen optimal |
4. Farb-Prinzipien
60-30-10-Regel
60 % → Primär/Hintergrund (ruhige, neutrale Basis)
30 % → Sekundär (unterstützende Bereiche)
10 % → Akzent (CTAs, Highlights, Aufmerksamkeit)
Farbpsychologie (für Entscheidungsfindung)
| Wenn du brauchst... | Ziehe in Betracht... | Vermeide |
|---|---|---|
| Vertrauen, Ruhe | Blaufamilie | Aggressive Rottöne |
| Wachstum, Natur | Grünfamilie | Industriegrau |
| Energie, Dringlichkeit | Orange, Rot | Passive Blautöne |
| Luxus, Kreativität | Tiefes Teal, Gold, Smaragd | Billig wirkende Buntfarben |
| Sauber, minimalistisch | Neutrale | Überwältigende Farben |
Auswahlprozess
- Was ist die Branche? (schränkt Optionen ein)
- Welche Emotion? (wählt Primärfarbe)
- Heller oder dunkler Modus? (legt Grundlage fest)
- FRAGE DEN BENUTZER, wenn nicht angegeben
Ausführliche 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:
├── VERSCHIEDEN genug für Hierarchie
├── ÄHNLICH genug für Zusammenhalt
└── Meist: Display + Neutral, oder Serife + 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
Ausführliche Typografie: typography-system.md
6. Visuelle Effekte – Prinzipien
Glassmorphism (wann angemessen)
Schlüsseleigenschaften:
├── Halbtransparenter Hintergrund
├── Backdrop-Blur
├── Dezente Kante für Definition
└── ⚠️ **WARNUNG:** Standard-Blau/Weiß-Glassmorphism ist ein modernes Klischee. Verwende es radikal oder gar nicht.
Schatten-Hierarchie
Höhenkonzept:
├── Höhere Elemente = größere Schatten
├── Y-Versatz > X-Versatz (Licht von oben)
├── Mehrere Ebenen = realistischer
└── Dunkler Modus: ggf. Glühen statt Schatten
Verlaufsnutzung
Harmonische Verläufe:
├── Benachbarte Farben im Rad (analog)
├── ODER gleicher Farbton, verschiedene Helligkeit
├── Vermeide harte komplementäre Paare
├── 🚫 **KEINE Mesh/Aurora-Verläufe** (schwebende Blobs)
└── VON Projekt zu Projekt radikal variieren
Komplette Effekt-Anleitung: visual-effects.md
7. Animationsprinzipien
Timing-Konzept
Dauer basierend auf:
├── Entfernung (weiter = länger)
├── Größe (größer = langsamer)
├── Wichtigkeit (kritisch = klar)
└── Kontext (dringend = schnell, luxuriös = langsam)
Easing-Auswahl
| Aktion | Easing | Warum |
|---|---|---|
| Eintreten | Ease-out | Verlangsamen, einpendeln |
| Verlassen | Ease-in | Beschleunigen, austreten |
| Betonung | Ease-in-out | Sanft, bewusst |
| Verspielt | Bounce | Spaß, energiegeladen |
Leistung
- Nur Transform und Opazität animieren
- Präferenz für reduzierte Bewegung respektieren
- Auf Geräten mit geringer Leistung testen
Animationsmuster: animation-guide.md, fortgeschritten: motion-graphics.md
8. „Wow-Faktor“-Checkliste
Premium-Indikatoren
- Großzügiger Weißraum (Luxus = Atemraum)
- Dezente Tiefe und Dimension
- Sanfte, zielgerichtete Animationen
- Liebe zum Detail (Ausrichtung, Konsistenz)
- Zusammenhängender visueller Rhythmus
- Maßgeschneiderte Elemente (nicht nur Standard)
Vertrauensbilder
- Sicherheitshinweise wo angebracht
- Soziale Beweise / Testimonials
- Klares Wertversprechen
- Professionelle Bilder
- Konsistente Designsprache
Emotionale Auslöser
- Hero, das die beabsichtigte Emotion hervorruft
- Menschliche Elemente (Gesichter, Geschichten)
- Fortschritts-/Leistungsindikatoren
- Momente der Freude
9. Anti-Patterns (Was NICHT zu tun ist)
❌ 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 für alles (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
- Bestätigungsbeschämung
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 annehmen!)
4. AUSFÜHRUNG
└── Prinzipien von oben anwenden
└── Gegen Anti-Patterns prüfen
5. ÜBERPRÜFUNG
└── „Dient dies dem Benutzer?“
└── „Unterscheidet sich dies von meinen Standardeinstellungen?“
└── „Wäre ich stolz darauf?“
Referenzdateien
Für tiefere Anleitung zu bestimmten Bereichen:
- color-system.md – Farbtheorie und Auswahlprozess
- typography-system.md – Schriftkombinationen und Skalenentscheidungen
- visual-effects.md – Prinzipien und Techniken für Effekte
- animation-guide.md – Bewegungsdesign-Prinzipien
- motion-graphics.md – Fortgeschritten: Lottie, GSAP, SVG, 3D, Partikel
- decision-trees.md – Kontextspezifische Vorlagen
- ux-psychology.md – Tiefergehende Nutzerpsychologie
Verwandte Skills
| Skill | Wann verwenden |
|---|---|
| frontend-design (dieses) | Vor dem Codieren – Designprinzipien erlernen (Farbe, Typografie, UX-Psychologie) |
| web-design-guidelines | Nach dem Codieren – Audit für Barrierefreiheit, Leistung und Best Practices |
Workflow nach dem Design
Nach der Umsetzung deines Designs führe das Audit aus:
1. DESIGN → frontend-design-Prinzipien lesen ← DU BIST HIER
2. CODE → Design implementieren
3. AUDIT → web-design-guidelines-Überprüfung ausfü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 daran: Design ist DENKEN, nicht Kopieren. Jedes Projekt verdient eine frische Betrachtung basierend auf seinem einzigartigen Kontext und seinen Nutzern. Vermeide den modernen SaaS-Sicheren-Hafen!