Visuelle Hierarchieprinzipien für Designer

Visuelle Hierarchieprinzipien für Designer sind ein Designkonzept, das verwendet wird, um zu steuern, wie sich die Augen des Betrachters durch ein Design bewegen und um zu bestimmen, welche Elemente am wichtigsten oder optisch ansprechendsten sind.

Zunächst gab es Steintafeln, Papyrusrollen und Papier. Dann kamen Computerbildschirme und elektronische Tablets. Mit der Weiterentwicklung der Seitenanzeigetechnologie bleibt den Designern eine klare Möglichkeit, Inhalte zu organisieren. Aber was ist besser? Kurz gesagt , visuelle Hierarchie.

Hier ist die Definition der visuellen Hierarchie: Visuelle Hierarchie ist die Anordnung grafische Elemente im Design in der Reihenfolge der Wichtigkeit jedes Elements. Visuelles Gewicht bestimmt Elementbedeutung in der Hierarchie des Designs und sagt dem Betrachter, worauf er sich konzentrieren soll und in welcher Reihenfolge.

Ressourcen für Designer. 50 gratis

Dies wird zu einem immer wichtigeren Thema, da responsive Frameworks Designer dazu zwingen, über viele verschiedene Seiten gleichzeitig nachzudenken. Angesichts dichter Texte und kurzer Aufmerksamkeitsspannen haben Designer sechs Prinzipien entwickelt, um den Blick des Lesers auf die wichtigsten Informationen zu lenken.

Diese 6 Prinzipien der visuellen Hierarchie helfen Ihnen bei der Gestaltung von Broschüren bis hin zu Apps und stellen sicher, dass der Endbenutzer ein positives Leseerlebnis für Designer hat.

Alle Kulturen werden von oben nach unten gelesen, und die meisten Kulturen werden von links nach rechts gelesen. Aber obwohl dieses Wissen wichtig ist für SeitengestaltungDesigner wissen, dass die Aufgabe viel schwieriger ist.

Aktuelle Studien haben gezeigt, dass Menschen eine Seite zuerst scannen, um zu sehen, ob sie daran interessiert sind, bevor sie sie lesen. Scanmuster nehmen in der Regel eine von zwei Formen an, „F“ und „Z“, und Sie können dies in Ihrem Design nutzen.

F-Muster. Prinzipien der visuellen Hierarchie

F-Vorlagen gelten für herkömmliche Textseiten wie Artikel oder Blogbeiträge. Der Leser scannt die linke Seite Seite sucht nach interessanten Schlüsselwörtern in linksbündigen Überschriften oder ersten Themensätzen und hält dann inne und liest (nach rechts), wenn er oder sie auf etwas Interessantes stößt. Das Ergebnis sieht aus wie ein F (oder ein E oder etwas mit noch mehr horizontalen Streifen; aber der Begriff „F“ bleibt hängen).

Wie können Sie das nutzen? Richten Sie wichtige Informationen links aus und verwenden Sie kurze, fett gedruckte Überschriften, Aufzählungszeichen und andere ähnliche aufmerksamkeitsstarke Elemente, um Absatzblöcke aufzubrechen.

Z-Modell. Prinzipien der visuellen Hierarchie

Z-Muster gelten auch für andere Arten von Seiten wie Anzeigen oder Websites, auf denen Informationen nicht unbedingt in Blockabsätzen dargestellt werden. Der Leser scannt zunächst den oberen Rand der Seite, wo sich wahrscheinlich wichtige Informationen befinden, bewegt sich dann diagonal zur gegenüberliegenden Ecke und tut das Gleiche am unteren Rand der Seite.

Webdesigner gestalten ihre Seiten typischerweise so, dass sie diesem Verhalten explizit entsprechen, indem sie die wichtigsten Informationen in den Ecken platzieren und andere wichtige Informationen entlang der oberen und unteren Balken ausrichten und die Diagonale verbinden.

Im Folgenden Wichtige Elemente bei der Gestaltung der Vollversammlung 2010 sind das Logo (oben links), eine Schaltfläche „Jetzt registrieren“ (oben rechts) und eine Liste der Redner (unten), die strategisch an schönen Z-Muster-Positionen platziert sind.

2. Auf die Größe kommt es an. Prinzipien der visuellen Hierarchie
_

Es ist ganz einfach: Die Leute lesen große Dinge zuerst. Wenn Ihr Blick auf „die Leistung“ gelenkt wird, bevor Sie sich in die Anzeige unten für den Young Vic „aufteilen“, sollten Sie sich sofort an einen Wahrnehmungspsychologen wenden: Sie könnten wahrscheinlich gutes Geld verdienen, indem Sie als seltene Anomalie getestet werden.

Interessant ist, dass diese Tendenz tatsächlich stark genug ist, um die Top-Down-Regel abzulehnen. Im obigen Bild hat „Hack“ Vorrang vor „Zeit zum Handeln“, da es größer ist und sich links befindet (daher hilft die Links-nach-rechts-Regel).

Aber auf der nächsten Seite des Jahresberichts: Menschenrechtskampagne 2012 (entwickelt in der fünften Medienspalte) lesen wir im Großen und Ganzen Schriftart „Der Kampf für Gleichberechtigung im Wahlkampf“ vor dem Text direkt darüber „Wahl 2012“. Prinzipien der visuellen Hierarchie

„Wahl 2012“ ist die höchste Informationsebene: Sie verrät uns das allgemeine Thema, auf das sich die folgenden Informationen beziehen. Der Designer entschied jedoch, dass der Titel des Artikels für die Leser interessanter sei, und bewertete ihn daher so, dass er zuerst gelesen wird.

3. Raum und Textur. Prinzipien der visuellen Hierarchie

Eine andere Möglichkeit, Aufmerksamkeit zu erregen, ist Geben Sie dem Inhalt genügend Raum zum Atmen . Wenn rund um die Schaltfläche viel Leerraum vorhanden ist oder die Zeilen im Textblock weit auseinanderliegen, sind diese Elemente für den Leser leichter sichtbar.

Wie Sie im Bild unten (Teil der DrawtoClick-Website) sehen können, kann der Abstand eine elegante Alternative oder Ergänzung zur Verwendung der Größe sein. Hier ist das Verkaufsargument „Notre agence vouscompagne…“ sehr klein geschrieben, aber von reichlich Leerzeichen umgeben, was auf seine Bedeutung hinweist. Im Folgenden werden die Formulierungen „Le Compendre“, „Le Réaliser“ und „Le Partager“ zusätzlich betont und vom umgebenden Raum losgelöst.

Wenn man im Zusammenhang mit der visuellen Hierarchie von „Textur“ spricht, meint man damit nicht die grafischen Effekte der Textur. Vielmehr bezieht sich diese Art von „Textur“ auf die Gesamtanordnung oder Struktur von Raum, Text und anderen Details auf einer Seite. Dieses Beispiel von Bright Pink veranschaulicht das Konzept gut:

Im ersten Bild steht das Wort „Sport“ in der Hierarchie höher als „Badminton“, weil es höher, größer und mutiger ist. In Bild 2 sind die beiden Wörter in etwa gleichwertig, dank des schwarzen Rechtecks, das „Badminton“ hervorhebt und es in einen eigenen Raum stellt.

Im dritten Bild unterbricht das Hintergrundgekritzel den Bereich „Sport“, nicht jedoch den Bereich „Badminton“ und führt daher zu einer Umkehrung, bei der „Badminton“ in der Hierarchie an oberster Stelle steht. Da diese Entwicklung schwer vorherzusagen ist, assoziieren Designer sie oft mit einem ganzheitlichen Sinn für „Textur“.

4. Schriftstärke und Paarung. Prinzipien der visuellen Hierarchie

Die Auswahl der Schriftart ist für die Etablierung einer visuellen Hierarchie von entscheidender Bedeutung. Zu den wichtigsten Attributen einer Schriftart gehören die Stärke, die Breite der Striche, aus denen die Buchstaben bestehen, und der Stil, z. B. Serife und Sans Serif. Auch andere Modifikationen, etwa Kursivschrift, können eine Rolle spielen.

Beachte wie Headset beeinflusst die Reihenfolge der Worthierarchie im Webdesign unten für The Tea Factory: „Perfekte Tees zum Aufwärmen“ lautet die Devise, aber Unterschiede in der Schriftstärke und Kursivschrift sowie in der Wortplatzierung sorgen für mehr dynamisches, weniger lineares Leseerlebnis. "://azbyka.com.ua/foto/tea-factory.jpg" />

In manchen Fällen besteht das Ziel darin, verschiedene Informationen als gleichermaßen dringend darzustellen. Wenn alle auf die gleiche Größe und das gleiche Gewicht eingestellt werden, wird die Gleichwertigkeit gewährleistet, es wird aber auch eintönig wirken. Eine Möglichkeit, dies zu vermeiden, ist die Differenzierung der Schriftarten, wie das Cover des Trendi-Magazins unten zeigt. Prinzipien der visuellen Hierarchie

Vorbereiten einer Broschüre zum Drucken.

Hier sind die fünf Teaser am Rand der Seite in der Hierarchie gleich, sorgen aber durch den Austausch zweier gut aufeinander abgestimmter Schriftarten für Abwechslung – eine mittelschwere Serifenschrift und die andere eine leichte, aber hohe serifenlose Schrift.

5. Farbe und Farbton. 

Auch hier ist es ein Kinderspiel: Helle Farben heben sich von gedeckten Farben oder Grautönen ab, während hellere Farbtöne „ferner“ wirken und somit in der Hierarchie tiefer fallen als kräftigere, dunklere Farbtöne. Die Website „Where Are They“ kontrastiert helles Licht und farbige Hintergrundbeleuchtung mit einem schwarz-weißen Rastereffekt zum Effekt der Leuchtkraft:

Auf der Guggenheim-Website werden wichtige Informationen wie die Standortauswahl, eine Liste der aktuell angesehenen Ausstellungen und Links zu Sonderausstellungen farblich hervorgehoben. Prinzipien der visuellen Hierarchie

Beste Schriftart für individuelle Verpackungen

Auf der Website des Whitney Museum hingegen wird eine Hierarchie innerhalb einer Schriftart, -stärke und -tönung (Schwarz) mithilfe von Tönung erstellt (was bedeutet, dass dem Grundton Weiß hinzugefügt wird, um ihn heller zu machen). „Cory Archangel on Pop Culture“ liegt in der visuellen Hierarchie deutlich unter „New on Whitney Stories“, nicht nur, weil es niedriger ist, sondern auch, weil sein Farbton heller ist, wodurch es vor dem weißen Hintergrund weniger auffällt. Prinzipien der visuellen Hierarchie

Farbe hat eine besondere Bedeutung mobiles Design Anwendungen, bei denen eine kleine Bildschirmgröße die Nutzung anderer Strategien wie Größenvariation und große Abstände einschränkt. In der Grainger Industrial Supply-App ist die Schaltfläche „Zur Kasse gehen“ rot gefärbt, sodass sie auf jeder Seite, auf der sie erscheint, hervorsticht. Im Gegensatz dazu ist der Bereich „Suchergebnisse eingrenzen“ grau, sodass er in der Hierarchie in etwa mit anderen Elementen wie der Suchleiste und Produktlinks übereinstimmt.

6. Richtung für Designer.

Seitenlayouts sind in der Regel so gestaltet, dass sie einem Raster aus vertikalen und horizontalen Linien folgen, sowohl aufgrund der Konvention als auch weil es das am besten lesbare Format ist. In einem solchen System gibt es einen neuen Weg, Hierarchien zu etablieren: das Durchbrechen des Rasters.

Text, der entlang einer Kurve oder Diagonale positioniert ist, hebt sich automatisch vom umgebenden, rasterblockierten Text ab und steht im Mittelpunkt. Dies ist seit langem eine wirksame Werbestrategie, wie beispielsweise das Bushaltestellenplakat von Frost Design.