6 Prinzipien der visuellen Hierarchie

Ursprünglicher Autor: Alex Bigman
  • Übersetzung
Um Design zu lernen, haben wir uns für den Kurs Design 101 von trydesignlab.com angemeldet . Die ersten Lektionen waren der visuellen Hierarchie gewidmet. Wir haben einen der besten Artikel zu diesem Thema von 99designs.com übersetzt .



Übersetzung von der Website für Jungunternehmer „ I love SP


Zuerst gab es Steintafeln, Papyrus und Papier. Dann kamen Computer und Tablets. Trotz der technologischen Entwicklung bleibt die Aufgabe des Designers eine klare und klare Organisation der Informationen. Aber wie geht das am besten ?

Dieses Problem ist besonders aktuell, wenn der Designer aufgrund der Vielzahl von Geräten an mehrere Seiten gleichzeitig denkt. Angesichts massiver Informationen und einer kurzen Aufmerksamkeitsspanne haben Designer sechs Prinzipien entwickelt, um den Blick des Benutzers auf das Wichtigste zu lenken.

Diese 6 Prinzipien der visuellen Hierarchie helfen Ihnen beim Entwerfen von Broschüren bis zu Anwendungen und garantieren Ihren Benutzern eine positive Erfahrung beim Konsumieren von Inhalten.



Clay Tablet und iPad

1) Seitenscanmuster


In allen Kulturen werden Informationen von oben nach unten und in den meisten Kulturen von links nach rechts gelesen. Dies ist hilfreich, wenn Sie ein Design erstellen. Tatsächlich ist die Aufgabe jedoch viel komplizierter.

Jüngste Studien haben gezeigt, dass die Benutzer die Seite scannen, bevor sie mit dem Lesen beginnen, um festzustellen, ob sie für sie interessant ist oder nicht. Scanmuster haben normalerweise eine von zwei Formen, die Buchstaben "F" oder "Z".

Buchstabe F MusterDies gilt für herkömmliche Seiten mit viel Text, z. B. Artikel oder Blogeinträge. Der Benutzer scannt die Seite von oben nach unten auf der linken Seite. Wenn er in den Überschriften links oder am Satzanfang interessante Stichwörter findet, liest er weiter von links nach rechts. Infolgedessen ähnelt die Form dem Buchstaben "F" (oder "E" oder etwas mit noch mehr horizontalen Linien, aber der Begriff mit dem Buchstaben "F" ist bereits gut etabliert).

Wie kann das angewendet werden? Ordnen Sie wichtige Informationen auf der linken Seite an, verwenden Sie kurze hervorgehobene Überschriften, Bulletins und andere Elemente, um Aufmerksamkeit zu erregen und Informationen auszutauschen.



Hot Map von Nielsen Norman Group

Buchstabe Z Mustergilt in allen anderen Fällen für Werbung oder Websites, auf denen Informationen nicht unbedingt in großen Textblöcken dargestellt werden. Der Benutzer scannt den oberen Bildschirmrand, in dem sich normalerweise wichtige Informationen befinden. Dann bewegt sich sein Blick diagonal zur gegenüberliegenden Ecke und er tastet den unteren Bildschirmrand ab.



Quelle: tuts +

Designer erstellen normalerweise Seiten, die diesem Verhalten voll und ganz entsprechen, indem sie die wichtigsten Informationen in den Ecken platzieren, und alles andere befindet sich oben und unten auf dem Bildschirm und entlang der Diagonale, die sie verbindet. Wichtige Elemente auf der Website der Build Conference 2010 (unten) sind das Logo (linke obere Ecke), die Schaltfläche Jetzt registrieren (rechte obere Ecke) und die Liste der Sprecher (unten). Alle diese Elemente befinden sich strategisch an wichtigen Punkten des Buchstabens "Z".



Webseite erstellen

2) Größe


Dieses Prinzip ist ganz einfach: Zuerst lesen die Leute großen Text. Wenn Sie im folgenden Beispiel auf das Wort „Leistung“ anstatt auf „Knacken“ geachtet haben, sollten Sie sich an einen Spezialisten für Wahrnehmungspsychologie wenden. Sie können mit Sicherheit gutes Geld verdienen, wenn Sie Tests als Person mit einer sehr seltenen Anomalie bestehen. Rebecca Foster-



Poster

Dieses Prinzip ist so stark, dass es die Top-down-Regel überwiegt. Im vorherigen Beispiel überwältigt das Wort "Knacken" die "Zeit zum Handeln" aufgrund seiner Größe und Position auf der linken Seite (hier kommt die Regel "von links nach rechts" zur Rettung). Im folgenden Beispiel lesen wir jedoch den Text „Kampf für die Gleichstellung auf dem Feldzugspfad“ in großer Schrift zu dem Text, der sich ebenfalls links direkt darüber befindet: „Wahl 2012“.



GeschäftsberichtSpalte fünf

„Wahl 2012“ ist ein häufiges Thema, und der Designer entschied, dass der Titel des Artikels für den Leser von größerem Interesse ist, und vergrößerte ihn daher.

3) Raum und Dichte


Eine andere Möglichkeit, Aufmerksamkeit zu erregen, besteht darin, dem Inhalt genügend Raum zum Atmen zu geben. Wenn sich um die Schaltfläche herum viel negatives Leerzeichen oder ein großer Vorsprung im Text befindet, werden diese Elemente zuerst bemerkt.

Wie Sie im folgenden Beispiel sehen können, kann der Platz eine elegante Alternative oder zusätzlich zur Größe sein. Der Hauptsatz "Notre agence vous BEGLEIT ..." ist in Kleinschrift geschrieben, aber von einer großen Menge Platz umgeben, was seine Bedeutung signalisiert. Die folgenden Ausdrücke „Le Compendre“, „Le Réaliser“ und „Le Partager“ sind gerahmt, wodurch sie auf einem weißen Hintergrund hervorgehoben werden. Draw to Click



Website

Wenn wir über Dichte in Bezug auf die visuelle Hierarchie sprechen, meinen wir die allgemeine Anordnung von Raum, Text und anderen Details auf der Seite. Das folgende Beispiel verdeutlicht dieses Prinzip:



Bright Pink-Poster (via Smashing Magazine )

Im ersten Bild ist das Wort "Sport" in der Bildhierarchie stärker als "Badminton", da es höher und größer ist und durch Fettdruck hervorgehoben wird. Im zweiten Bild werden diese Wörter dank des schwarzen Rechtecks, das Badminton hervorhebt, ungefähr gleichbedeutend. Im dritten Bild wird das Wort "Sport", nicht jedoch "Badminton" gekritzelt. Dies führt zu dem gegenteiligen Ergebnis und erhöht die Hierarchie von "Badminton". Eine solche Wendung ist schwer vorhersehbar, weshalb Designer versuchen, bei der Raumnutzung an einem integrierten Ansatz festzuhalten.

4) Schriftart und -kombination


Die Wahl der Schriftart beeinflusst die visuelle Hierarchie erheblich . Die Haupteigenschaften einer Schrift sind die Sättigung, d. H. Die Dicke der Striche, aus denen die Buchstaben bestehen, und der Stil mit oder ohne Serifen. Andere Merkmale wie Kursivschrift spielen ebenfalls eine Rolle.

In The Tea Factory erfahren Sie, wie Typografie die Hierarchie und die Wortreihenfolge beeinflusst. Das Hauptaugenmerk liegt auf der Formulierung „der perfekte Tee, der Sie warm hält“. Aber der Unterschied im Schriftstil, die Verwendung von Kursivschrift in der Phrase sowie die Art und Weise, wie die Wörter angeordnet sind, machen den Text dynamischer. Der Aufruf zum Handeln „Sehen Sie sich unsere Auswahl an“ unterscheidet sich vom Haupttext in Größe und Umgebungsraum. Das



Branding der Teefabrik

In einigen Fällen ist es notwendig, unterschiedliche Informationen als gleich wichtig darzustellen. Wenn Sie es mit einer Schriftart der gleichen Größe und des gleichen Stils eingeben, können Sie Äquivalenz erzielen, aber das Design wird eintönig. Dies kann durch eine Kombination von Schriftarten wie auf dem Cover des Trendi-Magazins vermieden werden. Alle fünf Phrasen an den Seitenrändern sind in der visuellen Hierarchie gleich, unterscheiden sich jedoch durch zwei gut kombinierte Schriftarten - mit fettgedruckten und ohne Serifen, aber dünn und hoch. Trendi



Magazine Cover (über den Kasper Stromman Design Blog )

5) Farbe und Farbton


Dieses Prinzip ist auch einfach: Helle Farben heben sich vom Hintergrund gedämpfter oder grauer Töne ab , während helle Töne „entfernter“ und in der visuellen Hierarchie niedriger sind als dunkle und gesättigte. Auf der Where They At-Website wird der Kontrast durch Gelb und ein Farbfoto auf einem Schwarzweißgitter erzeugt, um den besten Effekt zu erzielen.



Die

Website Where They At Guggenheim verwendet auf ihrer Website Farben, um wichtige Informationen über den Standort des Museums, laufende Ausstellungen und Sonderprojekte hervorzuheben. Guggenheim



Website

Die Whitney Museum-Website verwendet dagegen eine einzige Schriftart, einen einzigen Stil und eine einzige schwarze Farbe, erstellt jedoch eine Hierarchie mit Graustufen. Der Ausdruck "Cory Arcangel über Popkultur" ist in der visuellen Hierarchie niedriger als "New on Whitney Stories", da er sich in einem helleren Farbton befindet, der auf einem weißen Hintergrund weniger hervorsticht. Whitney Museum



Website

Farbe ist im mobilen Design besonders wichtig, wenn ein kleiner Bildschirm die Möglichkeit einschränkt, andere Prinzipien der visuellen Hierarchie wie Größe und Raum zu verwenden. In der Grainger Industrial Supply-Anwendung ist die Schaltfläche „Zur Kasse gehen“ rot, wodurch sie sich von den übrigen Elementen auf der Seite unterscheidet. Die Schaltfläche "Suchergebnisse eingrenzen" ist dagegen grau und befindet sich auf derselben Ebene wie Elemente wie Suche und Produktverknüpfungen.



Grainger App Design (über Codrops )

6) Richtung


Das Seitenlayout wird normalerweise mithilfe eines Rasters aus vertikalen und horizontalen Linien erstellt, wodurch die Wahrnehmung von Informationen vereinfacht wird. In einem solchen System gibt es eine andere Möglichkeit, eine Hierarchie zu erstellen - das Raster zu durchbrechen. Text, der entlang einer Kurve oder diagonal platziert wird, hebt sich automatisch von den übrigen Elementen im Raster ab und zieht die Aufmerksamkeit auf sich. Dieses Prinzip wird effektiv in der Werbung eingesetzt, wie auf diesem Plakat von Frost Design.



Poster General Pants Co. (via Frost * collective )

* * *
Wenn Sie Ihre Designfähigkeiten verbessern möchten, abonnieren Sie unsere VK- Seite . Wir veröffentlichen dort Informationen zu jeder Lektion auf trydesignlab.com unter dem Tag # design101 @ iloveip .

PS. Wenn es Kommentare zur Übersetzung gibt, schreibe sie in die Kommentare.

Jetzt auch beliebt: