Was macht Ruhiges, dichtes Design?
Ein Geschmack, keine Haut. Linear und Things 3 sind Referenzen für das Urteil – wie man viele Informationen ohne Lärm präsentiert und wie man ruhig bleibt, ohne vage zu werden. Ihr dunkles Theme, den lila Akzent oder die blaue/grüne Markenfarbe zu übernehmen, bedeutet nicht, den Geschmack zu übernehmen.
Zwei Lektionen tragen den größten Wert:
- Linear – Dichte ohne Lärm. Zeige dichte Arbeit mit zurückhaltender Hierarchie.
- Things – Ruhe ohne Schwäche. Halte die Hauptoberfläche ruhig, indem du Details verbirgst, bis sie ihren Platz verdient haben, nicht indem du den Bildschirm leerst.
Prinzipien
Jedes ist eine Regel plus der Schnitt, den es erzwingt. Wende sie an, wenn du eine Oberfläche baust oder kritisierst.
- Kämpfe nicht um Aufmerksamkeit, die du dir nicht verdient hast. Chrome, Trennzeichen, Metadaten, inaktive Tabs, wiederholte Symbole treten zurück; Hauptinhalt und die eine primäre Aktion werden zuerst gelesen, ohne zu schreien.
- Struktur wird gefühlt, nicht gesehen. Erhalte Hierarchie durch optische Ausrichtung, einen konsistenten Rhythmus der Abstände, 0,5–1px Trennlinien, Opazitätsstufen, gruppierte Hintergründe und Typografie – nicht durch schwere Rahmen, große Schatten, dekorative Verläufe, gesättigte Paneele oder Symbolcontainer.
- Dichte ohne Unordnung. Kompakte Zeilen mit vorhersagbarer Ausrichtung und progressiver Offenlegung von Details. Nicht: winziger, unleserlicher Text; jede Zeile, die jedes Steuerelement offenlegt; oder aufgeblasene Abstände, die als „Premium“ verkauft werden.
- Ruhe, die Klarheit schafft, nicht Ruhe, die verbirgt. Ruhe entsteht aus einer klaren Hierarchie und einer offensichtlichen nächsten Aktion – nicht aus blassen Leerräumen, kontrastarmem Text, der vorgibt, leise zu sein, oder leeren Zuständen, die als Dekoration dienen.
- Zurückhaltende semantische Farbe. Akzent markiert Auswahl, Fokus, wichtigen Status und positiven/abgeschlossenen Zustand – niemals Dekoration. Respektiere den Systemakzent; übermale nicht alles in einer Markenfarbe. Ein „Abschluss-Grün“ ist ein semantischer Hinweis, nicht die Primärfarbe der App.
Typografie und Bewegung
- Typografie: Systemschriftarten, es sei denn, es gibt einen starken Grund dagegen; Hierarchie durch Größe, Gewicht, Opazität und Platzierung. Richtung: Bildschirmtitel (klar, nicht überdimensioniert) → Zeilentitel (mittleres Gewicht) → Metadaten (kleiner, geringere Opazität) → Status (kompakt, semantisch, nicht badge-lastig) → Text (kurz, lesbar).
- Bewegung: Erklärt Kontinuität oder Zustandsänderung (ein erscheinender Editor, eine sich bewegende Auswahl, eine Inline-Statusaktualisierung). Niemals ornamental. Respektiere immer die reduzierte Bewegung.
Zwei Entscheidungstests
- Drama-Test: Wenn eine Behandlung visuelles Drama hinzufügt, aber Orientierung, Geschwindigkeit, Vertrauen oder Aufgabenerfüllung nicht verbessert – entferne sie.
- Ruhe-Test: Wenn „Ruhe“ die Hierarchie, Dichte oder die nächste Aktion schwerer lesbar macht – ist es nicht Ruhe, es ist vage. Ziehe es straffer.
Selbstüberprüfung
Lies einen Bildschirm gegen diese Punkte. Ein „Nein“ ist ein Befund, keine Präferenz:
- Ist die primäre Aufgabe auf einen Blick offensichtlich, ohne dass das Auge suchen muss?
- Tritt sekundäres Chrome zurück oder konkurriert es?
- Sind Zeilen/Elemente auf einem vorhersagbaren Raster und einer Grundlinie ausgerichtet?
- Ist der Bildschirm dicht, weil er informativ ist – oder spärlich, weil die Abstände aufgebläht sind?
- Kommuniziert Farbe den Zustand, oder ist sie Markendekoration?
- Könntest du einen Trennstrich, Schatten, Verlauf oder Symbolcontainer löschen und nichts verlieren?
Tiefergehen
references/in-practice.md – konkrete (illustrative) Werte, erweiterte Bevorzugen/Vermeiden-Listen und wie man diesen Geschmack während eines Review-Durchgangs anwendet.
Nicht die Aufgabe dieses Skills
Dies ist plattformunabhängiger Geschmack. Plattformkonventionen, Steuerelemente und Architektur leben woanders:
- Apple (iOS/iPadOS/macOS) UI + HIG + SwiftUI/AppKit + visuelle QA →
apple-app-design-guidelines. - Plattformübergreifende Native-Feel-Desktop-Architektur (Shell + WebView + IPC) →
native-feel-desktop.
Wenn Geschmack und Plattform in Konflikt geraten, gewinnt die Plattform – ordne dich diesen Skills unter.