Webseiten-Infos.de

Weißraum und das Gesetz der Nähe

Weißraum (Whitespace), auch negativer Raum (negative space) genannt, ist ein oft unterschätzter Einflussfaktor für ein ansprechendes Webdesign.

Aber was ist Weißraum in der Makrotypografie überhaupt?

Er muss nicht weiß sein, sondern ist die Hintergrundfarbe zwischen (gruppierten) Elementen.

Aber was wird vom menschlichen Auge als Gruppe wahrgenommen?

Dafür ist die räumliche Nähe von gruppierten Elementen maßgeblich.

Ein Beispiel: Eine Linkliste, bei denen die Links nahe beieinander sind und auch noch einer gemeinsamen Ausrichtung folgen, wird im Regelfall als eine Navigation erkannt. Desto mehr Platz zwischen dieser Navigation und weiteren Elementen ist, umso mehr wird die Aufmerksamkeit des Betrachters hierauf gelenkt.

Diesen Platz zwischen den Elementen gestalte ich typischerweise mit den CSS-Eigenschaften padding (Innenabstand) und margin (Außenabstand).

Hier auf der Website Webseiten-Infos.de hatte ich in den letzten Tagen das Gefühl, dass manche Abstände noch etwas zu klein waren. Dadurch entstand an einigen Stellen der Eindruck von Enge. Design braucht aber Raum, sprich Luft zum Atmen.

Deshalb habe ich an folgenden Stellen die Abstände vergrößert:

• Bei der ganz oben befindlichen Basisnavigation habe ich die Abstände nach oben und unten leicht erhöht (padding-top und padding-bottom nun 7px statt 5px).
• Den Abstand zwischen der Überschrift der Blogbeiträge und Artikel (h3) zum nachfolgenden Text habe ich leicht erhöht (von padding-bottom 0 auf 0.3em).
• Den unteren Abstand der einzelnen Listen in der rechten Spalte (Sidebar) habe ich ebenfalls leicht erhöht (von padding-bottom 0.5em auf 1em). Zudem habe ich dort die gepunktete (Abschluss-) Linie (border-bottom: 1px #BFB49B dotted; ) gelöscht und so ein dazwischen befindliches Element entfernt.

Ich hoffe, dass dadurch die Webseiten von Webseiten-Infos.de noch augen- und lesefreundlicher sind.

Über Rückmeldungen, gerne auch konstruktive Kritik freue ich mich.