Schatten, Tiefe & Elevation
Schatten sind keine Dekoration — sie sind ein Kommunikationswerkzeug. Ein gut gewählter Schatten sagt dem Nutzer: „Dieses Element ist interaktiv", „Diese Karte schwebt über dem Hintergrund" oder „Dieser Dialog braucht deine volle Aufmerksamkeit."
- Verstehen, warum Schatten mehr als Dekoration sind — sie kommunizieren Elevation und Hierarchie
- Die Lichtquellen-Metapher als Grundprinzip für glaubwürdige Schatten verinnerlichen
- Ein Elevation-System mit 5 Stufen aufbauen und gezielt einsetzen
- Zwei-Schatten-Technik (Ambient + Direct Light) anwenden
- Tiefe auch ohne Schatten erzeugen — mit Farbe, Overlap und Solid Shadows
Schatten sind keine Dekoration — sie sind ein Kommunikationswerkzeug. Ein gut gewählter Schatten sagt dem Nutzer: „Dieses Element ist interaktiv", „Diese Karte schwebt über dem Hintergrund" oder „Dieser Dialog braucht deine volle Aufmerksamkeit."
Licht kommt von oben — die Grundregel
Im echten Leben erzeugen Objekte Schatten, weil eine Lichtquelle von oben scheint. Erhabene Elemente haben helle Oberkanten und werfen Schatten nach unten. Ein vertikaler Offset nach unten wirkt natürlicher als symmetrischer Schatten.
Level 1: Subtle Raise
Sehr kleiner Schatten für Buttons und Karten im Ruhezustand (1–2px Offset)
Level 2: Card Elevation
Standard für Karten und schwebende Panels
Level 3: Dropdown/Popover
Für Elemente die temporär über dem UI schweben
Level 4: Dialog/Drawer
Für modale Dialoge und Seitenschubladen
Level 5: Maximum Elevation
Sehr großer Blur-Radius für absolute Aufmerksamkeit
Ein Schatten vs. Zwei-Schatten-Technik
Professionelle Schatten bestehen aus zwei Layern: großer weicher Schatten (direktes Licht) + kleiner scharferer Schatten (Ambient Occlusion). Die Zwei-Schatten-Variante erzeugt realistischeren Eindruck.
Schwarze Schatten vs. farbige Schatten
Standard-Schatten mit rgba(0,0,0,...) sind universell, wirken aber manchmal stumpf. Farbige Schatten basierend auf Hintergrund- oder Akzentfarbe erzeugen lebendigeres, harmonischeres Gesamtbild.
Tiefe auch ohne Schatten — Flat Depth
Flat Design bedeutet nicht „keine Tiefe". Du kannst Tiefe mit Farbe, Solid Shadows und Overlap erzeugen. Regel: Heller als Hintergrund = erhaben. Dunkler als Hintergrund = eingelassen.
Farbe (Heller = Erhaben)
Heller als BG erhabene Elemente, dunkler = eingelassen
Solid Shadows (Harte Kante)
Scharfer Schatten ohne Blur erzeugt technisches, subtiles Gefühl
Overlap
Überlagernde Elemente ohne Schatten wirken tiefenhaft durch Sichtbarkeit
Shadow Playground
Praxisaufgabe: Elevation-System anwenden
Ein flaches Interface ohne Schatten erhält ein konsistentes Elevation-System.
- Erstelle 5-stufiges Shadow-System als CSS Custom Properties
- Weise jeder Karte einen angemessenen Schatten zu (Level 1 oder 2)
- Gib dem Button einen farbigen Schatten basierend auf seiner Hintergrundfarbe
- Füge dem Dropdown-Menü einen Level-3-Schatten hinzu
- Nutze Zwei-Schatten-Technik für mindestens ein Element
- Bonus: Hover-Transition, die den Schatten beim Hovern verstärkt