# Visuelle Hierarchie: so lesen Menschen in der richtigen Reihenfolge [Canonical HTML page](https://gradiently.design/de/guide/visual-hierarchy) Jedes Design wird in irgendeiner Reihenfolge gelesen. Wählst du sie nicht, tut es das lauteste Element. So entscheidest du, was zuerst, als Zweites und als Drittes kommt, und sorgst dafür, dass es passiert. ## The short version - Visuelle Hierarchie ist die Reihenfolge, in der Menschen die Teile eines Designs wahrnehmen und lesen. - Hierarchie wird mit fünf Werkzeugen gesteuert: Größe, Stärke, Farbe und Kontrast, Position und Raum. - Die meisten Designs brauchen nicht mehr als drei Ebenen: eine Sache, die zuerst gesehen wird, ein paar Dinge als Zweites und Details zuletzt. - Das Element mit dem stärksten Kontrast zu seiner Umgebung wird meist zuerst gesehen, egal wie groß es ist, deshalb sollten Akzentfarben für eine Sache aufgespart werden. - Der Blinzeltest, bei dem du deine Sicht verschwimmen lässt, bis nur noch Formen übrig sind, zeigt auf einen Blick, welches Element wirklich führt. **Visuelle Hierarchie** ist die Reihenfolge, in der Menschen die Teile eines Designs wahrnehmen und lesen. Du steuerst sie mit fünf Werkzeugen: **Größe**, **Stärke**, **Farbe und Kontrast**, **Position** und **Raum**. Eine klare Hierarchie hat eine Sache, die zuerst gesehen wird, ein paar Dinge, die als Zweites gesehen werden, und Details, die man nur findet, wenn man danach sucht. Ohne sie konkurriert alles, und niemand liest etwas. ## Die fünf Werkzeuge der visuellen Hierarchie Jedes Werkzeug funktioniert gleich: Es macht ein Element anders als seine Nachbarn. Je größer der Unterschied, desto früher wird das Element gesehen. Mehrere Werkzeuge auf dasselbe Element anzuwenden, stärkt es; sie auf verschiedene Elemente anzuwenden, lässt diese konkurrieren. | Werkzeug | Wie es Betonung schafft | Beispiel | | --- | --- | --- | | Größe | Größeres wird früher gesehen | Eine Überschrift, doppelt so groß wie der Text um sie herum | | Stärke | Schwerere Striche fallen auf | Ein fettes Datum in einer Zeile normaler Schrift | | Farbe und Kontrast | Die andersartigste Farbe gewinnt | Ein goldener Akzent auf einem dunklen, ruhigen Design | | Position | Oben und am Anfang der Leserichtung kommt zuerst | Die Überschrift oben links | | Raum | Freistehende Elemente ziehen den Blick an | Eine einzelne Zeile mit breitem Rand ringsum | Die fünf Werkzeuge. Die meisten starken Designs setzen zwei oder drei davon auf dasselbe Hauptelement. ## Die Reihenfolge festlegen, bevor du gestaltest Hierarchieprobleme sind meist Entscheidungsprobleme. Hast du nicht entschieden, was am wichtigsten ist, kann das Design es nicht zeigen. Bevor du ein Designprogramm öffnest, bring die Inhalte in eine Rangfolge. 1. **Alles auflisten** Jedes Stück Text und jedes Bild, das das Design enthalten muss. 2. **Die eine Sache wählen** Wenn sich Menschen nur an ein Element erinnern, welches sollte es sein? Das ist Ebene eins. 3. **Die unterstützenden Fakten bündeln** Die zwei bis vier Dinge, die Menschen als Nächstes brauchen, etwa ein Datum, ein Ort oder eine kurze Erklärung. Das ist Ebene zwei. 4. **Alles andere ist Detail** Handles, Kleingedrucktes, Logos. Das ist Ebene drei, klein und ruhig. 5. **Streichen, was nicht passt** Findet etwas keine Ebene, gehört es wahrscheinlich in die Bildunterschrift oder auf die nächste Folie. Ein Hochformat-Event-Beitrag mit Launch-Abend als großer Überschrift, dem Datum darüber und drei kurzen Detailzeilen darunter Drei Ebenen: zuerst der Name der Veranstaltung, dann das Datum darüber und die Details darunter, jeweils eine klare Stufe kleiner. ## Größe und Stärke Größe ist das stärkste Werkzeug und das, bei dem Zaghaftigkeit am leichtesten schadet. Ist eine Überschrift nur wenig größer als der Text darunter, wirken beide wie ein Versehen statt wie eine Hierarchie. Mach die Stufen zwischen den Ebenen deutlich; eine Schriftskala, wie in [Typografie Grundlagen](https://gradiently.design/de/guide/typography-basics) beschrieben, hält sie einheitlich. ### Flache Hierarchie - Überschrift kaum größer als der Fließtext - Alles fett, also nichts - Vier verschiedene Größen, die fast gleich sind - Zwei gleich starke Überschriften ### Klare Hierarchie - Überschrift mindestens etwa doppelt so groß wie der Fließtext - Fett nur für die wenigen Wörter, die führen müssen - Drei Größen mit klaren Stufen dazwischen - Eine Überschrift, eine Begleitzeile ## Farbe und Kontrast Das Auge geht zuerst zu dem, was sich am stärksten von seiner Umgebung unterscheidet. Ein kleiner Fleck leuchtender Farbe auf einem dunklen, ruhigen Design schlägt ein größeres Element in gedämpftem Ton. Das macht Akzentfarbe zu einem Budget: Gib sie für die eine Sache aus, die führen soll, oder für die Handlung, die Menschen ausführen sollen, und nirgends sonst. - Grund: #0f1222 - Hauptschrift: #f5f3ee - Nebenschrift: #a7a9be - Akzent, einmal genutzt: #ffb454 Eine Palette mit eingebauter Hierarchie. Die Hauptschrift hat den stärksten Kontrast zum Grund (etwa 16,8:1), die Nebenschrift merklich weniger (etwa 8:1, immer noch sehr gut lesbar), und der Akzent ist einem einzigen Element vorbehalten. Mit weniger Kontrast rückst du Dinge nach hinten, ohne sie zu verkleinern: Eine weichere Schriftfarbe für Bildunterschriften und Labels hält sie lesbar, aber hinter der Überschrift. Halte selbst den leisesten Text über den Mindestwerten aus dem Artikel zum [Farbkontrast](https://gradiently.design/de/guide/color-contrast-accessibility). Die [60-30-10-Regel](https://gradiently.design/de/guide/60-30-10-rule) ist ein weiterer Weg, darüber nachzudenken, wie viel du von jeder Farbe nutzt. ## Position und Leserichtung In Sprachen, die von links nach rechts gelesen werden, beginnen Menschen meist oben links und bewegen sich nach rechts und unten, also werden Elemente dort früh gesehen. In Sprachen, die von rechts nach links gelesen werden, kehrt sich die Startecke um. Zentrierte, symmetrische Layouts beginnen in der Mitte und arbeiten sich nach außen, was zu kurzen Designs mit einer einzigen Botschaft passt, etwa Postern, Zitaten und Ankündigungen. Position kann auch gegen dich arbeiten. Bei Social-Media-Formaten verdecken Bedienelemente der Plattform Teile des Bildes, und auf Thumbnails sitzt ein Badge in der Ecke. Halte das erste Element von diesen Bereichen fern; [YouTube-Thumbnails gestalten](https://gradiently.design/de/guide/youtube-thumbnail-design) zeigt, wie. ## Raum Raum erfüllt zwei Aufgaben. Um ein einzelnes Element herum stellt er es frei, und Freistellung wirkt wie Wichtigkeit: Eine Zeile mit großzügigem Rand kann einen viel größeren Textblock übertrumpfen. Zwischen Elementen gruppiert er sie: Was nah beieinander steht, wird als zusammengehörig gelesen. Setz Datum und Ort nah zueinander und weiter weg von der Überschrift, und Menschen lesen sie als eine Einheit von Details. Ein Hochformat-Beitrag mit einer Überschrift, die zwölf Workshops ankündigt, und einer Begleitzeile Wörter führen: Die Überschrift trägt die Nachricht, das Detail stützt sie. Ein Hochformat-Beitrag mit einer großen Zahl 12 und den Worten Workshops in diesem Herbst Eine Zahl führt: derselbe Inhalt, neu gewichtet, sodass die Zahl zuerst gesehen wird. Derselbe Inhalt kann verschiedene Hierarchien tragen. Welche du wählst, hängt davon ab, woran sich Menschen erinnern sollen: an die Idee oder an die Zahl. ## So testest du visuelle Hierarchie - **Der Blinzeltest.** Kneif die Augen halb zu oder mach das Design unscharf. Die Form, die dann noch heraussticht, ist deine echte Ebene eins. Ist es nicht die, die du gewählt hast, pass nach. - **Der Zwei-Sekunden-Test.** Zeig das Design jemandem zwei Sekunden lang und frag dann, was darauf stand. Die Person sollte deine Ebene eins wiedergeben. - **Der Thumbnail-Test.** Verkleinere es auf die Größe, in der es auf einem Smartphone erscheint. Ebene zwei und drei dürfen verschwinden, das ist in Ordnung; Ebene eins nicht. - **Der Graustufentest.** Nimm die Farbe weg. Bricht die Hierarchie zusammen, hing sie am Farbton statt am Helligkeitskontrast. Hierarchie wird schwieriger, wenn der Hintergrund unruhig oder bunt ist, weil sich der Kontrast unter den Wörtern ändert; [Text auf einem Farbverlauf](https://gradiently.design/de/guide/text-on-gradient) erklärt, wie Ebene eins lesbar bleibt, wo immer sie steht. Für Ankündigungen, bei denen Hierarchie am meisten zählt, siehe [einen Ankündigungsbeitrag gestalten](https://gradiently.design/de/guide/announcement-post-design). ## FAQ ### Was ist visuelle Hierarchie? Visuelle Hierarchie ist die Reihenfolge, in der Menschen die Teile eines Designs wahrnehmen und lesen, gesteuert über Größe, Stärke, Farbe und Kontrast, Position und Raum. ### Wie viele Hierarchieebenen sollte ein Design haben? Meist drei: ein Element, das zuerst gesehen wird, ein paar unterstützende Elemente als Zweites und Details zuletzt. ### Was ist der Blinzeltest? Kneif die Augen halb zu oder mach das Design unscharf, bis nur noch Formen übrig sind. Was dann noch heraussticht, bemerken Menschen zuerst. ### Ist Größe der einzige Weg, Hierarchie zu schaffen? Nein. Stärke, Kontrast, Farbe, Position und Raum schaffen alle Betonung, und ein kleines Element in leuchtender Akzentfarbe kann ein größeres, gedämpftes übertrumpfen.