Ich habe die Schatten nicht entfernt, weil Minimalismus seriös klang. Ich habe sie entfernt, weil sie zu wenig Designarbeit geleistet haben für die Unstimmigkeiten, die sie eingeführt haben. Sobald ein Designsystem überall auf sanften Erhöhungen basiert, beginnt es oft, schwache Hierarchien mit visuellem Nebel zu kompensieren.
Ränder, Abstände, Typografie und Kontrast tragen nicht mehr ausreichend zur Struktur alleine bei.
Was sich nach dem Entfernen verbessert hat
Als wir die meisten dekorativen Schatten entfernt haben, wurde die Schnittstelle auf nützliche Weise strenger:
- Hierarchie musste aus Layout und Typografie kommen
- Komponenten sahen auf unterschiedlichen Seiten konsistenter aus
- Hover- und Fokuszustände wurden leichter lesbar
- Visuelles Gewicht hörte auf, sich in jeder Karte und jedem Panel anzusammeln
Das ist der echte Designvorteil. Es zwingt die Komposition, die Arbeit zu erledigen.
Der praktische CSS-Unterschied
Vorher:
.card {
background: #fff;
border-radius: 16px;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.08),
0 2px 8px rgba(0, 0, 0, 0.06);
}
Nachher:
.card {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 16px;
}
Die zweite Version ist visuell härter, aber oft ehrlicher. Wenn die Komposition immer noch funktioniert, benötigte die Schnittstelle im ersten Fall keinen dekorativen Unschärfeeffekt.
Der Kompromiss
Schatten sind nicht immer falsch. Sie sind nützlich, wenn sie reale Schichtung kommunizieren:
- Modale über der Seite
- Schwimmende Menüs
- Ziehzustände
- Vorübergehender Fokus oder Erhöhung
Sie werden schwaches Design, wenn sie überall verteilt werden, um eine flache Komposition teurer erscheinen zu lassen.
Bessere Regel
Verwenden Sie Schatten, wenn sie Tiefe erklären. Entfernen Sie sie, wenn sie lediglich die Abwesenheit einer stärkeren Struktur dekorieren.
Weiterführende Literatur