Visuelle Hierarchie

Das unwichtige vom wichtigen Trennen. Eine Hierarchie macht es möglich.



Ohne Variation von Schriftgröße und Schriftstärke (links) fehlt ein wichtiges Orientierungsmerkmal. Alle Teile erscheinen gleich unwichtig und bieten kein Impuls, um das Auge über die Seite zu führen.

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 lohnend erscheint.

Schriftstärke Font Weight

Variationen der visuellen Schwere gelingt auch durch Wahl der Schriftstärke. Während in den normalen Office-Programmen nur zwischen Normal-, Fett- und Kursiv-Schrift umschaltbar ist, bieten moderne Layoutprogramme und Webseiten eine mehrstufige Auswahl. Hierdurch entstehen fein abgestimmte visuelle Hilfsmittel.

Großschreibweise CAPITALIZED LETTERS

Zum Abtrennen von Inhaltsbereichen können Zwischenüberschriften eingezogen werden. Durch Verwendung der Großschreibweise heben sich diese vom eigentlichen Detailtext ab, ziehen aber durch das geringe Gewicht (Font-Weight) keine übermäßige Aufmerksamkeit auf sich.

Ähnliche Beiträge

  • Farben

    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…

  • Frontend-Layout

    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.

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

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

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