Was versteht man unter White Space?

“White Space” ist der Bereich zwischen den Designelementen. Er ist auch der Raum innerhalb einzelner Gestaltungselemente, einschließlich des Raums zwischen typografischen Glyphen (lesbaren Zeichen).

Trotz seines Namens muss der Weißraum nicht weiß sein. Er kann eine beliebige Farbe, Textur, Muster oder sogar ein Hintergrundbild sein.

Wir unterscheiden dabei zwischen zwei Arten von white space. Aktiver und passiver Weißraum.

Makroebene: Aktiver white space

Unter aktivem white space wird der Freiraum zwischen den Designelementen, wie Paragrafen oder Absätzen, verstanden. Sie geben der Website Struktur und rufen Harmonie bei den Besuchern hervor. Asymmetrische Aufteilungen auf Makroebene lassen das Design dynamischer wirken und organisieren den User Flow.

Mikroebene: Passiver white space

Passiver white space wird der Freiraum zwischen kleineren Bausteinen wie Wörtern und Zeilen sowie der freie Raum rund um Buttons oder Logos genannt. Solche Anpassungen auf der Mikroebene nehmen keine drastischen Veränderungen am Design vor. Vielmehr unterstützt die Wahl der richtigen Abstände das allgemeine Erscheinungsbild einer Website und kann durch kleine Akzentuierungen das Benutzererlebnis verbessern.

Wo und wie man Weißraum verwendet

Verwendung von Leerraum für CTAs (Call To Actions)

Gehe immer davon aus, dass der User nicht weiß, wohin er/sie als Nächstes scrollen oder klicken soll, und gestalte die Leerräume entsprechend. Die Idee an sich ist einfach: Wenn sich in der Nähe einer Schaltfläche auf einer Seite nichts befindet, bedeutet dies, dass diese Schaltfläche als nächstes angeklickt werden sollte.

Ist die Seite dagegen mit Elementen in der Nähe der Schaltfläche überlagert, würde der User die Schaltfläche aufgrund der Unordnung nicht richtig wahrnehmen.

Wie du oben sehen kannst, ist der zweite CTA anfälliger für Interaktionen als der Erste, da er nicht von Elementen rundherum verdeckt wird.

Weißraum für emotionale Reaktionen nutzen

Es gibt viele Möglichkeiten, im Design Emotionen zu wecken, z.B. durch Typografie, Farben und Bilder. Während alle diese Möglichkeiten nützlich sind, um zusätzliche Dramatik zu erzeugen, kann der Weißraum einer Seite wohl am meisten Dramatik und Emotionen verleihen, und das zu den geringsten Designkosten.

Wie hier zu sehen, verwendet Todoist weißen Raum um die Hauptüberschrift herum, was wiederum die Aufmerksamkeit auf das Hintergrundbild lenkt und dadurch positive Emotionen vermitteln soll. Zusätzlich wirkt es so aufgeräumter und der User ist nicht überfordert, wohin seine/ihre Aufmerksamkeit zuerst führen soll.

Bekämpfe den Drang, die Lücken füllen zu wollen

Als Designer - und als Menschen im Allgemeinen - neigen wir von Natur aus dazu, Räume mit "Zeug" zu füllen. Wenn wir einen größeren Schrank, eine größere Garage oder ein größeres Haus kaufen, dauert es selten lange, bis wir diesen neuen Raum gefüllt haben.

Diese Gewohnheit überträgt sich oft auch auf unsere Entwürfe. Wann immer wir einen leeren Bereich in unserem Entwurf sehen, denken wir: "Was kann ich dort hinzufügen?". Diese Denkweise kann für Designer ein Problem darstellen.

Anstatt dein Design mit Elementen zu füllen, solltest du den Ansatz verinnerlichen “weniger ist mehr”. Wenn du z.B. eine CTA einfügst, dann stelle sicher, dass du eine "sichere Zone" (leeren Raum) um sie herum schaffst. Denke immer daran, dass leerer Raum kein vergeudeter Raum ist.

Wer nutzt den white space effektiv?

Apple gilt als das Paradebeispiel für gut genutzten white space. Die Produkte wirken mit viel Weißraum noch hochwertiger und eleganter und lenken die volle Aufmerksamkeit auf die Artikel.

Hierbei wird deutlich, dass Apple neben dem passiven Weißraum auch stark auf aktiven Weißraum setzt. Direkt wahrnehmbar sind so nur zwei Elemente (2 IPhone 14). Zusätzlich lässt Apple zwischen den Absätzen viel Platz und schafft zusammen mit der Schriftgröße und Farben eine klare Hierarchie.

Apples Weißraum-Leitlinien sind nicht nur auf der Website sichtbar, auch im Store, bei der Verpackung der Produkte oder in der Architektur steckt viel freier Raum.

Fazit

Weißraum ist also nicht immer automatisch weiß, sondern der Teil in unseren Designs, in dem nichts passiert. Dies ist ein wesentliches Gestaltungsprinzip, das kein Designer übersehen sollte, da es darüber entscheidet, ob eine Seite gut nutzbar ist und ob ein bestimmtes Element die erforderliche Aufmerksamkeit erhält.

Wir haben gelernt, dass es zwei verschiedene Arten von Weißraum gibt (aktiv vs. passiv) und zwei unterschiedliche Größen (Mikro vs. Makro). Wir haben uns Benchmark-Unternehmen auf diesem Bereich angeschaut, die den white space bereits effektiv nutzen.

Also denke immer daran, weniger ist häufig mehr. Auch wenn der Kunde etwas anderes behauptet und es für effizienter hält, die Website mit Informationen zu überlagern, solltest du an den Comedian denken und mit dem richtigen Freiraum arbeiten.

Ich hoffe, diese Ideen helfen dir bei deinem nächsten Entwurf.