Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Visuelle Hierarchie im Webdesign zu verstehen

by
Length:LongLanguages:
This post is part of a series called Web Design Theory.
Designing for the New Fold: Web Design Post Monitorism

German (Deutsch) translation by Wilhelm Wolf (you can also view the original English article)

Visuelle Hierarchie ist eine der wichtigsten Grundlagen für die effektive web-design. In diesem Artikel wird untersucht, warum die Entwicklung einer visuellen Hierarchie ist entscheidend auf dem web, die Theorie dahinter, und wie können Sie einige sehr einfache übungen in Ihrem eigenen Entwürfe um diese Grundsätze in die Praxis umzusetzen.

Design = Kommunikation

Im Kern ist design alles um visuelle Kommunikation: Um eine effektive designer, Sie müssen in der Lage sein, klar zu kommunizieren Ihre Ideen zu den Zuschauern oder anderen verlieren Ihre Aufmerksamkeit. Menschen sind wankelmütig, obwohl; wenn man Ihnen einen massiven block von Informationen, die Chancen sind, dass 99 von 100 Menschen nicht die Mühe, es zu Lesen. Warum? Denn die meisten Menschen sind von Natur aus visuelle Denker, die nicht-Daten-Prozessoren.

Um herauszufinden, warum dies so ist, ist es wichtig zu verstehen, ein wenig über die Art, wie wir die Dinge sehen. Menschen sind nicht, was Sie nennen würde, "Chancengleichheit sehen-ers". Anstatt in visual information und Verarbeitung, gleichmäßig verteilen, Leute organisieren, was Sie sehen in Bezug auf die "Blickbeziehungen". Betrachten wir das folgende Bild von zwei ordentlichen Kreisen:

visual hierarchy in web design

Chancen sind, Sie nicht sehen, "zwei Kreise"; Stattdessen, Sie sah "ein schwarzer Kreis mit einem kleineren roten Kreis".

Der Grund ist ziemlich einfach: Wenn präsentiert, mit etwas so einfaches wie zwei Kreise, eine person nicht nur sehen, zwei ordentlichen Kreise, Sie werden einen Weg finden, zwischen den beiden zu unterscheiden. Ein Kreis könnte größer sein, oder kleiner, oder gefärbt, oder jede andere Vielfalt von unterschieden. Diese Unterschiede erlauben es uns, zu unterscheiden zwischen den Objekten und Ihnen eindeutige Bedeutungen.

Lassen Sie uns schauen Sie sich jetzt ein komplexeres Bild:

visual hierarchy in web design

Die zusätzliche Komplexität eigentlich wieder einsetzt unser Wunsch, zu "klassifizieren" die Objekte, in Bezug auf Beziehungen. Gemeinsamkeiten und Unterschiede werden die frame Ansicht, dass wir die Formen durch. Unterschiede in der Skala schlagen vor, dass ein Objekt, der uns näher ist als eine andere oder dass eine dominanter ist als die andere; Variationen in Farbe könnte darauf hindeuten, dass ein Objekt hält eine einzigartige Persönlichkeit, die es abhebt von dem anderen Objekt. Eine Menge von Informationen geliefert werden können in nur einem einzigen Bild, indem Sie einige sehr rudimentäre Werkzeuge.

...Verständnis, dass die Leute sehen, die unsere designs in Bezug auf Beziehungen ist von entscheidender Bedeutung, um zu einem effektiveren designer.

Nehmen wir mal dieses Beispiel zurück zum web-design; Denn web-design ist alles über die Kommunikation visuelle Informationen, die verstehen, dass die Menschen sehen, die unsere designs in Bezug auf Beziehungen ist von entscheidender Bedeutung, um zu einem effektiveren designer. Während es könnte scheinen, wie es genug, um nur austeilen Informationen, wie web-Designer, unsere Aufgabe ist es zu brechen, die roh-Informationen in leckere kleine Stücke von visuell relevanten Informationen, die einfach auf die Augen, und noch wichtiger ist, effektiv bei der Vermittlung der Botschaft, die hinter einer Webseite.

Die Dämmerung der Hierarchie

Es gibt hundert Erklärungen dafür, warum die Menschen sehen in Bezug auf Beziehungen; Wenn Sie waren, Sie zurückzuverfolgen anthropologisch, Sie könnte zu dem Schluss kommen, dass eine Jäger-und-Sammler-Mentalität, die den Menschen gezwungen, an einem Punkt zu erkennen, dass das sehen von Beziehungen ist ein survival skill.

visual hierarchy in web design

Siehe, auch die Urmenschen hatten einen gesunden Respekt für den optischen Kontrast.

Vielleicht eine praktische Erklärung ist, dass es einfach die Art, wie unser Gehirn kategorisieren Informationen: Gruppierung ähnliche visuelle Elemente und organisieren Sie Sie in sinnvolle Muster ist als Bestandteil unserer menschlichen Natur, wie Essen oder trinken. Wie dem auch sei, Tatsache ist, dass auch in ist es grundlegendste form, die Informationen, die organisiert, mit einer Hierarchie, im Geist immer effektiver zu kommunizieren als unorganisierten Informationen.

Betrachten Sie das folgende Bild von zwei Textblöcken:

visual hierarchy in web design

Im Beispiel oben sehen wir die rudimentärste form eines visuellen Hierarchie-system auf den text anwenden. Die Informationen in jedem der beiden Beispiele ist das nicht anders, aber wie wurde es aufgebrochen dramatisch verändert die Art und Weise, die Leser sehen es und nehmen es in. Wenn wir sprechen über visuelle Hierarchie in Bezug auf die Typografie, das ist, was wir meinen. Die Nähe, die Skalierung und die ähnlichkeit der text-Formatierung erlaubt, ein Leser zu organisieren, im unteren Beispiel ist in Titel und Paragraphen. Die Hierarchie gibt der Titel mehr Sinn, als die anderen Informationen, und macht es leichter zu Scannen.

Okay, also das ist alles ziemlich grundlegende Dinge, richtig? Lassen Sie uns Tauchen Sie ein in einige tiefere Beispiele dafür, wie können Sie dieses sehr einfache Prinzip zu einer sehr anspruchsvollen designs:

Der Hierarchist Toolbox

Verständnis, dass visuelle Hierarchie ist wichtig ist alles schön und gut, aber wie funktioniert ein designer eigentlich erstellen? Die "Werkzeuge", die wir betrachten werden, sind so einfach wie ein Zimmermann ' s toolset - hammer, Nagel, Säge, etc - Es ist, was Sie mit Ihnen tun, ist das, was zählt!

Größe

Objekte, die größer sind, fordern mehr Aufmerksamkeit. Mit Größe als eine hierarchische tool ist ein effektiver Weg, führen das Auge des Betrachters auf einen bestimmten Teil der Seite. Denn Größe ist eine der mächtigsten Formen der Organisation, ist es wichtig zu Größe korrelieren mit der Bedeutung in einem design. Die größten Elemente sollten die wichtigsten in den meisten Fällen; die kleinsten Elemente sollten die am wenigsten wichtige.

visual hierarchy in web design

Der Einsatz von BIG, Fett, fügt eine Ebene, um dieses sonst so chaotische design. Das Auge sollte natürlich verschieben von großen Elementen nach unten, um die kleineren Elemente.

Farbe

Farbe ist ein Interessantes Werkzeug, weil es kann die Funktion sowohl als Organisations-tool als auch als Persönlichkeit tool. Fett, kontrastierenden Farben auf ein bestimmtes element einer website Aufmerksamkeit fordern (wie mit den Tasten oder Fehlermeldungen oder hyperlinks). Beim Einsatz als Persönlichkeits-Werkzeug, Farbe erweitern können darüber hinaus in mehr anspruchsvolle Arten von Hierarchie, Mit üppigen, beruhigende Farben bringen kann einem emotionalen Appell für eine Seite. Farbe kann Einfluss auf alles, was von einem Webseiten-Marke (sprich: CocaCola-Rot), Symbolik (z.B.: kühlen, gedämpften Farben). Moderne Anwendungen von Farbe kann auch verwendet werden, um "Stufen" von Daten innerhalb einer Hierarchie, wie im folgenden Beispiel:

visual hierarchy in web design

Die Spektren-Viewer Website verwendet die Farben repräsentieren verschiedene news-Kategorien, so dass es leicht zu finden, die eine bestimmte Art von Informationen auf der Basis von color-key.

Kontrast

Dagegen zeigt relativ wichtig. Dramatische Verschiebungen in der text-Größe oder die Farbe vermittelt eine Botschaft, dass etwas anders ist und Besondere Aufmerksamkeit erfordert. Wechsel von einem hellen hintergrund Farbe auf einem dunklen hintergrund-Farbe kann schnell trennen Sie die wesentlichen Inhalte einer Seite aus dem footer.

visual hierarchy in web design

Der Kontrast zwischen den hellen, luftigen header-Abschnitt und dunklen, erdigen Fußzeile erstellt eine eindeutige Hierarchie der Informationen.

Ausrichtung

Ausrichtung schafft Ordnung zwischen den Elementen. Es kann so einfach sein wie der Unterschied zwischen einem "content-Spalte" und eine "sidebar-Spalte", aber die Ausrichtung kann auch auf komplexere hierarchische Rollen. Denken Sie zum Beispiel an die macht der information platziert in der rechten oberen Ecke einer Webseite. Weil die Nutzer generell erwarten, dass die Informationen in diesem Teil des Bildschirms, um im Zusammenhang mit Profilen, Konten, Einkaufswagen, usw., es gibt alles Orte, die in diesem Bereich einen Einblick in die "offizielle". Die Ausrichtung kann auch provozieren Interesse, wenn Sie in einzigartige Art und Weise, wie in den folgenden Beispielen:

visual hierarchy in web design

Die Sachen, die Vorlage nutzt eine einzigartige horizontale Ausrichtung system zu trennen, Marke und navigation vom blog-Inhalte zu veröffentlichen.

Die Flex-Vorlage benutzt ein grid-layout inspiriert zu entwickeln, die visuell Interesse sowie eine Taxonomie-driven visuelle Hierarchie.

Wiederholung

Wiederholung tritt die relative Bedeutung der Elemente; Wenn alle "Absatz" - text wird Grau, wenn ein Benutzer einen neuen block der graue text, kann er davon ausgehen, es ist eine andere basic-Absatz; wenn sich der Benutzer auf einen blauen link oder einen schwarzen Titel, kann er sicher davon ausgehen, es ist anders und einzigartig von den grauen text.

visual hierarchy in web design

Der Virgin-Website schafft sich wiederholende Elemente wie Absätze im text, dann bricht die Wiederholung, wenn Sie will zeichnen Sie Aufmerksamkeit (wie der rote text zu zitieren).

Nähe

Nähe trennt die Elemente voneinander und schafft sub-Hierarchien. Innerhalb einer Seite könnte es widgets, die sind von einander getrennt durch Leerzeichen,; innerhalb dieser widgets gibt es eine neue Hierarchie der Titel, den Untertitel und den Inhalt. Nähe ist auch der Schnellste Weg, zu verbinden, die ähnliche Inhalte. Im folgenden Beispiel, ist es einfach zu finden bestimmte Arten von Inhalten einfach auf Ihre Nähe zueinander.

visual hierarchy in web design

Die Tuts+ Seiten dieses tatsächlich zu tun wirklich gut (nicht zu toot unser eigenes horn!). Die Links "Inhalte" - Spalte ist eindeutig getrennt in der Nähe-sidebar widget-Bereich. Darüber hinaus meta-Daten innerhalb einer bestimmten blog-post ist platziert in der Nähe der post und weitere von anderen Beiträgen, verstärken ein Gefühl der "Zugehörigkeit".

Dichte und Leerraum

Dicht Verpacken-Elemente in einem Raum macht es sich "schwer" und unübersichtlich; Wenn Elemente sind beabstandet zu viel, verlieren Sie möglicherweise die Beziehungen zu einander. Wenn eine Seite ist für "nur rechts", wird das Auge leicht erkennen, wenn die Elemente in Zusammenhang stehen, und wenn Sie es nicht sind.

visual hierarchy in web design

Durch die Verteilung der Elemente aus und halten viel Leerraum auf der Seite, dieses design macht es einfacher für Menschen zu Wandern und finden Sie die kleinen, dicht gepackten Kisten-Inhalt.

Stil und Textur

Vielleicht sind die meisten open-ended-Werkzeug in der Hierarchists Toolbox-Stil kann verwendet werden, um zu vermitteln, eine form der Hierarchie, die beide umarmt und überwindet die anderen tools. Zum Beispiel: eine flache graue hintergrund "fühlt" sich anders als eine asphalt-textur als hintergrund.Dieser Stil oder Persönlichkeit gegeben, die durch die designer spielen natürlich eine Rolle, wie verschiedene visuelle Beziehungen gemacht werden.

Es ist erwähnenswert, dass Stil ist auch einer der gefährlichsten Werkzeuge, die ein designer benutzen kann. Genauso wie ein Schreiner Schnitt seine finger auf eine band-Säge, ein designer kann leicht irreführen der Menschen durch überbetonung bestimmter Elemente, durch Stil. Stellen Sie sich einen stark strukturierten, stark entwickelt, Seiten-element, das verlangt so viel Aufmerksamkeit, dass es ablenkt, statt zu informieren. Diese Idee erstreckt sich auch auf Schriften, Schaltflächen, Registerkarten und weitere Elemente. Rücksicht auf die Auswirkungen auf eine Allgemeine design, wenn Sie die Option zum hinzufügen von zusätzlichen Stil und Polnisch, um ein element.

visual hierarchy in web design

Jeff Finley die Website hat einen tollen job zu kombinieren viele der tools, die wir hier diskutiert, aber seine Verwendung von ursprünglich gestalteten Elementen über die standard-UI-Futter sind, was gibt dem ganzen Sinn für design vorsätzlichen Hierarchie. Jeff schafft fügen Sie gerade genug Stil, um seine Website fühlen Sie sich persönlich, ohne es zu uebertreiben.

Fehlgeschlagen Hierarchie

Eine gute visuelle Hierarchie ist nicht zu wild und verrückt Grafiken oder die neueste photoshop-Filter, es geht um die Organisation von Informationen in einer Weise nutzbar, zugänglich und logisch, um die täglichen Besucher der Website.

Wie ich gerade vorgeschlagen, im letzten Abschnitt, es ist wichtig zu beachten, dass die Hierarchie kann verwendet werden, für beide gut und böse. Denken Sie an all die nervige Flash-Werbung, popup-windows, glitter Banner, etc. dass die web-geplagt hat, mit über die Jahre! Während diese anzeigen erfolgreich greifen die Aufmerksamkeit, die Sie letztlich scheitern die Eigentümer der Website und den Betrachter durch das brechen der visuelle Hierarchie innerhalb einer Website. Ebenso, wenn ein designer baut eine visuelle Hierarchie, so dass bestimmte wichtige Informationen, die fast unmöglich zu finden, die designer versagt bei seiner Aufgabe. Eine gute visuelle Hierarchie ist nicht zu wild und verrückt Grafiken oder die neueste photoshop-Filter, es geht um die Organisation von Informationen in einer Weise nutzbar, zugänglich und logisch, um die täglichen Besucher der Website.

Warum Hierarchie ist Besonders wichtig für Web-Designer

"Designer erstellen können, die Normalität aus dem chaos; Sie können gut kommunizieren Ideen durch die Organisation und Manipulation von Worten und Bildern."—Jeffery Veen, The Art and Science of Web DesignJeffrey Veen schrieb diese Worte im Jahre 2001, aber Sie halten immer noch eine Menge Energie, die heute, wo "information overload" zu sein scheint, an der Tagesordnung.

Jeffrey Veen schrieb diese Worte im Jahre 2001, aber Sie halten immer noch eine Menge Energie, die heute, wo "information overload" zu sein scheint, an der Tagesordnung. So Leute, wir hatten schon immer einen ausgeprägten Sinn für visuelle Organisation. Aber als Gesellschaft haben wir seit barraged mit einem wahren tsunami von visuellen Informationen in den letzten paar Jahrzehnten, als Folge, die Menschen heutzutage sind hyper-sensibel auf visuelle Hierarchie. Dies ist insbesondere der Fall auf der web, wo die Studien haben bewiesen, dass eine regelmäßige web-Surfer haben gelernt, zu "Scannen" Inhalte von Haus aus; automatische Suche nach Informationen, die relevant für Ihre Interessen und verwerfen/Mißachtung von Informationen, die nicht.

Weil dieses, immer ein Meister der visuellen Hierarchie ist nicht optional, es ist zwingend erforderlich. Als typisches web-surfen-Plattformen erweitern, von der traditionellen überwachung auf Handys, Tablet-PCs, sogar Fernseher, es ist immer wichtig, dass wir starke, klare visuelle Systeme für die Kommunikation mit web-Surfer.

Eine Übung, um zu Testen, Visuelle Hierarchie

Zum Abschluss, ich möchte gerne mit einer sehr einfachen übung. Als Beispiel benutzen wir eine website, die Sie Häufig besuchen, oder ein Projekt, das Sie gearbeitet haben vor kurzem; Die übung geht so:

  1. Liste der Schlüssel-Informationen Punkte, die ein Besucher wahrscheinlich zu suchen.
  2. Zuweisen von Werten (1-10) nach Ihrer Bedeutung für den durchschnittlichen Besucher.
  3. Nun, schauen Sie sich die aktuellen design wieder.
  4. Zuweisen von Werten (1-10) nach dem tatsächlichen visuellen Bedeutung, wie Sie es in der live design.
  5. Bedenken Sie: Nicht die erwartete Bedeutung übereinstimmen mit dem tatsächlichen entworfen Bedeutung?

In den meisten Fällen wird die Antwort enthalten Schattierungen von "Nein". Es gibt viele Gründe für diese - client-Anforderungen, unerfahrenen Designer, design-by-committee -, oder hundert andere Gründe, die Sie haben wahrscheinlich Lesen. Was solls, in einigen Fällen, der designer kann wollen, zu einer Irreführung des Betrachters (berücksichtigen Sie, dass eine "freie" Seite, die versucht, führen den user auf bezahlte Inhalte). Was auch immer der Grund, das Verständnis visueller Hierarchie und versuchen zu interpretieren, es ist ein Weg, um verbessern Sie die Weise, die Sie sehen, web-design, in einem ganz neuen Licht. Hoffentlich werde helfen, informieren Sie Ihre eigene Arbeit als gut!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.