UX-Design mit White Space – mehr Ruhe, Fokus und Klarheit

Übervolle Websites machen nervös: zu viel Text, zu viele Farben, zu wenig Luft. Gut geplanter White Space (bewusste Leerräume) sorgt für Ruhe, lenkt den Blick und steigert die Lesbarkeit. Der Effekt ist messbar: Inhalte werden besser verstanden, Buttons häufiger geklickt und Nutzer bleiben länger auf der Seite.

Dieser Guide zeigt Schritt für Schritt, wie White Space im UX-Design sinnvoll eingesetzt wird – von den Grundlagen über Layout-Raster bis hin zu praktischen Abstandsregeln in Figma, Sketch und im Code.

White Space im UX-Design: Was ist das eigentlich?

White Space ist der bewusste Einsatz von Freiraum in einem Layout. Der Raum muss nicht weiß sein – auch farbige Hintergründe, Zwischenräume und Abstände zählen dazu. Wichtig ist: Diese Flächen tragen aktiv zur Gestaltung bei, statt „ungenutzter Platz“ zu sein.

Arten von White Space: Mikro- und Makroabstände

White Space wird grob in zwei Ebenen unterteilt:

• Mikro-White-Space: kleine Abstände, z. B. Zeilenabstand im Text, Abstand zwischen Icon und Label, Padding im Button.
• Makro-White-Space: große Abstände, z. B. Ränder um ganze Sektionen, Abstand zwischen Header und Hauptinhalt, Luft um ein Hero-Element.

Beide Ebenen wirken zusammen. Zu enge Mikroabstände machen Text schwer lesbar. Zu wenig Makroabstand lässt Seiten gedrängt und anstrengend wirken.

Warum White Space kein „verschenkter Platz“ ist

In vielen Projekten entsteht Druck, „alles Above the Fold“ (im ersten sichtbaren Bereich) unterzubringen. Dabei zeigt sich in Nutzertests immer wieder: Ein klar strukturierter, luftiger erster Eindruck wirkt professioneller und lädt zum Scrollen ein.

White Space:

• steigert Lesbarkeit und Verständnis,
• schafft Hierarchie in Überschriften und Absätzen,
• lenkt Aufmerksamkeit auf wichtige Elemente wie CTAs,
• reduziert kognitive Last (mentale Anstrengung beim Verarbeiten von Informationen).

Layout-Grundlagen: Raster, Spalten und Abstände planen

Statt „nach Gefühl“ zu rücken, hilft ein klares Raster. Ein konsistentes System spart Zeit, erleichtert die Zusammenarbeit mit Entwicklern und sorgt für ein ruhiges Gesamtbild.

Ein Grundraster für Weblayouts aufbauen

Ein gängiger Startpunkt für Desktop-Layouts sind 12 Spalten. Auf dieser Basis werden Inhalte ausgerichtet und White Space geplant. In Tools wie Figma oder Sketch lassen sich Grid-Systeme als Layout-Gitter anlegen.

Typischer Aufbau für einen Content-Bereich:

• Maximale Breite des Inhaltsbereichs, z. B. 1100–1280 px
• 12 Spalten mit gleichmäßigem Abstand (Gutter)
• Innenabstände zum Browserrand (Margins), z. B. 24–40 px

Diese Struktur hilft, White Space nicht zufällig, sondern systematisch zu verteilen.

Vertikale Abstände: Rhythmus statt Zufallswerte

Besonders wichtig für Lesbarkeit ist der vertikale Rhythmus. Gemeint ist die Wiederholung bestimmter Abstandsgrößen zwischen Elementen: z. B. zwischen Überschrift und Text, zwischen Abschnitten, Cards oder Listen.

Bewährt hat sich ein abgestuftes System (Scale), etwa mit Werten wie 4–8–12–16–24–32–48–64 px. Diese Werte können über Design-Token in einem Designsystem konsistent im ganzen Projekt genutzt werden. Wie sich einheitliche Größen systematisch planen lassen, zeigt der Artikel zu Spacing im Designsystem.

So geht’s: Abstände im Layout definieren

• Ein kleines Set an Abständen festlegen (z. B. 8, 16, 24, 32, 48 px).
• Zu jedem Abstand eine Funktion definieren (z. B. 8 px = Innenabstand in Buttons, 16 px = Abstand zwischen Textzeilenblöcken).
• Alle anderen Abstände an diese Skala anlehnen, statt beliebige Werte wie 13 oder 27 px zu nutzen.
• In Figma oder Sketch diese Abstände als Komponenten oder Styles (z. B. Auto-Layout, Spacing-Tokens) anlegen.

White Space gezielt für bessere Lesbarkeit einsetzen

White Space und Typografie gehören untrennbar zusammen. Selbst eine gute Schrift wirkt unruhig, wenn Zeilen und Absätze zu eng stehen.

Zeilenabstand, Zeilenlänge und Absätze

Für Fließtext gelten einige praxiserprobte Richtlinien:

• Zeilenlänge: ungefähr 55–80 Zeichen pro Zeile für Desktop.
• Zeilenabstand (Line-Height): meist 130–150 % der Schriftgröße.
• Absatzabstand: etwas größer als der Zeilenabstand, damit neue Gedankenblöcke sichtbar werden.

Wer sich tiefer mit Typografie im Interface-Design beschäftigen möchte, findet im Beitrag zu Typografie im Designsystem ausführliche Beispiele und Wertebereiche.

White Space um Buttons und interaktive Elemente

Buttons, Formulare und Navigationselemente brauchen genügend Luft, damit sie als einzeln klickbare Ziele wahrgenommen werden und sich nicht gegenseitig im Weg stehen. Hier spielen drei Dinge zusammen:

• Innenabstand (Padding) im Element selbst,
• Abstand zu benachbarten Elementen (Margin),
• tatsächliche Klickfläche (z. B. mindestens 40×40 px bei Touch).

Diese Abstände sind kein Luxus: Sie verhindern Fehleingaben, reduzieren Frust und tragen zur Barrierefreiheit (Accessibility) bei.

Whitespace für visuelle Hierarchie nutzen

Elemente mit mehr Freiraum wirken wichtiger. Das lässt sich gezielt nutzen:

• Haupt-CTA (z. B. „Jetzt starten“) mit mehr Luft und klarer Positionierung versehen.
• Wichtige Infos wie Preise oder Kernaussagen mit zusätzlichen Abständen von Nebentext absetzen.
• Gruppen bilden: Dinge, die zusammengehören, rücken enger zusammen; Dinge, die unterschiedlich sind, erhalten mehr Abstand.

Responsive White Space: Abstände auf allen Screens im Griff

Was auf einem großen Desktop-Monitor großzügig wirkt, kann auf dem Smartphone schnell zu viel werden. Umgekehrt dürfen Inhalte auf kleinen Screens nicht zu eng gepackt sein.

Abstände für Mobile, Tablet und Desktop planen

Eine einfache Herangehensweise ist, Abstände pro Breakpoint zu definieren. Zum Beispiel:

• Mobile: geringere horizontale Ränder (z. B. 16 px), aber ausreichend vertikaler Abstand zwischen Elementen.
• Tablet: etwas breitere Ränder, angepasste Zeilenlänge.
• Desktop: großzügigere Abstände, klare Sections mit Luft dazwischen.

Statt überall individuelle Werte zu vergeben, empfiehlt sich eine skalierende Logik, etwa: mobile Base-Spacing = 8 px, Tablet = 10 px, Desktop = 12 px. Auf dieser Basis können alle Abstände multipliziert werden (2×, 3×, 4× etc.).

White Space im Code umsetzen

Im Frontend werden Abstände meist über CSS-Margin und -Padding umgesetzt. Es lohnt sich, ein klar benanntes System aufzubauen, z. B. Utility-Klassen wie .spacing-xs, .spacing-sm, .spacing-md usw. oder CSS-Variablen wie --space-1, --space-2, --space-3.

Entwickler profitieren, wenn das Designsystem konkrete Tokens vorgibt, z. B.:

• --space-1 = 4px
• --space-2 = 8px
• --space-3 = 12px
• --space-4 = 16px

Diese Werte sollten mit den im Design-Tool verwendeten Abständen übereinstimmen. Wie der Übergang vom Layout in den Code gelingt, erklärt ausführlich der Beitrag zum Design-Handoff aus Figma.

White Space in Figma, Sketch & Co. – praktische Workflows

Moderne Design-Tools bieten Funktionen, mit denen White Space systematisch gesteuert und später leicht angepasst werden kann.

Auto-Layout und intelligente Abstände in Figma nutzen

In Figma lassen sich mit Auto-Layout Container bauen, die den Abstand zwischen Elementen automatisch verwalten. Vorteile:

• Ändert sich ein Wert (z. B. vertikaler Abstand von 16 auf 20 px), passt sich die gesamte Komponente an.
• Komplexe Elemente wie Cards, Listen oder Navigationsleisten lassen sich mit wenigen Klicks umstrukturieren.
• Design-Tokens für Abstände können als Basis dienen, sodass der White Space immer zum System passt.

Ähnliche Funktionen gibt es in Sketch (Smart Layout) und anderen Tools. Wichtig ist, von Anfang an strukturiert zu arbeiten, statt Elemente nur per Drag & Drop zu verschieben.

Komponentenbibliothek mit Abstandsvorgaben

Wer regelmäßig Websites oder Apps gestaltet, profitiert enorm von einer eigenen Komponentenbibliothek. Sinnvoll ist es, in den Komponenten definierte Abstände mitzugeben:

• Buttons mit festem Innenabstand und definierter Mindestbreite,
• Cards mit klaren Innen- und Außenabständen,
• Formularelemente mit festen vertikalen Abständen zwischen Label, Feld und Fehlermeldung.

Auf diese Weise bleibt der White Space über alle Seiten hinweg konsistent – ein wichtiger Baustein für ein stabiles Designsystem.

Checkliste: Häufige White-Space-Probleme und schnelle Fixes

Viele UI-Probleme lassen sich auf schlecht geplanten White Space zurückführen. Eine kurze Überprüfung deckt typische Stolpersteine auf.

Mini-Ratgeber: White Space in bestehenden Layouts verbessern

• Textblöcke zu dicht? – Zeilenabstand leicht erhöhen, maximale Zeilenlänge prüfen, Absatzabstand vergrößern.
• Seite wirkt unruhig? – Überflüssige Trennlinien entfernen, stattdessen mehr Luft zwischen Abschnitten lassen.
• CTA geht unter? – Mehr Abstand nach oben und unten, konkurrierende Buttons im sichtbaren Bereich reduzieren.
• Formulare anstrengend? – Genug Abstand zwischen Feldern einbauen, Labels eindeutig den Feldern zuordnen.
• Mobile Version gequetscht? – Ränder links und rechts prüfen, Tippflächen vergrößern, unnötige Elemente ausblenden oder umsortieren.

White Space und Conversion: Ruhe zahlt sich aus

Gut eingesetzter White Space ist mehr als eine Designentscheidung – er hat direkten Einfluss auf die Nutzung und den Erfolg einer Website. Besonders bei Landingpages und Shops macht sich das bemerkbar.

Weniger Ablenkung, klarere Entscheidung

Ein klarer visueller Fokus hilft Nutzerinnen und Nutzern, Entscheidungen zu treffen: Ein Angebot verstehen, einen Plan vergleichen, einen Button klicken. Das funktioniert nur, wenn der Blick nicht an jeder Ecke hängenbleibt.

Beim Optimieren von Produktseiten spielt White Space daher eine Schlüsselrolle – etwa beim Abstand von Produktbild, Titel, Preis und Call-to-Action. Wie sich Struktur und Inhalte im Shop gezielt verbessern lassen, zeigt der Beitrag zu optimierten WooCommerce-Produktseiten.

White Space testen: A/B-Tests und Nutzungsdaten

Ob ein ruhigeres Layout tatsächlich besser funktioniert, lässt sich messen. A/B-Tests oder Click-Tracking zeigen, ob:

• Buttons häufiger geklickt werden,
• Textbereiche länger gelesen werden,
• Formulare häufiger vollständig ausgefüllt werden.

Die Kombination aus klaren Designprinzipien und echten Nutzerdaten ist ideal, um White Space nicht nur „schön“, sondern wirkungsvoll zu gestalten.

So geht’s: In 5 Schritten zu mehr Klarheit im Layout

• Bestehende Seite analysieren: Wo wirkt es gequetscht? Wo verliert der Blick die Orientierung?
• Ein einfaches Abstands-System festlegen (z. B. 8er-Skala) und als Grundlage dokumentieren.
• Wichtige Bereiche priorisieren: Welche Inhalte brauchen mehr Luft, damit sie wirken?
• Layout in Figma oder Sketch mit Auto-Layout/Smart Layout nachrüsten, damit zukünftige Anpassungen leichter fallen.
• Änderungen mit Nutzern testen oder per Analytics überprüfen und bei Bedarf feinjustieren.

Quellen

• Langjährige Praxis im UI/UX-Design und Aufbau von Designsystemen für Web- und App-Projekte.
• Erfahrungen aus Nutzertests, A/B-Tests und Conversion-Optimierung in verschiedenen Branchen.