Abstände und Weißraum

In vielen Besprechungen über Website-Entwürfe fällt irgendwann der Satz: „Da ist noch so viel Platz, da könnten wir doch noch etwas hinstellen.“ Dahinter steckt ein verbreitetes Missverständnis. Leere Fläche wird als ungenutzter Raum gesehen, als verschenkte Chance. Gestalter sehen das anders: Weißraum ist nicht die Abwesenheit von Gestaltung, sondern eines ihrer wichtigsten Mittel. Er gibt Inhalten Luft, trennt und verbindet, schafft Hierarchie und vermittelt Wertigkeit. Luxusmarken wissen das seit Langem – ihre Anzeigen und Websites bestehen oft zum größten Teil aus freier Fläche.

1. Was Weißraum leistet

Man unterscheidet zwei Ebenen. Der Makro-Weißraum betrifft die großen Abstände: zwischen Abschnitten einer Seite, um Bilder, zu den Seitenrändern. Er bestimmt den Gesamteindruck – ob eine Seite gedrängt oder großzügig, hektisch oder ruhig wirkt. Der Mikro-Weißraum betrifft die kleinen Abstände: zwischen Zeilen, Absätzen, Buchstaben, zwischen einer Beschriftung und ihrem Feld. Er bestimmt die Lesbarkeit und die Zuordnung im Detail.

Abb. 2.1Makro- und Mikro-Weißraum

Untersuchungen zur Lesbarkeit zeigen, dass ausreichender Weißraum um Textblöcke und zwischen Absätzen das Verständnis messbar verbessert. Eine oft zitierte Studie von Dmitri Lin kam zu dem Ergebnis, dass Weißraum die Aufmerksamkeit bündelt und das Erfassen von Informationen erleichtert. Umgekehrt führt zu wenig Weißraum dazu, dass Nutzer Inhalte überspringen, weil sie die Struktur nicht erkennen.

2. Ein Abstandssystem

Das Problem vieler Layouts ist nicht zu wenig oder zu viel Weißraum, sondern Beliebigkeit. Einmal 13 Pixel, einmal 17, einmal 22 – jeder Abstand wurde einzeln nach Gefühl festgelegt. Das Ergebnis wirkt unruhig, ohne dass man den Grund benennen kann. Die Lösung ist ein Abstandssystem: Alle Abstände sind Vielfache einer Grundeinheit, meist 4 oder 8 Pixel. Probieren Sie den Unterschied aus:

Das System hat zwei Vorteile. Erstens entsteht eine sichtbare Ordnung, weil sich dieselben Abstände überall wiederholen. Zweitens werden Entscheidungen einfacher: Statt über 18 oder 20 Pixel zu diskutieren, wählt man zwischen „m“ und „l“. In der Entwicklung werden die Werte als Variablen oder Tokens hinterlegt, sodass Gestaltung und Code dieselben Maße verwenden.

3. Innen kleiner als außen

Die wichtigste Regel für Abstände kennen Sie bereits aus dem Modul zur Wahrnehmung: Was zusammengehört, steht enger zusammen als das, was getrennt ist. Übertragen auf das Abstandssystem heißt das: Der Innenabstand eines Elements ist kleiner als der Abstand zum nächsten Element, und der Abstand zwischen Elementen einer Gruppe ist kleiner als der Abstand zwischen Gruppen. Eine Karte mit 24 Pixeln Innenabstand braucht zur nächsten Karte mindestens 24, besser 32 Pixel. Ein Seitenabschnitt mit 32 Pixeln zwischen seinen Elementen braucht zum nächsten Abschnitt 64 bis 96 Pixel.

4. Zu eng, zu weit

Zu wenig Weißraum ist der häufigere Fehler, besonders auf Websites, die über Jahre gewachsen sind. Jede Abteilung wollte ihr Thema auf der Startseite, jede Aktion bekam einen eigenen Kasten, und irgendwann ist die Seite vollgestopft. Besucher reagieren darauf mit Überforderung: Sie finden das Wichtige nicht und verlassen die Seite. Die Lösung liegt fast nie darin, alles kleiner zu machen, sondern darin, auszuwählen. Was nicht wichtig genug ist, um Platz zu bekommen, gehört auf eine Unterseite.

Zu viel Weißraum ist seltener, kommt aber vor, vor allem bei sehr minimalistischen Entwürfen. Wenn zwischen zwei Abschnitten ein ganzer Bildschirm leer bleibt, glauben Nutzer, die Seite sei zu Ende, und scrollen nicht weiter. Wenn Elemente, die zusammengehören, weit voneinander entfernt stehen, geht der Zusammenhang verloren. Weißraum wirkt nur im Verhältnis: großzügig zwischen Abschnitten, eng innerhalb von Gruppen.

5. Weißraum und Wertigkeit

Weißraum wirkt nicht nur auf die Lesbarkeit, sondern auch auf die Wahrnehmung einer Marke. Großzügige Abstände vermitteln Ruhe, Selbstbewusstsein und Qualität – wer viel Platz lässt, muss nicht um Aufmerksamkeit kämpfen. Enge, dichte Layouts wirken dagegen günstig und dringlich, was bei Discountern gewollt sein kann, bei einem Beratungsunternehmen aber schadet. Für die meisten mittelständischen Unternehmen liegt die richtige Dosis dazwischen: genug Luft, um hochwertig zu wirken, genug Dichte, um sachlich und informativ zu bleiben. Ein guter Test ist der Vergleich mit Websites von Unternehmen, die man für ihre Qualität schätzt. Meist fällt auf, wie viel Platz sie ihren Inhalten geben.

Auf mobilen Geräten gelten dieselben Prinzipien mit kleineren Werten. Die Abstände zwischen Abschnitten schrumpfen etwa auf die Hälfte, die Seitenränder auf 16 bis 24 Pixel. Wichtig ist, dass die Verhältnisse erhalten bleiben: Auch auf dem Handy muss der Abstand zwischen Gruppen deutlich größer sein als innerhalb einer Gruppe. Wer das Abstandssystem responsiv anlegt, etwa mit einem kleineren Faktor für schmale Bildschirme, bekommt diese Anpassung automatisch.

Ein kurzer Praxistipp zum Schluss: Wenn Sie einen bestehenden Entwurf verbessern wollen, verdoppeln Sie probeweise alle Abstände zwischen den Seitenabschnitten und halbieren Sie die Abstände innerhalb der Gruppen. Das Ergebnis ist fast immer übersichtlicher als das Original. Von dort aus lässt sich fein nachjustieren. Dieser einfache Handgriff zeigt eindrucksvoll, wie viel Wirkung allein in den Abständen steckt – ohne dass ein einziger Inhalt, eine Farbe oder eine Schrift verändert werden muss. Auch in Präsentationen und Angeboten funktioniert der Trick: Folien und Seiten mit mehr Luft wirken sofort professioneller und lassen sich schneller erfassen.

Weißraum ist also keine Frage des Platzes, sondern der Haltung: Wer weglässt, zeigt, dass er weiß, was wichtig ist. Genau diese Klarheit schätzen Besucher, besonders wenn sie unter Zeitdruck eine Entscheidung treffen oder schnell eine Information finden wollen. Jeder freie Zentimeter, der richtig gesetzt ist, arbeitet für den Inhalt, der daneben steht, und macht ihn stärker und leichter erfassbar.

Stand: September 2026. Kursmaterial der Klarwerk Akademie.