Frontend-Designsystem
Philosophie: Jedes Pixel hat einen Zweck. Zurückhaltung ist Luxus. Die Nutzerpsychologie bestimmt die Entscheidungen. Kernprinzip: DENKEN, nicht auswendig lernen. FRAGEN, nicht annehmen.
🎯 Selektive Leseanleitung (VERPFLICHTEND)
REQUIRED-Dateien immer lesen, OPTIONAL nur bei Bedarf:
| Datei | Status | Wann lesen |
|---|---|---|
| ux-psychology.md | 🔴 REQUIRED | Immer zuerst lesen! |
| color-system.md | ⚪ Optional | Farb-/Palettenentscheidungen |
| typography-system.md | ⚪ Optional | Schriftauswahl/Kombination |
| visual-effects.md | ⚪ Optional | Glas-, Schatten-, Verlaufseffekte |
| animation-guide.md | ⚪ Optional | Animation erforderlich |
| motion-graphics.md | ⚪ Optional | Lottie, GSAP, 3D |
| decision-trees.md | ⚪ Optional | Kontextspezifische Vorlagen |
🔴 ux-psychology.md = IMMER LESEN. Andere nur, wenn relevant.
🔧 Laufzeit-Skripte
Diese für Audits ausführen (nicht lesen, nur ausführen):
| Skript | Zweck | Verwendung |
|---|---|---|
| Manuelles Audit | UX-Psychologie- & Barrierefreiheits-Audit | Browser DevTools & Lighthouse verwenden |
⚠️ WICHTIG: VOR ANNAHMEN FRAGEN (VERPFLICHTEND)
STOP! Wenn die Anfrage des Nutzers offen ist, nicht standardmäßig auf Ihre Favoriten zurückgreifen.
Wenn die Nutzereingabe vage ist, FRAGEN:
Farbe nicht angegeben? Fragen:
„Welche Farbpalette bevorzugst du? (blau/grün/orange/neutral/andere?)“
Stil nicht angegeben? Fragen:
„Welchen Stil verfolgst du? (minimalistisch/fett/retro/futuristisch/organisch?)“
Layout nicht angegeben? Fragen:
„Hast du eine Layout-Präferenz? (einspaltig/Raster/asymmetrisch/vollbreit?)“
⛔ ZU VERMEIDENDE STANDARD-TENDENZEN (ANTI-SAFE HARBOR):
| KI-Standardtendenz | Warum schlecht | Stattdessen denken |
|---|---|---|
| Bento-Grids (Moderne 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? |
| Glasmorphismus | 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-generierte Textgestaltung | Wie würde ein Mensch das sagen? |
| Dunkler Hintergrund + Neon-Glühen | Überbeansprucht, „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. GEH RISIKEN EIN.“
1. Einschränkungsanalyse (IMMER ZUERST)
Vor jeder Designarbeit: BEANTWORTE DIESE FRAGEN ODER FRAGE DEN NUTZER:
| Einschränkung | Frage | Warum wichtig |
|---|---|---|
| Zeitplan | Wie viel Zeit? | Bestimmt die Komplexität |
| Inhalt | Fertig oder Platzhalter? | Beeinflusst Layout-Flexibilität |
| Marke | Vorhandene Richtlinien? | Kann Farben/Schriften vorgeben |
| Technik | Welcher Stack? | Beeinflusst Fähigkeiten |
| Zielgruppe | Wer genau? | Treibt alle visuellen Entscheidungen |
Zielgruppe → Designansatz
| Zielgruppe | Überlegen |
|---|---|
| Gen Z | Mutig, schnell, mobil-first, authentisch |
| Millennials | Sauber, minimalistisch, wertorientiert |
| 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 (Diese verinnerlichen)
| 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 angemessen dimensionieren |
| Miller's Gesetz | ~7 Elemente im Kurzzeitgedächtnis | Inhalt in Gruppen aufteilen |
| Von Restorff | Anders = einprägsam | CTAs visuell abheben |
| Serielle Position | Erstes/letztes am besten erinnert | Schlüsselinformationen am Anfang/Ende |
Ebenen des emotionalen Designs
VISCERAL (sofort) → Erster Eindruck: Farben, Bilder, Gesamtgefühl
BEHAVIORAL (Nutzung) → Bedienung: Geschwindigkeit, Feedback, Effizienz
REFLECTIVE (Erinnerung) → Danach: „Das sagt etwas Gutes über mich aus“
Vertrauensaufbau
- Sicherheitsindikatoren bei sensiblen Aktionen
- Soziale Beweise wo relevant
- Klarer Kontakt-/Supportzugang
- Konsistentes, professionelles Design
- Transparente Richtlinien
3. Layout-Prinzipien
Goldener Schnitt (φ = 1.618)
Für proportionale Harmonie verwenden:
├── Inhalt : Seitenleiste ≈ 62 % : 38 %
├── Jede Überschriftengröß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 Dimensionierungsprinzipien
| 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 | Konsistenter Abstand, atmungsaktiv |
| Lesebreite | 45–75 Zeichen optimal |
4. Farbprinzipien
60-30-10-Regel
60 % → Primär/Hintergrund (ruhig, neutraler Grundton)
30 % → Sekundär (unterstützende Bereiche)
10 % → Akzent (CTAs, Highlights, Aufmerksamkeit)
Farbpsychologie (Für Entscheidungsfindung)
| Wenn du brauchst... | Ziehe Farbtöne 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 Farben | Überwältigende Farben |
Auswahlprozess
- Welche Branche? (schränkt Optionen ein)
- Welche Emotion? (wählt Primärfarbe)
- Heller oder dunkler Modus? (legt Grundlage fest)
- FRAGE DEN NUTZER wenn nicht angegeben
Für detaillierte Farbtheorie: color-system.md
5. Typografie-Prinzipien
Skalenauswahl
| Inhaltstyp | Skalenverhältnis | Gefühl |
|---|---|---|
| Dichtes 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:
├── GENUG Unterschied für Hierarchie
├── GENUG Ähnlichkeit für Zusammenhalt
└── Meistens: 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
Glasmorphismus (Wenn angemessen)
Wichtige Eigenschaften:
├── Halbtransparenter Hintergrund
├── Backdrop-Blur
├── Dezente Border zur Definition
└── ⚠️ **WARNUNG:** Standard blau/weißer Glasmorphismus ist ein modernes Klischee. Verwende ihn radikal oder gar nicht.
Schattenhierarchie
Höhenkonzept:
├── Höhere Elemente = größere Schatten
├── Y-Offset > X-Offset (Licht von oben)
├── Mehrere Ebenen = realistischer
└── Dunkelmodus: eventuell Glühen statt Schatten
Verlaufsnutzung
Harmonische Verläufe:
├── Benachbarte Farben im Farbkreis (analog)
├── ODER gleicher Farbton, unterschiedliche Helligkeit
├── Vermeide harte Komplementärpaare
├── 🚫 **KEINE Mesh/Aurora-Verläufe** (schwebende Blobs)
└── VON Projekt zu Projekt radikal variieren
Für die vollständige Effekt-Anleitung: visual-effects.md
7. Animationsprinzipien
Timing-Konzept
Dauer basierend auf:
├── Entfernung (weiter=länger)
├── Größe (größer=langsamer)
├── Wichtigkeit (kritisch=deutlich)
└── Kontext (dringend=schnell, Luxus=langsam)
Auswahl der Beschleunigung
| Aktion | Beschleunigung | Warum |
|---|---|---|
| Hereinkommen | Ease-out | Verlangsamen, einpendeln |
| Verlassen | Ease-in | Beschleunigen, verlassen |
| Betonung | Ease-in-out | Sanft, bewusst |
| Verspielt | Bounce | Spaß, energiegeladen |
Leistung
- Nur transform und opacity animieren
- Präferenz für reduzierte Bewegung respektieren
- Auf schwächeren Geräten 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)
- Kohäsiver visueller Rhythmus
- Benutzerdefinierte Elemente (nicht alles Standard)
Vertrauensbilder
- Sicherheitshinweise wo angebracht
- Soziale Beweise / Testimonials
- Klarer Wertvorschlag
- Professionelle Bilder
- Konsistente Designsprache
Emotionale Auslöser
- Hero, das die beabsichtigte Emotion hervorruft
- Menschliche Elemente (Gesichter, Geschichten)
- Fortschritts-/Erfolgsindikatoren
- Momente der Freude
9. Anti-Patterns (Was NICHT zu tun ist)
❌ Faule Design-Indikatoren
- Standard-Systemschriften ohne Überlegung
- Stock-Fotografie, die nicht passt
- Inkonsistente Abstände
- Zu viele konkurrierende Farben
- Textwände ohne Hierarchie
- Unzugänglicher Kontrast
❌ KI-Tendenzmuster (VERMEIDEN!)
- Jedes Projekt dieselben Farben
- Dunkel + Neon als Standard
- Alles in Lila/Violett (LILA-VERBOT ✅)
- Bento-Grids für einfache Landingpages
- Mesh-Verläufe & Glüheffekte
- Gleiche Layout-Struktur / Vercel-Klon
- Nutzerpräferenzen nicht erfragen
❌ Dark Patterns (Unethisch)
- Versteckte Kosten
- Vorgetäuschte Dringlichkeit
- Erzwungene Aktionen
- Täuschendes UI
- Bestätigungsbeschämung
10. Entscheidungsprozess-Zusammenfassung
Bei JEDER 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 standardmäßig annehmen!)
4. UMSETZUNG
└── Die obigen Prinzipien anwenden
└── Gegen Anti-Patterns prüfen
5. ÜBERPRÜFUNG
└── „Dient dies dem Nutzer?“
└── „Unterscheidet sich das von meinen Standardeinstellungen?“
└── „Wäre ich stolz darauf?“
Referenzdateien
Für tiefergehende Anleitungen zu bestimmten Bereichen:
- color-system.md – Farbtheorie und Auswahlprozess
- typography-system.md – Schriftkombination 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 lernen (Farbe, Typografie, UX-Psychologie) |
| web-design-guidelines | Nach dem Codieren - Audit für Barrierefreiheit, Leistung und Best Practices |
Workflow nach dem Design
Nach der Implementierung deines Designs das Audit durchführen:
1. DESIGN → frontend-design-Prinzipien lesen ← DU BIST HIER
2. CODE → Das Design implementieren
3. AUDIT → web-design-guidelines-Überprüfung durchführen
4. FIX → Ergebnisse aus dem Audit beheben
Nächster Schritt: Nach dem Codieren das Skill
web-design-guidelinesverwenden, um die Implementierung auf Barrierefreiheit, Fokus-Zustände, Animationen und Leistungsprobleme zu prüfen.
Denk dran: Design ist DENKEN, nicht Kopieren. Jedes Projekt verdient frische Überlegungen basierend auf seinem einzigartigen Kontext und seinen Nutzern. Vermeide den Modernen SaaS Safe Harbor!