Grid Raster

VonTobias Günther

Ordnung ist das halbe Leben. Mit Raster & Bündigkeit wird sogar ein ganzes Daraus.

Fehlt die Ausrichtung aller Elemente an einem nicht sichtbaren Raster (links) erscheint das Layout unsauber und dahingeschludert. Beim rechten Dialog sind die Elemente bündig angeordnet.

Nicht eingezeichnete Ordnungsstrukturen werden unbewusst erkannt, wenn alle Elemente innerhalb eines regelmäßigen Grids (Raster) angeordnet sind. Unbewusst wird diese gerasterte Ordnung positiv vom User wahrgenommen. Das Raster besteht aus gleichbreiten bzw. gleichhohen Reihen und Spalten mit einem gleichbleibenden Abstand (engl. Gutter) dazwischen. Die Kanten aller Elemente liegen exakt auf den gedachten Linien des Grids, hierdurch wird Start- und Endposition, sowie die Breite der Elemente bestimmt. Große Elemente überspannen dann ein ganzzahliges Vielfaches der Standardbreite (siehe der „Sign up now-Button“) um sich trotz der Größe in das Grid einzufügen.

Ähnliche Beiträge

  • Leveling & Cards

    VonTobias Günther

    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…

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

  • Margins & Paddings

    VonTobias Günther

    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…

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

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