Frontend-Design-System
Philosophie: Jedes Pixel hat einen Zweck. Zurückhaltung ist Luxus. Die Psychologie des Nutzers treibt Entscheidungen. Kernprinzip: DENKEN, nicht auswendig lernen. FRAGEN, nicht annehmen.
🎯 Selektive Leseregel (VERPFLICHTEND)
Lese VERPFLICHTENDE Dateien immer, OPTIONALE nur, wenn nötig:
| Datei | Status | Wann lesen |
|---|---|---|
| ux-psychology.md | 🔴 VERPFLICHTEND | Immer zuerst lesen! |
| color-system.md | ⚪ Optional | Farb-/Palettenentscheidungen |
| typography-system.md | ⚪ Optional | Schriftauswahl/Kombination |
| visual-effects.md | ⚪ Optional | Glas, Schatten, Verläufe |
| animation-guide.md | ⚪ Optional | Animation erforderlich |
| 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 <projektpfad> |
⚠️ WICHTIG: FRAGEN, BEVOR MAN ANNIMT (VERPFLICHTEND)
STOP! Wenn die Anfrage des Benutzers offen ist, greife NICHT auf deine Favoriten zurück.
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 verfolgst du? (minimal/bold/retro/futuristisch/organisch?)“
Layout nicht angegeben? Frage:
„Hast du eine Layout-Präferenz? (einsäulig/Raster/asymmetrisch/vollbreit?)“
⛔ STANDARDTENDENZEN, DIE VERMIEDEN WERDEN SOLLTEN (ANTI-SAFE-HARBOR):
| KI-Standardtendenz | Warum schlecht | Stattdessen denken |
|---|---|---|
| Bento-Grids (Modernes Klischee) | Wird 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 | Welche radikale Farbkombination? |
| Glasmorphismus | KIs Vorstellung von „Premium“ | Wie wäre es mit solide, kontrastreich, flach? |
| Tiefes Cyan / Fintech-Blau | Sicherer Hafen nach dem Lila-Verbot | Warum nicht Rot, Schwarz oder Neon-Grün? |
| „Orchestrieren / Befähigen“ | KI-generierte Werbetexte | Wie würde ein Mensch das sagen? |
| Dunkler Hintergrund + Neon-Glühen | Überstrapaziert, „KI-Look“ | Was braucht die MARKE wirklich? |
| 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. Einschränkungsanalyse (IMMER ZUERST)
Vor jeder Designarbeit: BEANTWORTE DIESE FRAGEN ODER FRAGE DEN BENUTZER:
| Einschränkung | Frage | Warum wichtig |
|---|---|---|
| Zeitplan | Wie viel Zeit? | Bestimmt die Komplexität |
| Inhalt | Fertig oder Platzhalter? | Beeinflusst Layout-Flexibilität |
| Marke | Bestehende Richtlinien? | Kann Farben/Schriften vorgeben |
| Technik | Welcher Stack? | Beeinflusst die Fähigkeiten |
| Zielgruppe | Wer genau? | Bestimmt alle visuellen Entscheidungen |
Zielgruppe → Designansatz
| Zielgruppe | Denken an |
|---|---|
| Gen Z | Mutig, schnell, mobil-erst, authentisch |
| Millennials | Sauber, minimalistisch, werteorientiert |
| Gen X | Vertraut, vertrauenswürdig, klar |
| Boomer | Lesbar, hoher Kontrast, einfach |
| B2B | Professionell, datenfokussiert, Vertrauen |
| Luxus | Zurückhaltende Eleganz, Weißraum |
2. UX-Psychologie-Prinzipien
Kern-Gesetze (Verinnerliche diese)
| Gesetz | Prinzip | Anwendung |
|---|---|---|
| Hicks Gesetz | Mehr Auswahl = langsamere Entscheidungen | Optionen begrenzen, progressive Offenlegung nutzen |
| Fitts Gesetz | Größer + näher = leichter zu klicken | CTAs entsprechend dimensionieren |
| Millers Gesetz | ~7 Elemente im Arbeitsgedächtnis | Inhalt in Gruppen aufteilen |
| Von Restorff | Anders = einprägsam | CTAs visuell unterscheidbar machen |
| Serielle Position | Erstes/Letztes wird am besten erinnert | Schlüsselinformationen an Anfang/Ende |
Ebenen des emotionalen Designs
VISZERAL (sofortig) → Erster Eindruck: Farben, Bilder, Gesamtgefühl
VERHALTEN (Nutzung) → Bei der Nutzung: Geschwindigkeit, Feedback, Effizienz
REFLEXIV (Erinnerung) → Danach: „Ich mag, was das über mich aussagt“
Vertrauensaufbau
- Sicherheitsindikatoren bei sensiblen Aktionen
- Social Proof, 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 = 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 (Halbschritt für Mikro)
├── Klein: 8px
├── Mittel: 16px
├── Groß: 24px, 32px
├── XL: 48px, 64px, 80px
└── An Inhaltdichte anpassen
Wichtige Größenprinzipien
| Element | Überlegung |
|---|---|
| Touch-Ziele | Minimale komfortable Größe |
| Buttons | Höhe basierend auf Wichtigkeit |
| Eingabefelder | Höhe an Buttons anpassen für Ausrichtung |
| Karten | Konsistenter Abstand, 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 (für Entscheidungsfindung)
| Falls benötigst... | Erwäge Farbtöne | 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 kräftige Töne |
| Sauber, minimalistisch | Neutrale Töne | Ü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, wenn 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
└── Normalerweise: 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. Visuelle Effekte Prinzipien
Glasmorphismus (wenn angemessen)
Wichtige Eigenschaften:
├── Halbtransparenter Hintergrund
├── Backdrop-Blur
├── Subtile Grenze für Definition
└── ⚠️ **WARNUNG:** Standardmäßiger blau/weißer Glasmorphismus ist ein modernes Klischee. Nutze ihn 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: stattdessen Leuchten erwägen
Verlauf-Verwendung
Harmonische Verläufe:
├── Benachbarte Farben im Farbkreis (analog)
├── ODER gleicher Farbton, unterschiedliche Helligkeit
├── Harsche komplementäre Paare vermeiden
├── 🚫 **KEINE Mesh/Aurora-Verläufe** (schwebende Blobs)
└── Von Projekt zu Projekt radikal variieren
Für die vollständige Effektanleitung: 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 |
|---|---|---|
| Eintritt | Ease-out | Verlangsamen, einpendeln |
| Austritt | Ease-in | Beschleunigen, verlassen |
| Hervorhebung | Ease-in-out | Sanft, bedacht |
| Verspielt | Bounce | Spaß, energetisch |
Leistung
- Nur transform und opacity animieren
- reduced-motion-Einstellung respektieren
- Auf Geräten mit niedriger Leistung testen
Für Animationsmuster: animation-guide.md, für Fortgeschrittene: motion-graphics.md
8. „Wow-Faktor“-Checkliste
Premium-Indikatoren
- Großzügiger Weißraum (Luxus = Atemraum)
- Subtile Tiefe und Dimension
- Sanfte, zielgerichtete Animationen
- Liebe zum Detail (Ausrichtung, Konsistenz)
- Zusammenhängender visueller Rhythmus
- Benutzerdefinierte Elemente (nicht nur Standard)
Vertrauensbildner
- Sicherheitshinweise wo angebracht
- Social Proof / Testimonials
- Klares Wertversprechen
- Professionelle Bilder
- Konsistente Designsprache
Emotionale Auslöser
- Hero, der die beabsichtigte Emotion hervorruft
- Menschliche Elemente (Gesichter, Geschichten)
- Fortschritts-/Erfolgsanzeigen
- 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 dieselben Farben
- Dunkel + Neon als Standard
- Alles Lila/Violett (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
- Irreführende UI
- Bestätigungsbeschämung
10. Entscheidungsprozess-Zusammenfassung
Für JEDE Designaufgabe:
1. EINSCHRÄNKUNGEN
└── Was sind Zeitplan, Marke, Technik, Zielgruppe?
└── Falls unklar → FRAGEN
2. INHALT
└── Welcher Inhalt existiert?
└── Was ist die Hierarchie?
3. STILRICHTUNG
└── Was ist für den Kontext angemessen?
└── Falls unklar → FRAGEN (nicht voreingestellt!)
4. UMSETZUNG
└── Prinzipien von oben anwenden
└── Gegen Anti-Patterns prüfen
5. ÜBERPRÜFUNG
└── „Dient dies dem Benutzer?“
└── „Unterscheidet sich das von meinen Standardeinstellungen?“
└── „Würde ich stolz darauf sein?“
Referenzdateien
Für tiefere Anleitung in bestimmten Bereichen:
- color-system.md - Farbtheorie und Auswahlprozess
- typography-system.md - Schriftkombination und Skalenentscheidungen
- visual-effects.md - Effektprinzipien und Techniken
- animation-guide.md - Motion-Design-Prinzipien
- motion-graphics.md - Fortgeschrittene: 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 Programmieren – Designprinzipien lernen (Farbe, Typografie, UX-Psychologie) |
| web-design-guidelines | Nach dem Programmieren – Auf Barrierefreiheit, Leistung und Best Practices prüfen |
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 umsetzen
3. AUDIT → Überprüfung mit web-design-guidelines durchführen
4. FIX → Ergebnisse aus dem Audit beheben
Nächster Schritt: Nach dem Programmieren den Skill
web-design-guidelinesverwenden, um deine Umsetzung auf Barrierefreiheit, Fokus-Zustände, Animationen und Leistungsprobleme zu prüfen.
Denk daran: Design ist DENKEN, nicht Kopieren. Jedes Projekt verdient frische Überlegungen basierend auf seinem einzigartigen Kontext und seinen Benutzern. Vermeide den modernen SaaS-Safe-Harbor!