Share
Eine der wichtigsten Techniken zur effektiven Kommunikation (oder "Ehrung") von Inhalten ist die Verwendung typografischer Hierarchien. Typografische Hierarchie ist ein System zum Organisieren von Typen, das eine Reihenfolge der Wichtigkeit innerhalb der Daten festlegt, sodass der Leser leicht finden kann, wonach er sucht, und durch den Inhalt navigieren kann. Es lenkt den Blick des Lesers dahin, wo ein Abschnitt beginnt und endet, und ermöglicht dem Benutzer, bestimmte Informationen auf der Grundlage der konsistenten Verwendung von Stil in einem gesamten Textkörper zu isolieren.
„Typografie existiert, um Inhalte zu würdigen.“ - Robert Bringhurst: Die Elemente des typografischen Stils
Sehen wir uns ein Beispiel für Inhalte mit und ohne einer entworfenen Hierarchie an.
Das Bild unten zeigt eine Liste von Konzerten, die von meinem Haus aus im Freien auf der Straße gespielt werden. Nehmen wir an, ich habe das Wochenende vom 15. bis 17. August frei, und ich möchte sehen, ob es ein Konzert gibt, an dem ich in dieser Zeit gerne teilnehmen würde. Im folgenden Szenario ist dies eine Aufgabe, die viel schwieriger ist, als sie sein sollte. Ohne jegliche Art von Hierarchie muss man einen Großteil der Daten durchsuchen, um die Termine für die Konzerte zu finden. Stellen Sie sich vor, Sie versuchen, eine Liste von 50 Konzerten durchzusehen.
Ok, vielleicht bin ich im Beispiel dramatisch, aber wir können das viel einfacher machen.
Wie Sie im nächsten Beispiel sehen können, sind Titel, Datum und Beschreibung jeweils eindeutig, konsistent und durch Absatzabstände isoliert. Auf diese Weise können wir die Datumsangaben (oder Bandnamen für diese Angelegenheit) anhand des Stylings einfach isolieren, und wir erhalten die Informationen, die wir benötigen. Anscheinend gehen wir zur Avett Brothers Show!
Es sollte darauf hingewiesen werden, dass beim Entwerfen für das Web eine weitere Ebene berücksichtigt werden muss. Eine Webseite selbst hat eine Hierarchie, die nicht nur gelesen wird, sondern auch Interaktion enthält. Die Seite als Ganzes muss so gestaltet sein, dass dem Benutzer deutlich wird, welche Aktionen zur Verfügung stehen und wie einfach auf die gesuchten Informationen zugegriffen werden kann, wie ein Artikel gekauft wird, usw.
In diesem Artikel wird jedoch streng auf die Hierarchie eingegangen, da sie sich auf den Typ bezieht. Glücklicherweise haben wir unser eigenes praktisches HTML-Tag, mit dem wir die typografische Hierarchie in den von uns erstellten Websites semantisch festlegen können. Überschriften-Tags (H-Tags) ermöglichen es uns, eine Reihenfolge der Wichtigkeit für unseren Inhalt festzulegen: H1 bis H6, H1 am wichtigsten, H6 am wenigsten. Suchmaschinen verwenden diese Daten, um die Priorität des Inhalts einer Webseite zu interpretieren.
Aber wie gestalten wir diese H-Tags effektiv so, dass sie für unseren Inhalt sinnvoll sind? Ich bin froh, dass du gefragt hast!
Es gibt einige grundlegende Methoden zum Erstellen einer visuellen typografischen Hierarchie:
Am häufigsten werden diese Methoden in Kombination miteinander verwendet. In der zuvor angezeigten Concert-Liste wurden Größe, Farbe, Abstand und Typkontrast verwendet. Die Kombinationen sind buchstäblich endlos.
Dies ist die einfachste und gebräuchlichste Methode zum Erstellen einer Hierarchie.
Wenn Sie einfach eine stärkere Gewichtung einer Schriftart verwenden, kann dies die Isolation erleichtern.
Farbe spielt für das, was unser Auge als primär und sekundär betrachtet, eine große Rolle. Allgemein gesagt; warme Farben knallen, kühlere Farben treten zurück.
Wenn Informationsabschnitte in Beziehung zueinander stehen, kann eine Hierarchie erstellt werden.
Eine gute Möglichkeit, eine Hierarchie zu erreichen, ist die Verwendung von kontrastierenden Schriftarten.
Wie zuvor erwähnt, können diese Verfahren am effektivsten sein, wenn sie in Kombination miteinander verwendet werden. Dies ist der Spaß, bei dem Sie entscheiden, welche Kombination für Ihren Inhalt und Ihr Layout die richtige ist!
Eines der wichtigsten Konzepte bei der Typengestaltung ist der Abstand. Es ist eines der schwierigsten Konzepte, das für angehende Designer zu begreifen ist, aber es ist auch eines der augenfälligsten. Der richtige typografische Abstand ist entscheidend für die Festlegung der Hierarchie. Es kann den Unterschied zwischen Verwirrung und Klarheit ausmachen. Es wird in den meisten hierarchischen Systemen verwendet und ist in allen Beispielen dieses Artikels enthalten.
Die Regel von Nähe Im Design heißt es im Allgemeinen, dass verwandte Elemente näher zueinander erscheinen sollten als Elemente, die nicht miteinander verwandt sind. Zu einem richtigen Abstand gehört jedoch mehr als nur eine harte Rückkehr zwischen Abschnitten des Typs. Im Allgemeinen schafft eine harte Rückkehr zu viel Abstand zwischen Inhalten im Kontext eines Absatzes. Absatzabstände - entweder vorher oder nachher - sollten verwendet werden. Ich neige dazu, einen Absatzabstand zu verwenden, der der Hälfte der Zeilenhöhe (oder der Zeilenlänge) entspricht. Auf diese Weise kann die Gruppe von Inhalten normalerweise zusammenhalten und eine angemessene Aufteilung der Inhalte innerhalb der Gruppe vornehmen.
Es ist wichtig, dass die Bedeutung eines bestimmten Inhalts berücksichtigt wird, wenn über Hierarchie nachgedacht wird. Was ist der Inhalt des Inhalts? Was versucht es zu kommunizieren? Wenn Sie es nicht wissen, lesen Sie es, bevor Sie Entscheidungen zur Hierarchie und zum Stil treffen.
In einigen Szenarien haben Sie möglicherweise die Freiheit, eine der oben aufgelisteten Hierarchiemethoden zu verwenden, in anderen Fällen sind Sie jedoch auf einen bestimmten vertikalen oder horizontalen Raum beschränkt oder haben einen ausreichenden Kontrast des Typs auf einem Hintergrund. Beurteilen Sie, welche Methoden für die Situation geeignet sind, und wenden Sie die sinnvollen Methoden an. Hier gilt in der Regel das alte „einfacher ist besser“ -Mantra. Denken Sie daran, dass es das Ziel ist, den Inhalt organisiert darzustellen.
Erstellen Sie nun eine hierarchische Schönheit. Wenn Sie interessiert sind, habe ich einige interessante Ressourcen bereitgestellt, die sich auf Typ, Hierarchie und das Web beziehen:
Accentsconagua