Web

Weißraum im Webdesign: Warum verkauft freie Fläche besser?

Talha Aslan 17 Minuten Lesezeit 1 Aufrufe

Kurze Antwort

Was ist Weißraum im Webdesign?

Weißraum ist die freie Fläche, die Sie auf einer Webseite bewusst zwischen Elementen lassen. Er muss nicht weiß sein; er hat die Farbe des Hintergrunds. Weißraum macht Text lesbarer, gruppiert zusammengehörige Inhalte und lenkt den Blick Ihrer Besucher zur Schaltfläche, die zum Kauf oder zur Angebotsanfrage führt.

Alle Details und Beispiele finden Sie weiter unten im Beitrag

Im Englischen heißt das Prinzip "whitespace" oder "negative space". Wir bei Talha Aslan und Team behandeln Weißraum als Werkzeug für das Layout, nicht als Dekoration. Denn wer eine Seite öffnet, erfasst zunächst das Ganze. Danach bleibt der Blick an einem Punkt hängen. Diesen Punkt bestimmt meist nicht die Farbe oder die Größe, sondern die freie Fläche um das Element herum.

In diesem Leitfaden erklären wir Makro und Mikroweißraum, Zeilenabstand, den Raum um Buttons, das 8 Pixel Raster und die Besonderheiten auf dem Smartphone. Außerdem haben wir die häufigsten Fehler in einer Tabelle gesammelt. Am Ende finden Sie zudem eine Checkliste für Ihre eigene Website.

Warum verkauft Weißraum?

Weißraum verkauft nicht von allein. Allerdings beseitigt er Hürden, die zwischen Besuchern und einer Entscheidung stehen. Auf einer überladenen Seite wissen Menschen nicht, wohin sie schauen sollen, deshalb verschieben sie die Entscheidung. Freie Fläche trennt dagegen die Optionen und macht jede einzeln bewertbar.

Stellen Sie sich zum Beispiel eine Leistungsseite mit Überschrift, drei Vorteilen, einem Kundenzitat und einem Angebotsbutton vor. Kleben diese Elemente aneinander, findet das Auge keinen Halt. Mit genügend Abstand dazwischen liest man dagegen der Reihe nach. Zunächst versteht der Besucher Ihr Angebot. Dann sieht er, warum er Ihnen vertrauen kann. Schließlich erreicht er den Button.

Zudem beeinflusst Raum die Wahrnehmung von Qualität. Denken Sie an Schaufenster: Hochwertige Produkte stehen meist mit viel Abstand, im Wühltisch liegen Waren übereinander. Eine Webseite sendet ein ähnliches Signal. Ein ruhiges, luftiges Layout sagt: Dieses Unternehmen weiß, was es tut.

Kurz gesagt wirkt Weißraum indirekt, aber deutlich auf den Umsatz. Er erleichtert das Lesen, bündelt die Aufmerksamkeit und stützt das Vertrauen. Jeder dieser drei Effekte senkt also eine Hürde auf dem Weg zur Conversion.

Was unterscheidet Makroweißraum von Mikroweißraum?

Makroweißraum ist die Fläche zwischen großen Blöcken der Seite. Dazu gehören Abstände zwischen Sektionen, die Seitenränder und der Raum zwischen Herobereich (dem Begrüßungsblock ganz oben) und der ersten Inhaltssektion. Makroweißraum bestimmt den Rhythmus der gesamten Seite.

Mikroweißraum liegt dagegen in und zwischen kleinen Elementen. Zeilenabstand, Zeichenabstand, der Abstand zwischen Listenpunkten, der Innenabstand (Padding) eines Buttons und die Distanz zwischen Formularbeschriftung und Feld zählen dazu. Er entscheidet über Lesbarkeit und Tippkomfort.

MerkmalMakroweißraumMikroweißraum
Wo?Sektionen, Spalten, SeitenränderZeilen, Buchstaben, Buttons, Formularfelder
WirkungRhythmus, Hierarchie, erster EindruckLesbarkeit, Tippkomfort
Zu wenigDie Seite wirkt wie ein einziger BlockText ermüdet, Fehlklicks nehmen zu
Zu vielZusammengehörige Inhalte wirken getrenntZeilen zerfallen, das Auge verliert den Faden

Daher stimmt gutes Design beide Ebenen gemeinsam ab. Wenn Sie viel Makroweißraum lassen, aber den Mikroweißraum vernachlässigen, wirkt die Seite luftig, der Text bleibt dennoch anstrengend.

Wie beeinflusst Weißraum die Lesbarkeit?

Lesbarkeit hängt zum großen Teil vom Mikroweißraum ab. Stehen Zeilen zu eng, rutscht das Auge beim Sprung vom Zeilenende zum nächsten Zeilenanfang ab. Ohne Abstand zwischen Absätzen entsteht eine Textwand, und viele Leser geben auf, bevor sie anfangen.

Dafür gibt es auch einen offiziellen Maßstab. Der Accessibility Standard WCAG des W3C enthält das Erfolgskriterium Textabstände (1.4.12). Es verlangt, dass kein Inhalt verloren geht, wenn Nutzer die Zeilenhöhe auf mindestens das 1,5 fache der Schriftgröße und den Absatzabstand auf das Doppelte erhöhen. Das heißt, das Kriterium schreibt Ihnen keinen festen Abstand vor. Stattdessen soll Ihr Layout halten, wenn jemand die Abstände vergrößert. Trotzdem liefern diese Werte einen guten Ausgangspunkt für Fließtext.

Konkret liest sich 16 Pixel Fließtext mit etwa 24 Pixel Zeilenhöhe in den meisten Schriften angenehm. Überschriften brauchen dagegen eine engere Zeilenhöhe, denn große Schrift bringt ihren eigenen Raum mit. Wie die Schriftwahl diese Balance beeinflusst, erklären wir in unserem Leitfaden zur Webtypografie.

Wenn Sie außerdem messen möchten, wie schwer Ihr Text zu lesen ist, nutzen Sie unser Werkzeug zum Prüfen der Lesbarkeit. Es bewertet die Satzlänge; der Weißraum entscheidet dann, wie diese Sätze auf dem Bildschirm atmen.

Wie stellen Sie Zeilenlänge und Absatzabstand richtig ein?

Die Zeilenlänge ist der am häufigsten übersehene Teil des Weißraums. Läuft Text auf einem breiten Desktop über die volle Breite, entstehen sehr lange Zeilen. Am Zeilenende finden Leser dann den Anfang der nächsten Zeile nur schwer. Deshalb begrenzen Sie die Textspalte, und links wie rechts entsteht natürlicher Raum.

Typografische Quellen nennen für Fließtext oft etwa 45 bis 75 Zeichen pro Zeile. Betrachten Sie das als Startwert, nicht als feste Regel. Testen Sie also einige Absätze in Ihrer eigenen Schrift und achten Sie darauf, wann Ihr Auge ermüdet.

Beim Absatzabstand hilft eine einfache Regel: Der Abstand zwischen Absätzen soll deutlich größer sein als der Zeilenabstand. So spürt der Leser, dass ein neuer Gedanke beginnt. Liegen beide Werte zu nah beieinander, liest sich der Text weiterhin wie ein Block.

  • Ziehen Sie die Textspalte nicht über den ganzen Bildschirm, sondern begrenzen Sie ihre Breite.
  • Halten Sie die Zeilenhöhe im Fließtext bei etwa dem 1,5 fachen der Schriftgröße.
  • Wählen Sie den Absatzabstand deutlich größer als den Zeilenabstand.
  • Setzen Sie jede Überschrift näher an den folgenden Absatz als an den vorherigen.

Der letzte Punkt ist besonders wichtig. Hat eine Überschrift oben mehr Raum als unten, erkennt der Leser sofort, zu welchem Text sie gehört.

Wie hebt Weißraum einen CTA Button hervor?

Ein CTA Button (Call to Action, Handlungsaufforderung) bittet Besucher um die gewünschte Aktion. Damit er auffällt, ändern die meisten zuerst die Farbe. Allerdings geht ein Button ohne Raum um sich herum in der Menge unter, egal wie kräftig er leuchtet.

Das Auge wandert von selbst zu dem Element, das von freier Fläche umgeben ist. Deshalb wirkt großzügiger Abstand um den Angebotsbutton oft stärker als ein größerer Button. Zudem sollten Sie keinen zweiten oder dritten Link direkt daneben platzieren. Mehrere Optionen auf engem Raum teilen die Aufmerksamkeit genau im Moment der Entscheidung.

Beispielszenario: Auf der Startseite eines Architekturbüros stehen "Projekte", "Über uns" und "Angebot anfordern" nebeneinander, nur wenige Pixel voneinander entfernt. Alle drei wirken gleich wichtig. Setzen Sie "Angebot anfordern" dann in eine eigene Zeile mit viel Raum darüber und darunter, ist das eigentliche Ziel der Seite sofort klar.

Ausführlichere Beispiele zu Buttontext und Platzierung finden Sie in unserem Beitrag mit CTA Button Beispielen. Hier geht es uns um einen Punkt: Selbst ein Button mit passender Farbe und gutem Text bleibt schwach, wenn er keinen Raum zum Atmen hat. Andererseits gehört Kontrast ebenfalls dazu; das erklären wir im Beitrag über Kontrast im Webdesign.

Was ist das 8 Pixel Raster und wie richten Sie es ein?

Beim 8 Pixel Raster wählen Sie jeden Abstand auf der Seite aus Vielfachen von 8: 8, 16, 24, 32, 48, 64 und so weiter. Für sehr kleine Details ergänzen viele Teams zudem einen Zwischenschritt von 4 Pixeln. Ziel ist, dass niemand im Team Abstände nach Augenmaß schätzt.

Warum gerade 8? Weil sich die Zahl sauber halbieren und vierteln lässt und gut zu gängigen Bildschirmauflösungen passt. Der eigentliche Nutzen kommt allerdings aus der Konsistenz, nicht aus der Zahl. Verwenden alle Seiten dieselbe kleine Skala, wirkt die Website wie aus einem Guss, auch wenn verschiedene Personen daran arbeiten.

  1. Wählen Sie zunächst eine kurze Skala, zum Beispiel 4, 8, 16, 24, 32, 48, 64 und 96 Pixel.
  2. Geben Sie dann jedem Wert eine Aufgabe: 8 für den Buttoninnenabstand, 16 zwischen Listenpunkten, 32 zwischen Karten, 64 zwischen Sektionen.
  3. Legen Sie diese Werte danach als CSS Variablen an und verwenden Sie in der Designdatei dieselben Namen.
  4. Brauchen Sie eine Zahl außerhalb der Skala, hinterfragen Sie zuerst das Layout; meist liegt das Problem dort.
  5. Erfinden Sie schließlich keine eigene Skala für Mobilgeräte, sondern nutzen Sie kleinere Stufen derselben Skala.

Dieser Ansatz ist ein Grundbaustein jedes Designsystems. Wie er mit Farben, Schriften und Komponenten zusammenspielt, lesen Sie in unserem Beitrag Was ist ein Design System.

Wie nutzen Sie Weißraum auf dem Smartphone?

Weil Smartphonebildschirme schmal sind, kürzt man Abstände zuerst. Doch auf dem Smartphone ist Weißraum sogar wichtiger als auf dem Desktop. Denn Menschen tippen mit dem Finger, und ein Finger trifft deutlich ungenauer als ein Mauszeiger.

Das WCAG Kriterium Zielgröße (Minimum), 2.5.8, verlangt, dass Touchziele mindestens 24 mal 24 CSS Pixel groß sind oder genügend Abstand zueinander haben. Damit verknüpft es Abstand direkt mit Barrierefreiheit. Quetschen Sie zwei kleine Links nebeneinander, nehmen Fehltipps zu. Die Ausnahmen und Details prüfen Sie am besten auf der offiziellen Seite.

Auf dem Smartphone dürfen Sie den Makroweißraum etwas verringern, da der Bildschirm ohnehin einspaltig ist und Sektionen untereinander stehen. Den Mikroweißraum sollten Sie dagegen nicht kürzen, vor allem nicht bei Buttons und Formularfeldern. Auch der Seitenrand zählt. Klebt Text am Bildschirmrand, wird das Lesen mühsam und die Seite wirkt gedrängt.

Wie Sie wichtige Elemente in die bequeme Reichweite des Daumens setzen, zeigt unser Leitfaden zur Daumenzone. Für einen schnellen Check Ihrer Seiten nutzen Sie außerdem unseren Mobile Friendly Test.

Warum ist "leerer Raum ist verschwendeter Raum" ein Irrtum?

Viele Unternehmer halten jeden freien Zentimeter auf dem Bildschirm für eine verpasste Verkaufschance. Also fügen sie einen Aktionsbalken, einen zweiten Slider und eine weitere Linkliste hinzu. Am Ende ist die Seite voll, doch keine Botschaft sticht heraus.

Der Irrtum stammt aus der Logik der gedruckten Zeitung. Dort kostet Papier Geld, deshalb füllen Redaktionen jeden Zentimeter. Im Web ist Scrollen dagegen kostenlos. Besucher scrollen gern, solange sie in jeder Sektion verstehen, worum es geht.

Außerdem heißt Weißraum nicht, Inhalte zu streichen. Sie können dieselbe Menge an Information besser gruppieren und mit mehr Raum zeigen. Zum Beispiel macht es eine Liste mit zehn Funktionen leichter, wenn Sie sie unter drei Überschriften ordnen, ohne einen einzigen Punkt zu löschen.

Natürlich hat auch Raum Grenzen. Werden Abstände zwischen Sektionen zu groß, glauben Besucher womöglich, die Seite sei zu Ende. Daher setzen Sie Weißraum als Sprache für Beziehungen ein, nicht als ziellose Leere. Den Unterschied zwischen einem minimalistischen Stil und Weißraum erklären wir im Beitrag Was ist minimalistisches Webdesign; Minimalismus ist ein Stil, Weißraum dagegen ein Werkzeug für jeden Stil.

Wie gruppieren Sie Inhalte mit dem Gesetz der Nähe?

Das Gesetz der Nähe besagt, dass unser Gehirn nah beieinanderliegende Elemente als Gruppe wahrnimmt. Das ist die stärkste Aufgabe des Weißraums. Ohne Linien, Kästen oder Farben zeigen Sie, welche Information zu welcher gehört.

Auf einer Produktkarte sollten zum Beispiel Name, Preis und Kurzbeschreibung eng beieinanderstehen. Der Abstand zur nächsten Karte muss dagegen deutlich größer sein. Kehrt sich dieses Verhältnis um, ordnen Besucher einen Preis womöglich dem Nachbarprodukt zu. Solche Verwechslungen kosten direkt Umsatz.

Wählen Sie Abstände deshalb nach einer einfachen Regel: Der Abstand innerhalb einer Gruppe ist immer kleiner als der Abstand zwischen Gruppen. Mit dem 8 Pixel Raster nutzen Sie also etwa 8 oder 16 Pixel innerhalb einer Karte und 32 Pixel zwischen Karten.

Dieses Prinzip spart zudem Rahmen. Die meisten Seiten brauchen keinen Kasten um jede Sektion. Der richtige Abstand erledigt die Arbeit einer Linie auf ruhigere Weise. Somit wirkt die Seite leichter, und das visuelle Rauschen sinkt.

Wie setzen Sie Weißraum in Formularen ein?

In Formularen zahlt sich Weißraum am direktesten aus. Ein Angebotsformular, ein Terminformular oder ein Kontaktformular ist der Moment der Conversion. Eine kleine Unklarheit kann Sie hier die Anfrage kosten.

Die Nielsen Norman Group erklärt in ihrem Artikel über Weißraum im Formulardesign, dass eine Beschriftung nah an ihrem Feld stehen sollte, während der Raum zwischen Feldgruppen größer ausfällt. Das ist das Gesetz der Nähe im Formular. Schwebt eine Beschriftung weit weg von ihrem Feld, müssen Nutzer raten, was zusammengehört.

  • Setzen Sie jede Beschriftung direkt und nah über ihr Feld.
  • Halten Sie zusammengehörige Felder wie Vor und Nachname als Gruppe zusammen und lassen Sie zwischen Gruppen mehr Raum.
  • Reservieren Sie vorab Platz für Fehlermeldungen, damit das Formular beim Erscheinen nicht springt.
  • Trennen Sie den Absendebutton mit einem klaren Abstand vom letzten Feld.

Mehr zu Anzahl, Reihenfolge und Text von Formularfeldern lesen Sie in unserem Beitrag über B2B Landingpages, der auch den Aufbau von Anfrageformularen behandelt.

Wie hängen Abstände und Layoutverschiebungen zusammen?

Abstand ist nicht nur eine optische Entscheidung, er hat auch eine technische Seite. Reserviert die Seite beim Laden keinen Platz für ein Bild, einen Werbeplatz oder einen Cookiehinweis, rutscht der Inhalt nach unten. Google misst diese Bewegung mit der Kennzahl CLS (Cumulative Layout Shift).

Der CLS Leitfaden auf web.dev empfiehlt, Bildern und spät ladenden Elementen ihre Maße vorab zu geben. In der Sprache des Designs heißt das: Sie planen den Raum, bevor die Seite lädt. Steht die Fläche für Bild, Video oder Einbettung von Anfang an fest, bleibt der Text beim Lesen ruhig.

Beispielszenario: Auf einer Produktseite lädt ein Aktionsbanner verspätet direkt über dem Preis. Der Besucher will gerade "In den Warenkorb" antippen, dann erscheint das Banner und schiebt den Button nach unten. Folglich tippt er auf das falsche Element. Die Lösung besteht darin, dem Banner einen festen Platz zu geben oder es aus dem Inhaltsfluss zu nehmen.

Kurz gesagt tut geplanter Weißraum dem Auge und den Messwerten gut. Google beschreibt seine Signale zur Nutzererfahrung in der Dokumentation zur Page Experience in Search Central, und Layoutverschiebungen gehören dazu.

Welche Fehler beim Weißraum passieren am häufigsten?

Die folgende Tabelle zeigt die Abstandsfehler, die uns in der Praxis am häufigsten begegnen. Jeder lässt sich leicht erkennen, und die Korrektur braucht meist nur wenige CSS Werte.

FehlerSymptomKorrektur
Zufällige AbständeJede Sektion hat einen anderen AbstandEine einzige Abstandsskala festlegen
Gleicher Innen und AußenabstandGruppen verschwimmen ineinanderInnerhalb von Gruppen enger, zwischen Gruppen weiter
Zu enge ZeilenhöheLanger Text ermüdet, Leser überspringen ihnZeilenhöhe auf etwa das 1,5 fache erhöhen
Text über volle BreiteSehr lange Zeilen am DesktopDer Textspalte eine maximale Breite geben
Links direkt am ButtonDer CTA fällt nicht aufRaum um den Button freihalten, Nebenlinks entfernen
Text am Rand auf dem SmartphoneDie Seite wirkt gedrängtSeitenrand beibehalten
Riesige Abstände zwischen SektionenBesucher denken, die Seite sei zu EndeEinen Teil der nächsten Sektion sichtbar lassen

Diese Tabelle ist ein Anfang. Allerdings kommen Abstandsfehler selten allein; meist zeigen sich drei oder vier auf derselben Seite. Deshalb empfehlen wir, sie nicht einzeln, sondern über eine gemeinsame Skala zu beheben.

Wie finden Sie die Balance auf Startseite und Leistungsseite?

Startseite und Leistungsseite haben verschiedene Aufgaben, also brauchen sie auch eine andere Balance. Die Startseite lenkt; sie beantwortet die Frage "Wohin soll ich gehen?" Eine Leistungsseite überzeugt dagegen und führt zur Angebotsanfrage.

Auf der Startseite steht der Makroweißraum im Vordergrund. Jede Sektion trägt eine Botschaft, und große Abstände halten diese Botschaften auseinander. Eine Leistungsseite enthält dagegen mehr Text. Daher verdient dort der Mikroweißraum, also Zeilenhöhe und Absatzabstand, mehr Aufmerksamkeit.

Beispielszenario: Ein Unternehmen für Industriereinigung hat eine Leistungsseite mit drei Paketen, Prozessschritten und häufigen Fragen. Zeigen Sie die Pakete als Karten, die Schritte als nummerierte Liste und die Fragen als Akkordeon, bekommt jeder Block seine eigene Abstandsregel. Somit bleibt selbst eine lange Seite gut überfliegbar.

Wenn Sie diese Balance nicht selbst austarieren möchten, können Sie ein Angebot für unser Webdesign anfordern, bei dem wir Abstandsskala und Seitenrhythmus von Anfang an planen. Zunächst legen wir die Zielaktion fest, dann bauen wir den Raum um sie herum.

Wie arbeiten Bilder und Weißraum zusammen?

Bilder und Weißraum sind keine Gegner. Allerdings entfernen Sie den Raum um ein Bild, wenn Sie es von Rand zu Rand ziehen. Das kann gut funktionieren; zum Beispiel erzeugt ein großes Foto im Herobereich einen starken ersten Eindruck.

In Inhaltssektionen wirkt ein Rahmen aus freiem Raum um das Bild dagegen meist besser. Der Abstand zwischen Bild und danebenstehendem Text sollte deutlich größer sein als dessen Zeilenabstand. Sonst scheint der Text ins Bild zu fließen.

Auch der Raum im Foto selbst zählt. Ein Foto mit ruhigem Hintergrund und Luft um das Motiv erlaubt eine Überschrift darauf. Setzen Sie Text auf ein unruhiges Foto, sinkt die Lesbarkeit, und Sie brauchen dann oft halbtransparente Kästen.

Halten Sie außerdem Bildunterschriften nah am Bild und klar getrennt vom nächsten Absatz. Dieses Detail hilft Lesern, jede Unterschrift dem richtigen Bild zuzuordnen, vor allem auf Projekt und Referenzseiten. Ebenso bringt derselbe Ausschnitt mit demselben Rand bei Produktfotos eine Katalogseite in einen ruhigen Rhythmus. Wie Größe, Farbe und Raum sich gegenseitig ausgleichen, zeigt unser Beitrag zum visuellen Gewicht im Webdesign.

Wie funktioniert Weißraum in einem dunklen Design?

Auf Websites mit dunklem Hintergrund erfüllt Weißraum dieselbe Aufgabe; nur seine Farbe ändert sich. Allerdings wirkt heller Text auf dunklem Grund für das Auge etwas greller. Deshalb macht es das Lesen in einem dunklen Design oft angenehmer, Zeilenhöhe und Zeichenabstand minimal zu öffnen.

In dunklen Designs greifen Gestalter zudem gern zu Linien oder Schatten, um Karten zu trennen. Auch hier hilft das Gesetz der Nähe. Sobald zwischen den Karten genug Raum liegt, brauchen Sie keine Rahmen mehr, und die Seite wirkt ruhiger.

Beispielszenario: Ein Softwareunternehmen gestaltet seine Produktseite dunkel und setzt jede Funktion in einen dünn umrandeten Kasten. Dann entfernt es die Rahmen und vergrößert den Abstand zwischen den Kästen. Folglich wirkt die Seite leichter, und die Funktionsüberschriften lesen sich klarer. Anders gesagt bleiben die Regeln für Abstände im dunklen Design gleich; Sie achten nur etwas stärker auf Kontrast und Helligkeit.

Was gehört in eine Checkliste für Weißraum?

Nutzen Sie die folgende Liste, bevor Sie eine neue Seite veröffentlichen oder eine bestehende prüfen. Jeder Punkt ist konkret genug für eine Prüfung in wenigen Sekunden.

  • Stammen alle Abstände auf der Seite aus derselben kleinen Skala?
  • Ist der Raum innerhalb jeder Gruppe kleiner als zwischen den Gruppen?
  • Liegt die Zeilenhöhe im Fließtext bei etwa dem 1,5 fachen der Schriftgröße?
  • Hebt sich der Absatzabstand klar vom Zeilenabstand ab?
  • Haben Textzeilen am Desktop eine angenehme Länge?
  • Hat der wichtigste CTA Button freien Raum um sich, ohne konkurrierenden Link daneben?
  • Sind Touchziele auf dem Smartphone groß genug oder weit genug voneinander entfernt?
  • Haben Sie Platz für Bilder und spät ladende Bereiche reserviert?
  • Bleiben Abstände zwischen Sektionen klein genug, damit niemand das Seitenende vermutet?
  • Stehen Beschriftungen im Formular nah an ihren Feldern?

Wir empfehlen, diese Liste mit Ihrem Team zu teilen und sie bei jeder neuen Seite in derselben Reihenfolge abzuarbeiten. So folgen Entscheidungen über Abstände einer gemeinsamen Regel statt persönlichem Geschmack.

Wie testen Sie den Weißraum Ihrer bestehenden Website?

Der einfachste Test ist das Weichzeichnen. Machen Sie einen Screenshot, zeichnen Sie ihn in einem Bildprogramm leicht weich und schauen Sie, was heraussticht. Ist das Erste, was Sie sehen, nicht Ihre Hauptbotschaft oder Ihr Angebotsbutton, stimmt die Verteilung des Raums nicht.

Der zweite Test betrifft Zoom und Textabstände. Erhöhen Sie den Zoom im Browser und prüfen Sie, ob Text überläuft oder abgeschnitten erscheint. Genau deshalb ist das WCAG Kriterium zu Textabständen wichtig; Inhalte dürfen nicht kaputtgehen, wenn Nutzer die Abstände vergrößern.

Der dritte Test läuft auf einem echten Gerät. Bedienen Sie die Seite mit einer Hand auf Ihrem eigenen Smartphone und tippen Sie jeden Button mit dem Daumen an. Dort, wo Sie danebentippen, fehlt Mikroweißraum. Wiederholen Sie das zudem auf mindestens zwei Geräten unterschiedlicher Größe, denn auf kleinen Bildschirmen zeigen sich Probleme deutlicher.

Schauen Sie schließlich auf Verhaltensdaten. Heatmaps und Scrolltiefe zeigen, wo Besucher anhalten. Verlassen viele die Seite nach einer bestimmten Sektion, kann zu viel oder zu wenig Raum an dieser Stelle eine Ursache sein. Dennoch sollten Sie nicht auf Basis eines einzigen Werts entscheiden; wiederholen Sie dieselbe Messung nach der Änderung.

Wer sollte Weißraum planen, und wann?

Weißraum ist kein Feinschliff zum Schluss. Das beste Ergebnis erzielen Sie, wenn Sie die Abstandsskala zusammen mit der Seitenstruktur festlegen. Abstände, die später nur "für etwas mehr Luft" dazukommen, bleiben meist uneinheitlich.

Daher empfehlen wir diese Reihenfolge. Zunächst notieren Sie die eine Zielaktion der Seite. Danach ordnen Sie die Inhalte in Gruppen. Dann definieren Sie die Abstandsskala. Erst zum Schluss folgen visuelle Details. Somit wird Weißraum zum Werkzeug, das der Zielaktion dient.

Auch die Rollen im Team sollten klar sein. Die Gestalterin legt die Skala fest, der Entwickler überträgt sie als Variablen in den Code, und die Texterin hält Absätze in einer Länge, die zum Rhythmus passt. Bricht eine Person die Regel, füllt sich die Seite wieder.

Möchten Sie für Ihre Website ein Abstandssystem von Grund auf aufbauen oder bestehende Seiten mit diesem Blick überarbeiten lassen, erhalten Sie über unsere Seite zum Webdesign ein Angebot für Ihr Projekt. Wir bei Talha Aslan und Team behandeln Abstandsskala, mobiles Layout und Anfrageweg als Teile eines gemeinsamen Plans.

Häufig gestellte Fragen

Muss Weißraum wirklich weiß sein?
Nein, Weißraum muss nicht weiß sein. Der Hintergrund kann dunkel, farbig oder strukturiert sein; entscheidend ist die freie Fläche, die Sie bewusst zwischen Elementen lassen. Auf einer Website mit dunklem Design gelten dieselben Regeln. Abstandsskala, der Unterschied zwischen Raum innerhalb und zwischen Gruppen sowie die Zeilenhöhe funktionieren auf jedem Hintergrund gleich.
Macht Weißraum die Seite zu lang und vertreibt Besucher?
Nicht, wenn Sie ihn gut planen. Besucher scrollen bereitwillig, solange sie schnell verstehen, worum es in jeder Sektion geht. Probleme entstehen erst, wenn Abstände zwischen Sektionen zu groß werden, weil Besucher dann das Seitenende vermuten. Lassen Sie deshalb am unteren Bildschirmrand immer einen kleinen Teil der nächsten Sektion sichtbar.
Welche Zeilenhöhe ist ideal?
Einen einzigen exakten Wert gibt es nicht, doch etwa das 1,5 fache der Schriftgröße ist ein guter Startwert für Fließtext. Auch das WCAG Kriterium zu Textabständen erwartet, dass Nutzer diesen Wert einstellen können, ohne dass Inhalte kaputtgehen. Testen Sie engere Werte für Überschriften und etwas weitere für lange Absätze in Ihrer eigenen Schrift.
Ist das 8 Pixel Raster Pflicht?
Nein, Pflicht ist es nicht; wichtig ist eine konsistente Skala. Viele Teams wählen 8, weil sich die Zahl sauber teilen lässt und gut zu Bildschirmen passt. Sie können ebenso eine Basis von 4 oder 6 Pixeln nutzen. Der eigentliche Fehler sind zufällige Abstände nach Augenmaß in jeder Sektion, denn sie lassen die ganze Website unordentlich wirken.
Sollte man Abstände auf dem Smartphone verringern?
Teilweise ja. Große Abstände zwischen Sektionen dürfen Sie auf dem Smartphone etwas kürzen, weil der Bildschirm ohnehin einspaltig ist. Den Raum um Buttons, Links und Formularfelder sollten Sie dagegen nicht verkleinern. Ein Finger trifft ungenauer als eine Maus, und das WCAG Kriterium zur Zielgröße verlangt genug Größe oder Abstand für Touchziele.
Beeinflusst Weißraum die Suchmaschinenoptimierung?
Weißraum ist kein direkter Rankingfaktor. Er verbessert jedoch Lesbarkeit und Bedienbarkeit, und das hilft Besuchern, auf der Seite zu bleiben. Zudem senkt reservierter Platz für Bilder und spät ladende Elemente die Layoutverschiebung. Google erklärt die Nutzererfahrung in der Dokumentation von Search Central, deshalb sollten Sie beim Planen auch die technische Seite bedenken.
  • Weißraum
  • Webdesign
  • Abstände
  • Lesbarkeit
  • CTA
  • Mobiles Design
  • Designsystem
Teilen:
Talha Aslan

Google Partner und Experte für digitales Marketing. Seit 2012 praktisch in SEO, Google Ads, Webdesign und E-Commerce Projekten; jeder Beitrag hier stammt aus dieser Erfahrung.

Nächstes Projekt

Angebot für Ihr Projekt.

Ihre Anfrage geht direkt an Talha Aslan und Team: Strategie von Talha, Umsetzung durch ein erfahrenes Team. Wir melden uns am selben Tag und senden Umfang, Zeitplan und Preis innerhalb von 1 Werktag als schriftliches Angebot.