Weissraum

Man sieht oft den Wald vor Bäumen nicht. Stünde ein einzelner Baum auf einer sonst baumfreien Lichtung fällt er sofort ins Auge.

Ohne Weißraum wirken die Elemente eingequetscht. Für den User ist die Seite kaum erschließbar.

Weißraum bietet den Elementen eine Bühne, damit diese Platz haben, atmen und entfalten können. Der Weissraum muss nicht unbedingt weiß sein, sondern wird in der Primärfarbe oder mit einem subtilen Farbverlauf eingefärbt.

Fehlt der Weißraum erscheint die ganze Seite (links) als monolithischer unnahbarer Pixelmatsch. Im rechten Schaubild werden nur die jeweiligen Infos des zentral platzierten Themas (Plan B) angezeigt. Durch das mobile Strafen kann man zu den anderen Themen wechseln. Obwohl nun weniger Informationen dargestellt werden nimmt das Verständnis der Seite zu. Der Call-2-Action Button („Sign up“) würde ohne Weißraum völlig untergehen.

Ähnliche Beiträge

  • Leveling & Cards

    Google’s Material Design macht interaktive Elemente subtil sichtbar. Die Zeit stark verschatteter Elemente ist eigentlich lange vorbei. Das stimmt jedoch nicht ganz, da der Schatten durch das Google Material Design in einer sehr subtilen Weise als Hilfsmittel fungiert, um interaktive Elemente zu erkennen. Die Idee: alles, was durch Klicken weitere Optionen offenbaren würde, wird vom…

  • Evil UX worst practices

    „Don’t be evil“ war bis 20181 ein Teil von Google’s Code of Conduct. Die damalige Version des Verhaltenskodex liest sich ganz im Sinne des Dienstes am User „Yes, it’s about providing our users unbiased access to information, focusing on their needs and giving them the best products and services that we can …“ (der volle…

  • Navigation

    Woher kommt der User, was ist aktuell zu tun und wo geht es danach hin. Navigationselemente beantworten diese Fragen auf einen Blick. Breadcrumbs Mit Breadcrumbs (Brotkrumen) ist der Pfad zum aktuellen Dialog sichtbar und sie ermöglichen das Zurückspringen zu einer höheren Seite. Besonders relevant ist der Breadcrumb, wenn User von außen auf die Seiten kommen…

  • Margins & Paddings

    Lage und Menge des Weißraums werden über Margins & Paddings gesteurt. Margin Ist der Weissraum um einem Element herum. Durch diesen Weißraum wird das Element als abgeschlossene visuelle Einheit wahrgenommen. Dem User erschließt sich die Seite schneller wenn er/sie visuell alle Elemente separieren und dann – von starken Kontrasten geleitet – nacheinander untersuchen kann. Padding…

  • Typographie

    Die Schriftart vermittelt Emotionen durch Form und Schwung der Buchstaben und wird dementsprechend sorgfältig zum Thema passend ausgewählt. Informationen werden nicht nur durch den lexikographischen kargen Text selbst vermittelt, sondern auch die Zeichnung, der Steg-Verlauf, die Serifen und die Ausrichtung von Buchstaben in einer Schriftart kommunizieren Infos und erzeugen Stimmungen. Abhängig vom Thema der Webseite…