Die visuelle Hierarchie ist ein wichtiges Element in jedem Designprojekt. Es sagt den Leuten, wo sie suchen müssen und welche Dinge auf dem Bildschirm oder der gedruckten Seite am wichtigsten sind. Die Hierarchie gibt den Lesern ein Gefühl dafür, wie sie das Material von Anfang bis Ende mit visuellen Hinweisen und Ablauf lesen können.
Während Sie visuelle Hierarchie mit einer Reihe verschiedener Werkzeuge erstellen können, werden wir heute nach Möglichkeiten suchen, Strukturen nur mit Typografie zu erstellen. (Und werfen Sie einen Blick auf die Bilder, die in diesem Beitrag verwendet werden; dies sind alles Beispiele für eine großartige Typhierarchie in Aktion.)
Warum ist Hierarchie wichtig?
Die Typhierarchie organisiert die Textelemente in Ihrem Design und ordnet sie. So wie Webdesigner und Entwickler Header-Tags verwenden (h1, h2, h3 usw.), um die Wichtigkeit von Text zu organisieren, werden in der visuellen Hierarchie visuelle Hinweise verwendet. Darüber hinaus hilft die Typhierarchie den Lesern, Text zu scannen, und Bits werden in Chunks, die gleich aussehen, schneller gelesen.
Im Allgemeinen beginnen englischsprachige Leser oben links und lesen quer und runter. Typ wird häufig organisiert, um dieses Verhalten zu spiegeln.Im Allgemeinen beginnen englischsprachige Leser oben links und lesen quer und runter. Typ wird häufig organisiert, um dieses Verhalten zu spiegeln. Was aber, wenn der größte und kühnste Text in der Mitte der Seite liegt? Oft beginnt ein Leser dort und kehrt dann an den Anfang der Seite zurück und fährt mit dem normalen Leseverhalten fort.
Hierarchie ist wichtig, da der Designer bestimmen kann, was jemand wahrscheinlich als erstes, als zweites und so weiter liest. Aus diesem Grund kann der Designer den Typ so erstellen, dass er weiß, welche Informationen wahrscheinlich in welcher Reihenfolge empfangen werden.
Da das Erstellen einer Hierarchie für Designer wichtig ist, ist es für Leser ebenso wichtig. Eine gute visuelle Hierarchie zeigt uns, worauf es ankommt, was das Lesen erheblich vereinfacht. Sie wissen zum Beispiel, dass die Überschrift der wichtigste (oder aufmerksamkeitsstarke) Teil einer Geschichte oder eines Artikels ist, weil sie der größte ist, gefolgt von Unterüberschriften und dann dem Haupttext. Zur besseren Lesbarkeit können Sie den großen Text lesen, um eine Idee zu erhalten, ob der Artikel Sie interessieren würde, bevor Sie viel Zeit in die Kopie investieren.
So erstellen Sie eine Hierarchie
Es gibt keine einstufige Lösung zum Erstellen einer visuellen Hierarchie mit Text. Es kann mit Größe, Gewicht, Farbe, Textur, Auswahl und Kombinationen von Schriftarten, Ausrichtung und Abstand oder einer Kombination dieser Werkzeuge erstellt werden.
Größe
Eine der einfachsten Methoden zum Erstellen einer Hierarchie mit Typ besteht in der Größe. Leser sehen oft zuerst den größten Typ und beginnen von dort aus zu lesen.
In Bezug auf die Größe ist der Maßstab ebenso wichtig. Um eine unterschiedliche Hierarchie zu erstellen, müssen die Größen in Bezug auf andere Typen auf der Seite stark voneinander abweichen. Dabei ist zu beachten, dass verschiedene Schriftarten möglicherweise unterschiedlich skaliert werden. Daher reicht es möglicherweise nicht aus, die Punktgröße zu ändern. Sie müssen prüfen, wie Schriftarten zusammenarbeiten, um sicherzustellen, dass Größe und Maßstab richtig ausgewogen sind.
Wie fangen Sie damit an, die richtige Größe und Skalierung für ein Projekt zu erstellen? Beginnen Sie mit dem Haupttext und gehen Sie von dort weiter. Und für Textelemente, die verwendet werden, um die Leute wirklich anzulocken, sollten Sie groß sein.
Hier sind ein paar Prozentsätze, um Ihnen den Einstieg zu erleichtern:
- Haupttext (14 Punkte)
- Hauptüberschriften: 250 Prozent mehr als Haupttext (35 Punkte)
- Sekundäre Header: 175 Prozent mehr als Haupttext (25 Punkte)
- Navigationselemente: 165 Prozent mehr als Haupttext (23 Punkte)
- Sekundärnavigation oder Menüs: 140 Prozent mehr als Haupttext (20 Punkte)
Schriften
Nach der Größe sind Schriftarten das am häufigsten verwendete Element für die Erstellung typografischer Hierarchien. Der Schlüssel ist der Kontrast zwischen den Schriftbildern. (Dies ist ein Grund dafür, dass Designer häufig eine Serifenschrift und eine serifenlose Schrift für ein Projekt auswählen.)
Suchen Sie für die besten Kombinationen nach Schriftarten, deren Gewicht sich durch einen ähnlichen Ton oder ein ähnliches Erscheinungsbild unterscheidet. Wenn Sie abgerundete Schriftarten verwenden, halten Sie sich beispielsweise an Buchstabenformen mit ähnlichen Formen in den o-Zeichen. Entscheiden Sie sich für Schriften mit ähnlichen x-Höhen, wenn die Stile im gesamten Projekt in Übereinstimmung miteinander verwendet werden.
Gewicht
Die Strichstärke des Typs, den Sie für ein Projekt auswählen, kann auch eine Hierarchie erstellen. Je dicker die Schrift, desto kräftiger und größer erscheint sie. Helle, verdichtete und dünne Schriftarten wirken oft kleiner als sie tatsächlich sind. Fett-, Ultra- und Hammerkopf-Schriftarten können größer erscheinen als die Punktgröße.
Wie groß oder klein eine Schrift nach Gewicht aussieht, ist auch relativ zu den anderen im Projekt verwendeten Schriftarten. Das Koppeln von dicken und dünnen Schriftarten erzeugt sofort ein Gefühl der Hierarchie, wobei der dicke Stil das Aussehen von größerer Bedeutung (oft sogar dann, wenn er auf dem Display tatsächlich kleiner ist).
Farbe
Durch die Verwendung von Farbe kann der Schrift mehr Nachdruck verliehen werden. Denken Sie an einige der Farbregeln, die Sie als Kind gelernt haben - warme Farben (Rot, Gelb, Braun) haben mehr Pop, während kühle Farben (Blau, Purpur, Grau) verblassen.
Berücksichtigen Sie bei der Verwendung von Farbe zum Erstellen einer Hierarchie die Farbtöne, die für Vordergrund, Typ und Hintergrund verwendet werden. Der Farbkontrast spielt ebenfalls eine wichtige Rolle. Die am meisten gesättigten oder hellsten Farben werden häufig "heben". aus dem Bildschirm gegen gedämpftere Töne.
Orientierung
Wie sich der Test in einem Layout als Nächstes in Bezug auf anderen Text befindet, kann sich auf die Gesamthierarchie auswirken. Normalerweise ist der meiste Text horizontal in einer geraden Linie über den Bildschirm ausgerichtet. Aber was platzieren Sie Text vertikal?
Durch diese Änderung der Ausrichtung wird der Fokus auf diese Wörter oder Textblöcke gelegt, wodurch sie als das wichtigste Element erscheint. Durch Kippen, Verdrehen oder anderweitige Veränderung der Textform kann derselbe Effekt erzielt werden. (Es sei darauf hingewiesen, dass die meisten Designer diese Art von Tricks mit Ausnahme einiger weniger Umstände häufig vermeiden.)
Platz
Durch Leerzeichen kann Schrift größer und lesbarer erscheinen. Der Mangel an Leerraum kann dazu führen, dass es sich enger und kleiner anfühlt. Nutzen Sie Platz zu Ihrem Vorteil, wenn Sie ein Gefühl der Hierarchie erzeugen.
Denken Sie über den Abstand zwischen den Textzeilen nach. Denken Sie an Kerning für die größten Schriftstile. Denken Sie über die räumliche Beziehung zwischen Buchstaben und der Leinwandkante nach. Denken Sie über die Beziehungen zwischen verschiedenen Größen, Stilen und Farben nach.
Jeder einzelne Bereich kann Auswirkungen auf Ihre hierarchische Skala haben. Halten Sie einen ähnlichen Typ näher zusammen und mit weniger Platz als nicht zusammenhängende Elemente. Gestalten Sie Ihren Raum so, dass der Text in eine bestimmte Reihenfolge fällt. Größere, mutigere und hellere Textelemente benötigen oft mehr Platz als kleinere, einfachere Textblöcke.
Textur
Textur ist ein loses Konzept in Bezug auf den Typ. Nein, wir sprechen nicht über das Einfügen einer Textur in die Beschriftung. Wir beziehen uns auf das Erstellen eines Texturmusters mit der Art und Weise, wie Buchstaben und Wörter auf der Seite oder dem Bildschirm verbleiben.
Innerhalb von Textblöcken erhalten Sie einen gemusterten Look. Um mehr Hierarchie festzulegen, brechen Sie das Muster auf. Dies kann mit einem der bereits erwähnten Tools oder durch Ändern eines einfachen Textblocks wie dem Ausrichten eines einzelnen Textblocks erreicht werden.
Diese Änderung der Gesamttextur des Textes kann einen wirklichen Einfluss auf die Wahrnehmung haben. Seien Sie vorsichtig bei zu vielen strukturellen Änderungen, da diese bei häufigem Gebrauch ablenken können.
3 (oder 4) Ebenen des Typs
Während einige Projekte komplexe Hierarchien erfordern, können die meisten Designs mit drei Hierarchiestufen der Typografie erfolgreich sein. Diese Stufen sind primärer Typ, sekundärer Typ und tertiärer Typ. (In dieser Skala füge ich keine Banner oder Logos hinzu; sie würden als vierte Kunststufe der Typografie angesehen.)
Haupttyp ist häufig die Typografie auf der Seite mit dem meisten visuellen Gewicht, wie zum Beispiel Hauptüberschriften oder Anführungszeichen. Der Zweck des primären Typs besteht darin, Leser in das Gesamtdesign einzubeziehen.
Sekundärtyp ist alles andere, was nicht der Hauptinhalt ist. Dies kann Untertitel, Unterüberschriften und Elemente des Navigations- oder statischen Typs umfassen.
Tertiärtyp ist die Hauptteilkopie. Bei der tertiären Kopie ist eines zu beachten: Sie muss lesbar sein. Für den Designstil dieser Typenebene ist wenig anderes wichtig.
Kunstart Dieser Typ wird als grafisches Element verwendet. Es liegt außerhalb des eigentlichen Bereichs des Typs und ist viel visueller. Dies kann Banner oder Logos beinhalten. Es kann Bilder enthalten, die aus Schriftzügen oder anderen kunstvoll gestalteten typografischen Elementen bestehen. Typischerweise besteht der Kunststil nur aus einem einzigen Buchstabenwort und ist nicht Teil dessen, was von den Leuten "gelesen" werden soll. im Gesamtdesign.
Fazit
Das Organisieren kann sowohl Spaß als auch eine Herausforderung darstellen. Durch das Kombinieren von Techniken und verschiedenen Typeffekten und -stilen können Sie ganz einfach einen Textfluss nur mit Typ erzielen.
Denken Sie daran, beim Erstellen einer Kontur die Beziehungen zwischen Größe, Gewicht, Farbe, Textur, Auswahlmöglichkeiten und Kombinationen, Ausrichtung und Abstand zu berücksichtigen. Denken Sie darüber nach, wie Menschen Informationen lesen und verdauen, wenn diese Techniken verwendet werden, so dass das Kopieren organisiert ist und in einem logischen Format für das am besten verwendbare typografische Design erfolgt.