Räume
1. Whitespace (Räume und Atem im Design)
- Verwenden Sie einheitliche vertikale Abstände zwischen den Blöcken (z.B. 24-48px).
- Beachten Sie den größeren internen Abstand (Padding) um wichtige Blöcke wie z. B. die Heldenabschnitte.
- Verwenden Sie keine zu kleinen Abstände - sie “komprimieren” die Seite optisch und erschweren das Lesen.
- Verwenden Sie größere Abstände für Abschnitte mit unterschiedlichen Hintergründen, um natürliche Abschnittsübergänge zu schaffen.
- Denken Sie an die “Weißraumhierarchie”: Je wichtiger das Element, desto mehr Platz um es herum.
Farben
2. Farben (Farben)
- Verwenden Sie im gesamten Projekt nicht mehr als 3-5 Grundfarben.
- Definiert durch Markenpalette: Primär-, Sekundär- und Akzentfarbe.
- Beschränken Sie leuchtende Farben auf CTA-Schaltflächen oder wichtige Elemente.
- Für Hintergründe werden helle oder sehr dunkle Farbtöne bevorzugt, um einen hohen Kontrast zum Text zu gewährleisten.
- Stellen Sie sicher, dass der Farbkontrast den WCAG entspricht (4,5:1 für Text).
- Verwenden Sie für alle Symbole oder Abbildungen denselben Farbton.
3. Typografie (Schriftarten und Schriftgröße)
- Wählen Sie 1 Hauptschriftart für Text und 1 Akzentschriftart für Überschriften (falls erforderlich).
- Schafft eine konsistente Hierarchie (Beispiel):
- H1: 40-60px
- H2: 28-40px
- H3: 22-28px
- Körper: 16-18px
- Kleiner Text: 14px
- Mindestzeilenhöhe - 1,4-1,6.
- Verwenden Sie auf der gesamten Seite nicht mehr als 2-3 verschiedene Schriftstärken.
- Stellen Sie sicher, dass die Schriftgröße für die mobile Ansicht ausreichend ist (mindestens 15-16px für einfachen Text).
