Dichte und Luft im Layout beschreiben, wie viele Elemente auf einer Fläche stehen und wie viel Freiraum sie umgibt. Die Nielsen Norman Group definiert Dichte als die Zahl der visuellen Elemente auf einer Fläche; hohe Dichte wirkt schnell überladen, niedrige minimalistisch. Weißraum zwischen den Elementen schafft Gleichgewicht und erleichtert das Überfliegen und Lesen.
- Dichte und Luft im Layout
Wie viele Elemente auf einer Fläche stehen und wie viel Freiraum sie umgibt; das Abwägen zwischen Überblick und Lesbarkeit.
Beispiel: „Beim Abwägen von Dichte und Luft im Layout gewann für die Preistabelle die Dichte.“Auch: Informationsdichte, Weißraum, englisch density und whitespace.
Anwendungsfall: Tabellen und Backends vertragen mehr Dichte als Landingpages.
Dichte und Luft im Layout von Designsystemen
Designsysteme legen Dichte in Stufen fest. Bei Material Design ist niedrige Dichte der Standard, hohe Dichte ist für Listen, Tabellen und lange Formulare vorgesehen; die Skala geht von 0 ins Negative, ein Button der Stufe minus 3 ist 24 Pixel hoch. IBMs Carbon bietet für Tabellen fünf Zeilenhöhen von 24 bis 64 Pixeln.
Wenn zu viel Luft schadet
Mehr Weißraum ist nicht automatisch besser. Die Nielsen Norman Group beschrieb 2023 Content Dispersion: Wenn Mobile-First-Layouts, Minimalismus und große Bilder auf dem Desktop zusammenkommen, verteilen sich die Inhalte so weit, dass Nutzer mehr scrollen müssen, die Struktur schwerer erkennen und weniger Vertrauen fassen. In den Tests half eine verdichtete Fassung desselben Inhalts.
Dichte und Luft auf einer Website
Auf einer Website wechselt das richtige Maß mit dem Seitentyp. Eine Landingpage mit einer einzigen Botschaft verträgt viel Luft; eine Preistabelle, eine Produktliste oder ein Register lebt davon, dass viel auf einen Blick passt. Damit Dichte und Luft im ganzen Auftritt stimmig bleiben, kommen Abstände am besten aus einer festen Skala, etwa aus Vielfachen von 8 Pixeln, statt von Seite zu Seite neu geschätzt zu werden.