Warum White Space gut für Ihre Webseite ist

Design

Was meinen wir Designer überhaupt mit White Space?

White Space ist nicht „weiss“ sondern lediglich der leere Raum, der sich zwischen und um die Elemente, beispielsweise einer Website, herum bildet. Designer arbeiten gerne mit Freiraum. Kunden wollen ihn gerne füllen. Oft hört man von Clienten „Da ist doch noch viel Freiraum. Können wir da nicht noch Content abbilden?“

Ist es sinnvoll eine Webseite mit Content zu füllen und jeden Freiraum zu nutzen? Es gibt keine richtige oder falsche Antwort auf diese Frage. Denn White Space ist auf jeder Webseite zu finden – mal mehr, mal weniger ausgeprägt.

 

Schauen wir uns mal die folgenden Beispiel an:

 

apple homepage - beispiel white space

 

Die Apple Homepage ist ein gutes Beispiel. Hier wird bewusst mit viel White Space gearbeitet um die Aufmerksamkeit auf das Produkt zu lenken, zusätzlich erzeugt es eine gewisse Eleganz und Ruhe.

 

 

express homepage - beispiel white space

 

Auf der Homepage des Express finden wir weniger beabsichtigten White Space. Er dient hier lediglich zur Abgrenzung der einzelnen Bereiche. Dies erleichtert dem Besucher der Webseite die Bereiche leichter zu erfassen und zu trennen. Wichtig für ein ruhiges Layout sind in dem Fall die gleichmäßigen Abstände.

 

 

Sivert Høyem - beispiel homepage

 

Hier sehen wir ein Beispiel, dass White Space nichts mit der Farbe „Weiss“ zu tun hat, sondern lediglich den Freiraum beschreibt.

 

text-beispiel white space

Bei Abb. 1 haben wir einen Text mit geringem White Space Anteil. Die Zeilenabstände sind geringer als bei dem Text Abb. 2 und Abb. 3. Dies spart zwar Platz ein, ist jedoch nicht gut für den Lesefluss. Der Text in der Mitte (Abb. 2) hat einen höheren Weissanteil und ist angenehmer zu lesen. Zu weite Zeilenabstände, wie bei Abb. 3, verschlechtern wiederum den Lesefluss, auch wenn hier am meisten White Space zum Einsatz kommt.

 

Wichtige Elemente, White Space zu erzeugen, zusammengefasst:

– Abstände und Freiraum um Grafiken und Bilder
– Stege, Padding (Polsterung) und Raster
– Zeilenabstände, Wortabstände und Buchstabenabstände im Text
– Platz zwischen Kolumnen

 

Mein Fazit:

Habt mehr Mut zu mehr White Space. Setzt es gezielt ein um Elementen eine gewisse Priorität zu verleihen und den Blickverlauf des Betrachters zu führen.
Bei Texten sollte man auf die Zeilenlänge und Zeilenabstände achten, um den Lesefluss angenehm zu gestalten.
Arbeitet mit gleichmäßigen Abständen um ein ruhiges Layout zu schaffen und Bereiche von einander zu trennen.

 

Wer noch mehr Informationen über White Space haben möchte, kann sich gerne folgende Links anschauen:

– White space is wasted space
Reading Online Text
Using White Space in Your Designs
 When Websites Go Wrong

Bildnachweis Vorschaubild:
white space

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.



Weitere Artikel zu Design

Aufgeräumt, aber unübersichtlich! Trotz Raster- und Kachelsystem ist die... Mehr lesen »

Bei der heutigen Landingpage handelt es sich um eine Microsite bei der man... Mehr lesen »

Ich zeige euch 13 coole Header-Effekte für Webseiten, die beim Scrollen... Mehr lesen »


Weitere Artikel von Alexander
Design
Aufgeräumt, aber unübersichtlich! Trotz Raster- und Kachelsystem ist die... Mehr lesen »

Landingpages Online Marketing
Conversion Rate mit Videos auf Landingpages erhöhen? Aber klar! Hier sind... Mehr lesen »

Design Landingpages Online Marketing
Bei der heutigen Landingpage handelt es sich um eine Microsite bei der man... Mehr lesen »

Top-Beiträge

Facebook

Bilder posten auf Facebook

Nicht jedes Bild passt in das neue Konzept der Facebook Chronik. Aber wie müssen Bilder jetzt... Mehr lesen »
Design

13 coole Header-Effekte für Webseiten

Ich zeige euch 13 coole Header-Effekte für Webseiten, die beim Scrollen animiert werden. Manche... Mehr lesen »
AdWords

5 Tipps zur Verbesserung der CTR

Update 04/2016   Die CTR (Click-Through-Rate, also die Klickrate) spielt eine große Rolle in... Mehr lesen »
^