Share
En av de viktigste teknikkene for effektivt å kommunisere (eller "hedre") innhold er bruk av typografisk hierarki. Typografisk hierarki er et system for organiseringstype som etablerer en rekkefølge av betydning innenfor dataene, slik at leseren enkelt kan finne det de leter etter og navigerer innholdet. Det hjelper med å veilede leserens øye til hvor en seksjon begynner og slutter, samtidig som brukeren kan isolere viss informasjon basert på konsekvent bruk av stil gjennom en teksttekst.
"Typografi eksisterer for å ære innhold." - Robert Bringhurst: Elementene i typografisk stil
La oss se på et eksempel på innhold med og uten et designet hierarki.
Bildet nedenfor er en liste over konserter som spiller på uteserveringen nedover gaten fra huset mitt. For dette eksemplets skyld, la oss si at jeg har helgen 15-17 august, og jeg vil se om det er en konsert jeg vil gjerne delta i den tiden. I scenariet nedenfor er dette en oppgave som er mye vanskeligere enn det skal være. Uten noen type hierarki må man sile gjennom mye av dataene for å finne datoene til konsertene. Tenk deg å prøve å se gjennom en liste med 50 konserter.
Ok, så kanskje jeg er dramatisk i eksemplet, men vi kan gjøre dette mye lettere.
Som du kan se i det neste eksemplet, er tittelen, datoen og beskrivelsene alle stilte unikt, konsekvent og isolert ved hjelp av avsnittsavstand. Dette gjør at vi enkelt kan isolere datoene (eller bandnavnene for den saks skyld) basert på stylingen, pluss vi kan få den informasjonen vi trenger. Ser ut som om vi skal til Avett Brothers showet!
Det skal påpekes at når du designer for nettet, er det et annet lag å ta hensyn til. En nettside har et hierarki som ikke bare leses, men inneholder samhandling. Siden som helhet må utformes på en måte som klart kommuniserer til brukeren hvilke handlinger som er tilgjengelige, og hvordan man lett får tilgang til informasjonen de søker, hvordan man kjøper en vare osv..
For formålet med denne artikkelen snakker vi imidlertid strengt om hierarki som det gjelder for type. Heldigvis for oss har vi vår egen hendige HTML-kode som lar oss semantisk opprette typografisk hierarki i nettstedene vi bygger. Overskriftskoder (H-koder) tillater oss å spesifisere en ordre av betydning i innholdet vårt: H1 til H6, H1 er viktigst, H6 er minst. Søkemotorer bruker disse dataene til å tolke prioritet av innhold på en nettside.
Men hvordan stiler vi effektivt de H-kodene på vei som gir mening med innholdet vårt? Glad du spurte!
Det er noen grunnleggende metoder for å etablere et visuelt typografisk hierarki:
Vanligvis brukes disse metodene i kombinasjon med hverandre. I konsertlisten som ble vist tidligere, ble alle størrelser, farger, mellomrom og type kontrast brukt. Kombinasjonene er bokstavelig talt uendelige.
Dette er den enkleste og mest vanlige metoden for å etablere hierarki.
Bare å bruke en tyngre vekt på en skrift kan bidra til å isolere.
Farge spiller en stor rolle i hva øyet ser som primær og sekundær. Generelt sett; varme farger pop, kjøligere farger falle tilbake.
Hvor deler av informasjon er plassert i forhold til hverandre, kan etablere et hierarki.
En fin måte å oppnå hierarki på er å bruke kontrasterende skrifttyper.
Som nevnt tidligere, kan disse metodene være mest effektive når de brukes i kombinasjon med hverandre. Dette er den morsomme delen - bestemmer hvilken kombinasjon som er riktig for innhold og layout!
Et av de viktigste konseptene i type design er avstand. Det er en av de vanskeligste konseptene å forstå for begynnelsesdesignere, men det er også en av de mest visuelt opplagte. Riktig typografisk avstand er kritisk for å etablere hierarki; det kan gjøre forskjellen mellom forvirring og klarhet. Den brukes i de fleste hierarkiske systemer, og den er tilstede i alle eksemplene i denne artikkelen.
Regelen av nærhet I design står det generelt at relaterte elementer skal vises nærmere hverandre enn elementer som ikke er relaterte. Imidlertid innebærer riktig avstand mer enn bare en hard retur mellom seksjoner av typen. Vanligvis gir en hard retur for mye plass mellom innhold i sammenheng med et avsnitt. Avsnittsavstand - enten før eller etter - skal brukes. Jeg pleier å bruke avsnittavstand som er lik halvparten av linjestørrelsen (eller ledende). Dette lar vanligvis gruppen av innhold holde sammen, samtidig som de gir en tilstrekkelig deling av innholdet i den.
Det er viktig at betydningen av et bestemt innhold tas i betraktning når man tenker på hierarkiet. Hva er innholdet i innholdet? Hva er det som prøver å kommunisere? Hvis du ikke vet, les det før du tar beslutninger om hierarki og stil.
I enkelte scenarier kan du ha frihet til å ansette noen av hierarki-metodene som er nevnt ovenfor, men i andre tilfeller kan du være begrenset til et visst vertikalt eller horisontalt mellomrom eller være opptatt av tilstrekkelig kontrast av type på bakgrunn. Vurder hvilke metoder som fungerer for situasjonen, og bruk de som gir mening. Den gamle "enklere er bedre" mantra gjelder vanligvis her. Husk at målet er å presentere innholdet på en organisert måte.
Nå skal du lage litt hierarkisk skjønnhet. Hvis du er interessert, har jeg gitt noen interessante ressurser relatert til type, hierarki og web:
Accentsconagua