Content Kreation

Know How

Know How

Visuelle Hierarchie

Die ‚visuelle Hierarchie‘ beschreibt die Ordnung der unterschiedlichen grafischen Elemente, indem es sie nach ihrer Wichtigkeit priorisiert. Webentwickler nutzen die visuelle Hierarchie, um den Inhalt auf einer Website oder App für User intuitiv erfahrbar zu gestalten und übersichtlich anzuordnen. Das Webdesign führt dabei den Besucher und zeigt ihm, worauf er sich wann und wo zu konzentrieren hat. – Dies unterstützt die Customer Journey und verhilft der Website dazu, ihr Angebot leichter und erfolgreicher formulieren zu können.

Das Prinzip der visuellen Hierarchie ist sehr stark mit der Einfachheit verbunden. User sollen durch die Anordnung der einzelnen Elemente nach einem bestimmten Schema die Website auf natürliche und angenehme Weise nutzen. Je nachdem, welchen Webentwickler man fragt, gibt es eine unterschiedliche Anzahl von Punkten, die die visuelle Hierarchie umfassen, aber klassisch beginnt diese meist beim ‚z‘-artigen Lesemuster, bei dem das Auge oben links beginnt und den ganzen Bildschirm im weiteren Verlauf wie ein ‚Z‘ scannt. Daneben existiert das ‚F‘-Muster, das allerdings mehr bei textlastigen Seiten vorkommt. Als Nächstes folgen Schriftgrößen: für Überschrift (H1), Absatzüberschriften (H2, H3) und den Text. Schließlich folgt die Textur, was in etwa die Relationen der einzelnen Webelemente auf dem Bildschirm zueinander bedeutet. Hinzukommen noch die Auswahl der Fonts (Schriftart, Schriftstärke, Schriftschnitt) und der Schriftfarben. Erst dann folgt die Ausrichtung innerhalb des Rasters.

Natürlich existieren Weblayouts wie das asynchrone Weblayout oder der Web-Brutalismus, die die visuelle Hierarchie zwar nutzen, sie aber dermaßen verfremden und deren Grundsätze so weit überdehnen, dass sie kontrapunktisch wirken.

Auch im Print-Design gibt es eine visuelle Hierarchie. So ist ein lesefreundliches Layout einer Publikation wie einer Mitarbeiterzeitung oder Broschüre u. a. von einer schnell erfassbaren Gliederung innerhalb des Seitenspiegels und gleich großen bzw. von oben nach unten kleiner werdenden Überschriften gekennzeichnet. Der Umgang mit Stilelementen wie Rahmen für Textboxen, Schattierungen, Unterstreichungen etc. sollte sparsam sein, um damit Relevantes tatsächlich hervorzuheben und vom übrigen Inhalt abzuheben. Auch, meist fett markierte, Text-Teaser helfen bei der Erstorientierung innerhalb einer Seite einer Printpublikation. In der Gesamtkonzeption einer Broschüre, Mitarbeiterzeitung oder anderer Publikationen im Rahmen der Unternehmenskommunikation gilt, dass rechts liegende Seiten vom Leser mehr Aufmerksamkeit erfahren als die gegenüberliegenden linken Seiten. Speziell die Seite 3 ist daher als erste rechte Inhaltsseite einer Publikation besonderen redaktionellen Themen vorbehalten und frei von Anzeigenschaltungen. Der Leser scannt eine Seite nach dem oben beschriebenen ‚Z‘-Prinzips einer Website.

Medien der Boulevardpresse sind ein Beispiel dafür, die visuelle Hierarchie durch sich gegenseitig konkurrierende Schlagzeilen, Schriftarten und/oder einer Flut von Hervorhebungen zu durchbrechen.

Begierde Wissen

insights

insights