Share
Een van de belangrijkste technieken voor het effectief communiceren (of "eren") van inhoud is het gebruik van typografische hiërarchie. Typografische hiërarchie is een systeem voor het ordenen van typen waarmee een volgorde van belangrijkheid in de gegevens wordt vastgesteld, zodat de lezer gemakkelijk kan vinden waarnaar hij op zoek is en door de inhoud kan navigeren. Het helpt de lezer het oog te leiden naar waar een sectie begint en eindigt, terwijl de gebruiker bepaalde informatie kan isoleren op basis van consistent gebruik van stijl in een hele tekst.
"Typografie bestaat om de inhoud te respecteren." - Robert Bringhurst: The Elements of Typographic Style
Laten we eens kijken naar een voorbeeld van inhoud met en zonder een ontworpen hiërarchie.
De onderstaande afbeelding is een lijst met concerten die worden gespeeld in de openluchtlocatie in de straat van mijn huis. Laten we omwille van dit voorbeeld zeggen dat ik het weekend van 15-17 augustus vrij heb en ik wil zien of er een concert is dat ik rond die tijd zou willen bijwonen. In het onderstaande scenario is dit een taak die veel moeilijker is dan zou moeten. Zonder enige vorm van hiërarchie, moet men veel van de gegevens doorzoeken om de data van de concerten te vinden. Stelt u zich eens voor dat u probeert een lijst met 50 concerten te bekijken.
Ok, dus misschien ben ik dramatisch in het voorbeeld, maar we kunnen dit veel gemakkelijker maken.
Zoals u in het volgende voorbeeld kunt zien, zijn de titel, datum en beschrijvingen allemaal uniek, consistent en geïsoleerd gestructureerd door alinea-indeling te gebruiken. Op deze manier kunnen we gemakkelijk de datums (of bandnamen) isoleren op basis van de styling, en kunnen we de informatie krijgen die we nodig hebben. Het lijkt erop dat we naar de Avett Brothers-show gaan!
Er moet op worden gewezen dat er bij het ontwerpen voor het web nog een andere laag is waarmee rekening moet worden gehouden. Een webpagina zelf heeft een hiërarchie die niet alleen wordt gelezen, maar ook interactie bevat. De pagina als geheel moet zo zijn ontworpen dat de gebruiker duidelijk wordt aangegeven welke acties beschikbaar zijn en hoe gemakkelijk toegang kan worden verkregen tot de informatie die hij zoekt, hoe een item te kopen, enz..
Voor de toepassing van dit artikel hebben we het echter strikt over hiërarchie zoals die van toepassing is op type. Gelukkig hebben we voor ons een handige HTML-tag waarmee we semantisch typografische hiërarchieën kunnen maken in de websites die we bouwen. Met headinglabels (H-tags) kunnen we een volgorde van belangrijkheid in onze inhoud specificeren: H1 tot en met H6, H1 het belangrijkste, H6 het minst. Zoekmachines gebruiken deze gegevens om de prioriteit van inhoud op een webpagina te interpreteren.
Maar hoe kunnen we die H-tags effectief indelen op een manier die logisch is voor onze inhoud? Blij dat je het vroeg!
Er zijn een paar basismethoden voor het instellen van een visuele typografische hiërarchie:
Meestal worden deze methoden in combinatie met elkaar gebruikt. In de eerder getoonde concertlijst werden grootte, kleur, spatiëring en type contrast gebruikt. De combinaties zijn letterlijk eindeloos.
Dit is de eenvoudigste en meest gebruikte methode voor het instellen van de hiërarchie.
Alleen het gebruik van een vetter gewicht van een lettertype kan helpen isoleren.
Kleur speelt een grote rol in wat ons oog als primair en secundair ziet. Over het algemeen; warme kleuren knallen, koelere kleuren verdwijnen.
Waar delen van informatie in relatie tot elkaar worden gepositioneerd, kan een hiërarchie worden vastgesteld.
Een geweldige manier om hiërarchie te bereiken, is door contrasterende lettertypen te gebruiken.
Zoals eerder vermeld, kunnen deze methoden het meest effectief zijn wanneer ze in combinatie met elkaar worden gebruikt. Dit is het leuke gedeelte - beslissen welke combinatie geschikt is voor uw inhoud en lay-out!
Een van de belangrijkste concepten in het typeontwerp is de afstand. Het is een van de moeilijkste concepten om te begrijpen voor beginnende ontwerpers, maar het is ook een van de meest visueel voor de hand liggende. Een goede typografische spatiëring is van cruciaal belang bij het vaststellen van de hiërarchie; het kan het verschil maken tussen verwarring en duidelijkheid. Het wordt gebruikt in de meeste hiërarchische systemen en het is aanwezig in alle voorbeelden in dit artikel.
De regel van nabijheid in het ontwerp staat in het algemeen dat verwante items dichter bij elkaar zouden moeten staan dan items die geen verband houden. De juiste spatiëring houdt echter meer in dan alleen een harde return tussen secties van het type. Over het algemeen creëert een harde return te veel ruimte tussen inhoud in de context van een alinea. Alinea-tussenafstanden - vóór of na - moeten worden gebruikt. Ik gebruik meestal een alinea-indeling die gelijk is aan de helft van de regelhoogte (of voorloop). Hierdoor kan de inhoudsgroep doorgaans bij elkaar worden gehouden en wordt een goede verdeling van de inhoud erin geboden.
Het is belangrijk dat de betekenis van een bepaald stuk inhoud in aanmerking wordt genomen bij het denken over de hiërarchie. Wat is het onderwerp van de inhoud? Wat probeert het te communiceren? Als u het niet weet, lees het dan voordat u beslissingen neemt over hiërarchie en stijl.
In sommige scenario's hebt u misschien de vrijheid om een van de bovenstaande hiërarchische methoden te gebruiken, maar in andere gevallen kunt u zich beperken tot een bepaalde verticale of horizontale ruimte of zorgen voor voldoende contrast van het type op een achtergrond. Evalueer welke methoden werken voor de situatie en gebruik de methoden die logisch zijn. De oude "eenvoudiger is beter" mantra is hier meestal van toepassing. Denk eraan, het doel is om de inhoud op een georganiseerde manier te presenteren.
Ga nu wat hiërarchische schoonheid creëren. Als je geïnteresseerd bent, heb ik een aantal interessante bronnen opgegeven voor type, hiërarchie en internet:
Accentsconagua