Visuell hierarki är ett viktigt inslag i något designprojekt. Det berättar för vem som ska se och vilka saker på skärmen eller den tryckta sidan är viktigast. Hierarki ger läsarna en känsla av hur man faktiskt läser material från början till slut med visuella signaler och flöde.
Medan du kan skapa en visuell hierarki med ett antal olika verktyg, kommer vi idag att titta på sätt att skapa struktur med bara typografi. (Och titta på bilderna som används i hela det här inlägget, de är alla exempel på stor typhierarki i aktion.)
Varför hierarkin är viktig
Typhierarkin organiserar och ger ordning till textelementen i din design. Precis som webbdesigners och utvecklare använder header-taggar - h1, h2, h3 och så vidare - för att organisera betydelsen av text använder visuell hierarki visuella signaler. Dessutom kan typhierarki hjälpa läsare att skanna text, läsa bitar av typen snabbare i bitar som liknar varandra.
Generellt börjar engelska läsare längst upp till vänster och läsas över och ner. Typ är ofta organiserad för att spegla detta beteende.Generellt börjar engelska läsare längst upp till vänster och läsas över och ner. Typ är ofta organiserad för att spegla detta beteende. Men vad händer om den största och djärvaste texten är halvvägs ner på sidan? Ofta börjar en läsare där och sedan gå tillbaka till början av sidan och fortsätta med normalt läsbeteende.
Hierarkin är viktig eftersom det gör det möjligt för konstruktören att bestämma vad någon sannolikt kommer att läsa först, andra och så vidare. På grund av detta kan designern skapa typ på ett sådant sätt att han eller hon vet vilken information som sannolikt kommer att tas emot och i vilken ordning.
Eftersom skapande hierarki är viktigt för designers, är det lika viktigt för läsare. Bra visuell hierarki berättar för oss vad som är viktigt, vilket gör läsning mycket lättare. Till exempel vet du att rubriken är den viktigaste (eller uppmärksamma) delen av en berättelse eller artikel eftersom den är störst, följt av underrubriker och sedan kroppstexten. För skanningsändamål kan du läsa den stora texten för att få en uppfattning om artikeln skulle intressera dig innan du investerar mycket tid i kopian.
Hur man skapar hierarki
Det finns ingen steglös lösning för att skapa visuell hierarki med text. Den kan skapas med storlek, vikt, färg, textur, typfältval och kombinationer, orientering och utrymme, eller en kombination av dessa verktyg.
Storlek
Ett av de enklaste sätten att upprätta hierarki med typ är genom storlek. Läsarna ser ofta den största typen först och börjar läsa därifrån.
I förhållande till storlek är skalan lika viktig. För att skapa en distinkt hierarki måste storlekarna ha betydande variationer i förhållande till annan typ på sidan. Saken att tänka på är att olika teckensnitt kan skala olika, så att bara ändra punktstorlek kanske inte räcker till. du måste titta på hur skrivtecken fungerar tillsammans för att säkerställa att storleken och skalan är väl balanserade.
Så hur börjar du med att skapa rätt storlek och skala för ett projekt? Börja med huvudtexten och gå därifrån. Och för textelement som används för att verkligen dra in människor, gå stora.
Här är några procentandelar som hjälper dig att komma igång:
- Huvudkropps kopia (14 poäng)
- Huvudrubriker: 250 procent mer än huvudkropps kopia (35 poäng)
- Sekundära rubriker: 175 procent mer än huvudkroppen (25 poäng)
- Navigationselement: 165 procent mer än huvudkropps kopia (23 poäng)
- Sekundär navigering eller menyer: 140 procent mer än huvudkropps kopia (20 poäng)
typsnitt
Efter storlek är teckensnitt det mest använda elementet när det gäller att skapa typografisk hierarki. Nyckeln är att ha kontrast mellan teckensnitt. (Det här är en anledning till att designers ofta väljer en serif och en sans serif typsnitt för ett projekt.)
För de bästa kombinationerna, leta efter typsnitt som är olika i vikt genom att ha en liknande ton eller känsla. Om du använder avrundade teckensnitt, håll dig till brevformar med liknande former i o: t, till exempel. Välj typsnitt med liknande x-höjder om stilen kommer att användas i linje med varandra under hela projektet.
Vikt
Tjockleken på slag i den typ du väljer för ett projekt kan också skapa hierarki. Ju tjockare tecknet, desto fetare och större visas det. Lätta, kondenserade och tunna typsnitt verkar ofta mindre än de faktiskt är. Fet, ultra och hammarhuvud kan uppstå större än punktstorleken kan representera.
Hur stor eller liten en typsnitt syns i vikt är också i förhållande till de andra typsnitt som används i projektet. Parning av tjocka och tunna typsnitt skapar omedelbart en känsla av hierarki med den tjocka stilen som har utseendet av större betydelse (ofta även om det faktiskt är mindre på displayen).
Färg
Användning av färg kan också lägga tonvikt och ökad vikt att skriva. Tänk på några av de färgregler du lärde dig som barn - varma färger (röda, gula, bruna) kommer att ha mer pop medan coola färger (blues, purples, grays) kommer att blekna.
När du använder färg för att skapa hierarki, överväg nyanser som används för förgrunden, typen och bakgrunden. Färgåter kontrast spelar också en viktig roll. De mest mättade eller ljusaste färgerna kommer ofta att lyfta? av skärmen mot mer dämpade toner.
Orientering
Hur teststöd i en layout som följer i förhållande till annan text kan påverka den övergripande hierarkin. Vanligtvis är den flesta texten orienterad horisontellt i rak linje över skärmen. Men vad lägger du text vertikalt?
Denna förändring i orientering kommer att fokusera på dessa ord eller textblock, vilket tycks vara det viktigaste elementet. Att vinkla, vrida eller på annat sätt ändra formen på text kan uppnå samma effekt. (Det bör noteras att de flesta designers ofta undviker dessa typ? Tricks? Med undantag för några omständigheter.)
Rymden
Vitt utrymme kan få typ att visas större och mer läsbar. Brist på vitt utrymme kan få det att känna sig tättare och mindre. Använd utrymme till din fördel när du skapar en känsla av hierarki.
Tänk på det utrymme du använder mellan textrader. Tänk på kerning för de största typstilarna. Tänk på det rumsliga förhållandet mellan bokstäverna och kanvasens kant. Tänk på relationerna mellan olika storlekar, stilar och färger.
Varje enskilt utrymme kan påverka din hierarkiska skala. Håll liknande typ grupperade närmare varandra och med mindre utrymme än orelaterade objekt. Och designa ditt utrymme så att texten faller i en distinkt ordning. Större, djupare, ljusare textelement behöver ofta mer utrymme än mindre enklare textblock.
Textur
Textur är ett lös begrepp i form av typ. Nej, vi pratar inte om att sätta en textur inuti bokstäverna; Vi hänvisar till att skapa ett mönster av textur med hur bokstäver och ord vilar på sidan eller skärmen.
Inom textblock slutar du med ett mönstrade utseende. För att etablera mer hierarki bryt du mönstret. Detta kan åstadkommas med hjälp av ett av de redan nämnda verktygen eller genom att ändra något så enkelt som inriktningen av ett enda textblock.
Denna ändring av textens övergripande text kan få en verklig inverkan på hur den uppfattas. Var försiktig om alltför många textförändringar, eftersom de kan bli distraherande när de används ofta.
3 (eller 4) nivåer av typ
Medan vissa projekt kräver komplexa hierarkier kan de flesta modellerna lyckas med tre nivåer av typografi hierarki. Dessa nivåer är primärtyp, sekundär typ och tertiär typ. (I denna skala ingår inte banners eller logotyp, de skulle anses vara en fjärde art-nivå av typografi.)
Primär typ är ofta typografi på sidan med den mest synliga vikten, till exempel huvudrubriker eller visningsnoteringar. Syftet med den primära typen är att få läsare till den övergripande designen.
Sekundär typ är allt annat som inte är huvudinnehållet. Detta kan inkludera bildtexter, underrubriker och navigations- eller statiska element.
Tertiär typ är huvudkroppen kopia. Det finns en sak att komma ihåg om tertiär kopia: Den måste vara läsbar. Lite annat är viktigt när det gäller designstilen på denna typnivå.
Konsttyp Typen används som ett grafiskt element. Den faller utanför typets egentliga rike och är mycket mer visuell. Detta kan innehålla banderoller eller logotyper. Det kan innehålla bilder som består av bokstäver eller andra utsmyckade av tungt utformade typografiska element. Typiskt består konsttyp av endast ett enda bokstavsord och är inte en del av vad folk förväntas att läsa? i den övergripande designen.
Slutsats
Organiserande typ kan vara både roligt och utmanande. Genom att kombinera tekniker och olika typ effekter och stilar kan du enkelt uppnå ett flöde med enbart typ.
Kom ihåg att betrakta relationerna mellan storlek, vikt, färg, struktur, typfältval och kombinationer, orientering och utrymme när du skapar en skiss. Tänk på hur människor läser och smälter information när de använder dessa tekniker så att kopian är organiserad och flyter i ett logiskt format för den mest användbara typografiska designen.