Gutes Design braucht Luft zum Atmen – Weißraum als Gestaltungselement

7. Mai 2015 at 18:20

Es ist in etwa vergleichbar mit dem Einkaufserlebnis in einem Geschäft, in dem möglichst viel Kleidung auf einen Kleiderständer gequetscht wurde und alles eng aneinander steht, so dass kaum ein Durchkommen ist. Durch den fehlenden Platz verliert man schnell den Überblick, weiß nicht, wo man zuerst suchen soll und das Einkaufen macht schon nach kurzer Zeit keinen Spaß mehr.

Ausreichend freie Fläche bzw. Weißraum ist auch ein wichtiger Bestandteil jedes guten Layouts – er wird benötigt, um Abstände zwischen Elementen zu schaffen, sorgt für Übersichtlichkeit und lässt dem Design Luft zum Atmen und Wirken. Leider wird dieses Gestaltungselement immer noch oft unterschätzt oder als „Platzverschwendung“ gesehen.

Die Farbe Weiß und der Begriff „Weißraum“ haben dabei erstmal nichts miteinander zu tun. Alle Elemente eines Entwurfs werden vom Weißraum umgeben. Dieser wird auch als „negativer Raum“ oder „Leerraum“ bezeichnet und ist der Freiraum zwischen den Elementen, ganz unabhängig von der farblichen Gestaltung. Die Schwierigkeit besteht darin, eine gute Balance zwischen Weißraum und Inhalt zu finden, ohne dass dieser auf der Website verloren aussieht.


Hierarchien schaffen und Elemente in den Vordergrund rücken

Durch das gezielte Einsetzen von Weißraum ist es möglich, den Fokus zuerst auf bestimmte Elemente wie z.B. eine Headline oder einen Teaser auf der Seite zu lenken, diese Elemente in den Vordergrund zu rücken und dadurch den Blick des Users zu führen. Das bedeutet natürlich nicht, dass Elemente die weniger wichtig sind, automatisch eng zusammen stehen sollten.

Gute Beispiele hierfür sind u.a. tutsplus.com oder adidas.de.

Auf store.apple.com/de wird sehr schön deutlich, wie Leerraum die Wirkung von Bildern unterstützt und das gesamte Layout edler erscheinen lässt. Dies ist vor allem bei der Gestaltung von Shops wichtig, bei denen der Fokus auf dem Produkt liegen und das Layout ein Gefühl von Hochwertigkeit erzeugen soll.

 

Makro-Weißraum vs. Mikro-Weißraum

Weißraum oder Leerraum lässt sich in zwei Hauptkomponenten unterteilen: Makro-Weißraum und  Mikro-Weißraum. Der Makro-Weißraum definiert den Raum zwischen den tragenden Elementen einer Komposition. Als Mikro-Weißraum bezeichnet man hingegen die Abstände zwischen einzelnen Bestandteilen innerhalb eines Elements, wie etwa zwischen Listen und ihren Elementen oder zwischen Überschriften.

Beides ist gleich wichtig für die Technik des Gestaltens mit Weißraum – die Schwierigkeit besteht darin, beim Blick auf das große Ganze während des Gestaltungsprozesses, die Details und somit auch den Mikro-Weißraum nicht aus den Augen zu verlieren.

 


Lesbarkeit

Die Feinabstimmung des Mikro-Weißraums hat große Auswirkungen auf die Lesbarkeit eines Textes auf einer Website. Text auf einem Bildschirm zu lesen ist für die Augen ohnehin schon schwierig. Umso wichtiger ist es, dass genügend Zeilenabstand im Fließtext sowie Platz zwischen Headline, Text und Bildern gelassen wird. Der „aktive Weißraum“ zwischen einzelnen Absätzen leitet das Auge von einem Element zum nächsten, der „passive Weißraum“ regelt dagegen die Abstände der Zeichen und strukturiert den Text.

Dies wird z.B. auf sz-magazin.sueddeutsche.de gut demonstriert. Auch bei der inhaltsorientierten Website magazine.good.is steht die Typografie im Vordergrund. Ein großer Zeilenabstand sowie kontrastreiche Farben sorgen hier für bessere Lesbarkeit.

 

Weitere Infos und Tipps zum Umgang mit Weißraum als Gestaltungselement gibt es auf folgenden Seiten:

http://webdesignledger.com/tips/howto-use-negative-space-in-web-design

http://t3n.de/magazin/weissraum-gar-weiss-muss-inhalt-atmen-225707/2/

http://www.smashingmagazine.com/2007/01/12/white-space-and-simplicity-an-overview/

http://alistapart.com/article/whitespace