Hierarchie im Webdesign - Teil 3/3

Schauen wir uns die letzten beiden Hierarchie Tricks an, bei denen du lernst wie du die Blicke auf deiner Website gezielt lenken kannst.


▶️ Grösse

▶️ Textur

▶️ Farbe

▶️ Abstand

▶️ Position


Hast du die ersten beiden Teile verpasst? Kein Problem hier gleich zum Nachlesen:


Teil 1 Grösse Teil 2 Textur & Farbe


Abstand

Hast du viele Texte oder Elemente, die du präsentieren musst, spielen Abstände eine grosse Rolle. Sie zeigen nicht nur auf was zusammengehört, sondern sie geben den Elementen auch genügend Raum, um zu wirken. Hat ein Element genügen Raum drumherum, muss es nicht einmal gross oder auffällig sein. Der Blick schweift automatisch dort hin.


Abstände helfen auch Elemente zu bündeln, denn stehen Elemente oder Texte zu nahe beieinander gruppiert unser Hirn diese automatisch. Sorge also immer für genügen Platz zwischen den verschiedenen Texten/Elementen.



Beispiele für gelungene Abstände zwischen Elementen auf einer Website
Beispiele wie Abstände den Texten genügend Raum geben können

Position

Studien zeigen, dass wir eine Website zuerst überfliegen, bevor wir beginnen zu lesen, um zu prüfen, ob der Inhalt auch "interessant" genug ist. Dies tun wir aber nicht irgendwie, sondern man konnte beobachten, dass wir das oftmals in denselben Mustern machen.


Das ist entweder das F-Muster oder das Z-Muster. Dies bedeutet unser Auge fängt, in unseren Kulturen, oben links an streift nach rechts und geht dann beim Z-Muster quer nach links unten oder beim F-Muster liest es den nächsten Titel und falls dieser interessant ist, wird noch etwas weitergelesen.


Was bedeutet das für uns? Wichtiges immer linksbündig platzieren und starke aussagekräftige Titel wählen oder andere Blickfänge, damit man den Abschnitt bemerkt.



Darstellung des F-Musters
Beispiel des F-Musters