Von Christoph | 16.12.2019 | Lesezeit: 8 Minuten

6 Regeln für gutes Webdesign – Visuelle Hierarchie (3/6)

Auf den Inhalt kommt es an? Weit gefehlt! Denn der interessanteste und wissenswerteste Inhalt bringt nichts, wenn er in tagelangen Endlostexten, unübersichtlich oder gar unstrukturiert arrangiert ist.

Visuelle Hierarchie im Webdesign

Auf den Inhalt kommt es an? Weit gefehlt! Denn der interessanteste und wissenswerteste Inhalt bringt nichts, wenn er in tagelangen Endlostexten, unübersichtlich oder gar unstrukturiert arrangiert ist. Letzten Endes ist es die Meisterhand des Webdesigners, die den Inhalt plausibel gliedert und in mundgerechte, sinnvoll aufeinanderfolgende Stücke optisch zerlegt. Die ihn so strukturiert, dass der Leser spielend leicht Aussage und Angebot einer Website erfassen kann. Dies geschieht mithilfe visueller Hierarchie.

Gute Webdesigner schaffen es, durch eine gelungene visuelle Hierarchie die Aufmerksamkeit des Website-Besuchers intuitiv und natürlich auf die wichtigsten Elemente zu lenken. Idealerweise führt sie sein Auge und zeigt ihm, in welcher Reihenfolge es sich worauf konzentrieren soll.

Bei der visuellen Hierarchie geht es um die Anordnung und Organisation von Komponenten Deiner Website. Ist eine bestimmte Information besonders wichtig? Dann sollte sie besonders prominent und sichtbar sein. Dies kann durch visualisierte Hierarchien erzielt werden, also z.B. konkret durch

  • unterschiedliche Größen von Überschriften
  • das Einrücken von Content
  • das Hervorheben von Zitaten
  • unterschiedliches Design von Buttons
  • den Einsatz passender Bilder

Folgende 5 Grundregeln sind essentiell für den Erfolg der visuellen Hierarchie:

#1 LESEMUSTER

Bei klassischen Websites sowie bei Anzeigen hat das Lesemuster die Spur eines Z – wie auch in diesem spannenden Artikel von t3n beschrieben wird. Hierbei überfliegt das Auge die Site am oberen Rand von links nach rechts entlang aller Elemente, die im obersten Frame (meist das Menü) enthalten sind und wandert dann diagonal zur Ecke links unten, um dort auch am unteren Rand entlang nach rechts zu laufen. Das bedeutet: die wichtigsten Infos gehören in die Ecken, auf die Bildschirmdiagonale und entlang des oberen und unteren Screen-Randes. Auf der neuen Website von Autotechnik Dudek haben wir dieses Z-Pattern ziemlich hübsch umgesetzt, oder? 😉

#2 GRÖSSE

Bei einer plakativen Schriftgröße greifen die vorausgegangenen Regeln zum Lesemuster nicht mehr. Die Schriftgröße catcht unsere Aufmerksamkeit unerbittlich. Nur Personen mit Wahrnehmungsstörungen können sich der Hierarchie der Botschaften hier entziehen. Geeignet sind sehr starke oder polarisierende Wörter, die ein Interesse für den übrigen Content schaffen.

#3 TEXTUR

Hier geht es um die Ausgewogenheit der Elemente auf dem Bildschirm. Bleibt genug Raum um die Worte innerhalb eines Buttons oder Textfelds, um sie wirken zu lassen? Betonen oder „dämmen“ Muster und Bilder die Informationen gemäß ihrer Wichtigkeit? Schon durch das Verschieben, Einfügen oder Weglassen minimaler Gestaltungskomponenten verschiebt sich die Gewichtung einzelner Botschaften und Website-Bereiche.

#4 SCHRIFTSTÄRKE UND -FARBEN

Wer bereits erfolgreich in der Printwerbung ist, darf diesen Teil getrost überspringen. Mit oder ohne Serifen, dick oder dünn, kursiv oder gerade, farbig oder schwarz/weiß – es gibt neben der Schriftgröße viele Möglichkeiten seine Textbausteine hervorzuheben und ihnen zu einer logischen Hierarchie zu verhelfen. Wichtig wird das insbesondere, wenn eine Vielzahl von Infos gleichermaßen wichtig präsentiert werden müssen, das Ganze aber nicht in Monotonie enden soll. Dieser Spagat gelingt z.B. Zeitschriften, die in verschiedenen Schriftarten oder -farben Magazininhalte auf dem Titel anteasern.

#5 RICHTUNG

Die lesbarste Form für Websites ist die Ausrichtung innerhalb eines Rasters mit vertikalen und horizontalen Linien. Möchte der Webdesigner hier mithilfe visueller Hierarchie ausbrechen, reicht es schon, einen Text in Form einer Kurve oder Diagonale verlaufen zu lassen. Du merkst: öfter mal die Regeln zu brechen, kann zum Erfolg führen – aber bitte nicht alle auf einmal ;-).

UNSER FAZIT

Alle diese Regeln gleichzeitig unter einen Hut zu bringen und einzuhalten, mag jetzt nach einer großen Herausforderung klingen. Aber keine Angst, dafür gibt es ja die freundliche Werbeagentur um die Ecke, die Deine Website nach allen Regeln der Kunst konzipieren und umsetzen kann.
Wir verpassen Deinem Webauftritt nicht nur das gewisse Quäntchen Webästhetik, sondern achten auch darauf, dass sie funktioniert. Messbar & erfolgreich.

Greif gerne zum Hörer, schreib uns oder komm vorbei. Dann red ma mal, welches G‘wand wir für Dein Unternehmen und Deinen Webauftritt fertigen können.

 

Die weiteren Blogartikel aus dieser Serie findest Du hier: 

6 Regeln für gutes Webdesign – Einfachheit (1/6)

6 Regeln für gutes Webdesign – Konventionen (2/6)

ARTIKEL TEILEN:

WAS GEHT AB?

Unsere Blogbeiträge, News und Aktuelles immer taufrisch in Dein Email-Postfach. Wenn das mal nix ist!