Margins & Paddings

VonTobias Günther

Lage und Menge des Weißraums werden über Margins & Paddings gesteurt.

Werden Dialoge ohne Margin und Padding angelegt (siehe Schaubild links) kann dieser nicht augenblicklich visuell erschlossen werden und muss mühsam dechiffriert werden. Die Usability ist schlecht und die User-Experience sinkt ins Bodenlose.

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

Paddings beschreibt den Weißraum nach Innen. Hierdurch wird der Inhalt der Elemente herausgestellt & visuell eingerahmt, so als würde der Inhalt von unschätzbarem Wert sein, welches mit genügend weißer Watte geschützt werden muss.

Die Räume noch außen und innen müssen symmetrisch angelegt werden. Exakt gleich viel Spielraum links sollte auch dem rechten Rand zugestanden werden.

Ähnliche Beiträge

  • Farben

    VonTobias Günther

    Das Google Mateiral Design definiert einen Farbkatalog und klassifiziert Helligkeitsstufen, damit Hintergrundfarben (auch Primärfarbe genannt) mit Vordergrundfarben (auch Akzentfarbe genannt) nahezu beliebig kombiniert werden können. Primärfarben werden mit einer mittleren Helligkeit angelegt (Stufe 500), während Akzentfarben stark gesättigt und hell sind (Stufe A100 bis A300). Primärfarbe Hintergrundfarben nehmen flächenmäßig einen großen Raum ein. Diese sind…

  • Visuelle Hierarchie

    VonTobias Günther

    Das unwichtige vom wichtigen Trennen. Eine Hierarchie macht es möglich. Schriftgröße Je wichtiger die Überschrift, desto größer die Schriftgröße. Durch stark sichtbare und kontrahierende Zeichen wird die Aufmerksamkeit des Users auf die Titelüberschrift gezwungen. Zur Orientierung ist das natürlich ein sehr sinnvolles Vorgehen, denn es muss entschieden werden, ob das weitere Scannen der Seite thematisch…

  • Frontend-Layout

    VonTobias Günther

    Alle Elemente des Produktkonfigurators werden in verschiedenen Positionen, Reihenfolgen und Größen „ausgelegt“. Durch das Weglassen von Farben, Bildern, Icons und inhaltlich gestalteten Texten kann sich der Designer voll auf das Layout konzentrieren. Denn dieses bildet nicht nur das Gerüst an dem die Gestaltung aufgehängt ist, sondern ist auch fundamental wichtig für Usability und User-Experience.

  • Weissraum

    VonTobias Günther

    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. 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…

  • Typographie

    VonTobias Günther

    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…

  • Evil UX worst practices

    VonTobias Günther

    „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…