feat: Implement the 9-category parameter system by updating the root layout for dynamic configuration and enhancing the Definition of Done with detailed checklists.
This commit is contained in:
1elle1
@@ -43,6 +43,208 @@ Diese Datei definiert **NICHT**:
|
||||
|
||||
---
|
||||
|
||||
## Stil-Adjektive & Stil-Verbote
|
||||
|
||||
Die visuellen Grundprinzipien werden durch Kategorie F definiert.
|
||||
|
||||
### Stil-Adjektive (styleAdjectives)
|
||||
|
||||
Maximal 5 Wörter, die den visuellen Charakter definieren (z.B. "modern", "sportlich", "seriös", "elegant", "minimalistisch").
|
||||
|
||||
**Pflicht:** Bei JEDER visuellen Entscheidung prüfen:
|
||||
- Passt diese Entscheidung zu den definierten Adjektiven?
|
||||
- Verstärkt sie den gewünschten Charakter?
|
||||
|
||||
### Stil-Verbote (styleProhibitions)
|
||||
|
||||
Definieren No-Gos (z.B. "verspielt", "comic", "laut", "kitschig").
|
||||
|
||||
**Pflicht:** Keine Designentscheidung darf gegen ein Stil-Verbot verstoßen.
|
||||
|
||||
### Prüfschema
|
||||
|
||||
Vor jeder UI-Entscheidung:
|
||||
1. ✓ Passt es zu den Stil-Adjektiven?
|
||||
2. ✓ Verstößt es gegen kein Stil-Verbot?
|
||||
3. ✓ Ist es konsistent mit bisherigen Entscheidungen?
|
||||
|
||||
---
|
||||
|
||||
## Adaptive Layout-Regeln nach Interaktionsniveau
|
||||
|
||||
Das Layout passt sich dem definierten Interaktionsniveau aus Kategorie G an.
|
||||
|
||||
### Level: ruhig
|
||||
|
||||
- Maximale visuelle Ruhe
|
||||
- Große Whitespace-Blöcke (min. `--spacing-2xl` zwischen Sections)
|
||||
- Keine Animationen
|
||||
- Maximal 1 CTA pro Viewport
|
||||
- Keine Sticky-Elemente außer minimaler Header
|
||||
- Klare vertikale Rhythmik
|
||||
- Keine Parallax-Effekte
|
||||
|
||||
### Level: moderat
|
||||
|
||||
- Ausgewogenes Layout
|
||||
- Dezente Hover-Effekte (opacity, subtle scale)
|
||||
- IntersectionObserver-basierte Fade-Ins
|
||||
- Moderate Whitespace (`--spacing-xl` bis `--spacing-2xl`)
|
||||
- CTAs dürfen wiederholt werden, aber nicht aufdringlich
|
||||
- Subtile Scroll-Progress-Indikatoren erlaubt
|
||||
|
||||
### Level: dynamisch
|
||||
|
||||
- Scroll-triggered Animationen erlaubt
|
||||
- Parallax-Effekte möglich
|
||||
- Interaktive Elemente (Hover-Reveals, Micro-Interactions)
|
||||
- Sticky CTAs auf Mobile
|
||||
- Stagger-Animationen für Listen
|
||||
- Visuelle Überraschungsmomente erlaubt
|
||||
|
||||
---
|
||||
|
||||
## Conversion-optimiertes Layout
|
||||
|
||||
Das Layout richtet sich nach dem Seiten-Zweck aus Kategorie E.
|
||||
|
||||
### Seiten mit purpose: konvertieren
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ Hero mit primärem CTA above-the-fold │
|
||||
├─────────────────────────────────────┤
|
||||
│ Trust-Section (direkt unter Hero) │
|
||||
│ - Bewertungen, Zertifikate, Logos │
|
||||
├─────────────────────────────────────┤
|
||||
│ Nutzen / USPs │
|
||||
├─────────────────────────────────────┤
|
||||
│ Einwand-Entkräftung │
|
||||
│ - FAQ oder "Häufige Fragen" │
|
||||
├─────────────────────────────────────┤
|
||||
│ Kontaktformular / Buchung │
|
||||
│ - Mit sekundärem CTA │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
- Above-the-fold CTA mit primärer Handlungsaufforderung
|
||||
- Trust-Section direkt unter dem Hero
|
||||
- Einwand-Entkräftung vor dem Kontaktformular
|
||||
- Sticky CTA-Bar auf Mobile
|
||||
|
||||
### Seiten mit purpose: informieren
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ Klare H1 + Einleitung │
|
||||
├─────────────────────────────────────┤
|
||||
│ Inhaltsverzeichnis (bei langen │
|
||||
│ Seiten > 3 Sections) │
|
||||
├─────────────────────────────────────┤
|
||||
│ Content-Sections mit H2-Struktur │
|
||||
│ - Scanbare Absätze │
|
||||
│ - Listen und Tabellen │
|
||||
├─────────────────────────────────────┤
|
||||
│ CTA am Ende (nicht dominant) │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
- Klare H2-Struktur für Scanability
|
||||
- Inhaltsverzeichnis bei langen Seiten (>3 Sections)
|
||||
- CTAs am Ende von Sektionen, nicht dominant
|
||||
- Fokus auf Lesbarkeit und Navigation
|
||||
|
||||
### Seiten mit purpose: ueberzeugen
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ Problem-Statement (Identifikation) │
|
||||
├─────────────────────────────────────┤
|
||||
│ Lösung präsentieren │
|
||||
│ - USP-Cards / Feature-Grid │
|
||||
├─────────────────────────────────────┤
|
||||
│ Beweis (Social Proof) │
|
||||
│ - Testimonials, Case Studies │
|
||||
│ - Zahlen und Fakten │
|
||||
├─────────────────────────────────────┤
|
||||
│ CTA mit klarer Handlungsaufforderung │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
- Problem → Lösung → Beweis → CTA Flow
|
||||
- USP-Cards/Feature-Grid prominent
|
||||
- Social Proof zwischen Content-Sections
|
||||
- Emotionale + rationale Argumentation
|
||||
|
||||
---
|
||||
|
||||
## Ansprache-konsistente UI-Texte
|
||||
|
||||
Alle UI-Texte müssen die Ansprache aus Kategorie C widerspiegeln.
|
||||
|
||||
### Ansprache: du
|
||||
|
||||
| Element | Beispiel |
|
||||
|---------|----------|
|
||||
| Button | "Jetzt starten", "Schick uns eine Nachricht" |
|
||||
| Formular-Label | "Dein Name", "Deine E-Mail" |
|
||||
| Placeholder | "Wie können wir dir helfen?" |
|
||||
| Microcopy | "Wir melden uns bei dir zurück" |
|
||||
| Fehlertext | "Bitte gib deine E-Mail an" |
|
||||
| Erfolgstext | "Danke! Wir haben deine Nachricht erhalten." |
|
||||
|
||||
### Ansprache: sie
|
||||
|
||||
| Element | Beispiel |
|
||||
|---------|----------|
|
||||
| Button | "Jetzt starten", "Senden Sie uns eine Nachricht" |
|
||||
| Formular-Label | "Ihr Name", "Ihre E-Mail" |
|
||||
| Placeholder | "Wie können wir Ihnen helfen?" |
|
||||
| Microcopy | "Wir melden uns bei Ihnen" |
|
||||
| Fehlertext | "Bitte geben Sie Ihre E-Mail an" |
|
||||
| Erfolgstext | "Vielen Dank! Wir haben Ihre Nachricht erhalten." |
|
||||
|
||||
### Konsistenz-Regel
|
||||
|
||||
**Pflicht:** Die gewählte Ansprache muss auf ALLEN Seiten und in ALLEN UI-Elementen konsistent sein. Mischformen sind verboten.
|
||||
|
||||
---
|
||||
|
||||
## Responsive Breakpoints
|
||||
|
||||
### Konkrete Viewports
|
||||
|
||||
| Viewport | Bereich | Verhalten |
|
||||
|----------|---------|-----------|
|
||||
| Mobile | 320px – 767px | Hamburger Navigation, Stack-Layout, Touch-Targets 44×44px |
|
||||
| Tablet | 768px – 1023px | Collapsed Navigation erlaubt, 2-Column-Grids |
|
||||
| Desktop | 1024px+ | Full Navigation, bis zu 4-Column-Grids |
|
||||
|
||||
### Mobile (320px – 767px)
|
||||
|
||||
- Hamburger-Navigation mit Slide-Out oder Fullscreen-Overlay
|
||||
- Einspaltiges Layout (Stack)
|
||||
- Touch-Targets mindestens 44×44px
|
||||
- Keine Hover-Only-Interaktionen
|
||||
- Sticky Header (optional, je nach Interaktionsniveau)
|
||||
- Bottom-Sticky CTAs bei Conversion-Seiten
|
||||
|
||||
### Tablet (768px – 1023px)
|
||||
|
||||
- Navigation kann collapsed bleiben oder aufklappen
|
||||
- 2-Column-Grids möglich
|
||||
- Touch und Hover coexistieren
|
||||
- Seitlicher Padding erhöht
|
||||
|
||||
### Desktop (1024px+)
|
||||
|
||||
- Volle Navigation sichtbar
|
||||
- Bis zu 4-Column-Grids
|
||||
- Hover-Effekte aktiv
|
||||
- Container-Max-Width greift
|
||||
|
||||
---
|
||||
|
||||
## Accessibility (Barrierefreiheit)
|
||||
|
||||
### WCAG 2.1 Level AA
|
||||
|
||||
Reference in New Issue
Block a user