12 principer för visuell hierarki som ingen designer behöver känna till

1 Storleken påverkar synligheten

Storare är bättre, eller hur? Även om det klassiska ordspråket fortfarande kan diskuteras är storleken utan tvekan det mest effektiva sättet att framhäva visuella element. Helt enkelt drar större element till sig större uppmärksamhet än mindre element.

Det är den exakta anledningen till att tidningsrubriker visas i större typsnitt, och stora historier har ofta ännu större rubriker än artiklarna på resten av sidan. I vilken design som helst kommer större element – oavsett om det är ord eller bilder – inte bara att vara mest uppmärksammade, utan de kommer också att bära det starkaste budskapet.

Bemärk i exemplet ovan hur det största ordet också är det mest slående och känslofyllda. Det är mycket troligare att läsarna reagerar snabbt på ordet ”knäcka” än på det näst största ordet, det grundläggande ”prestanda”. Designen skulle inte vara lika effektiv om orden var lika stora eller om ett annat ord på sidan, t.ex. ”act” eller ”time”, var ännu större.

En annan viktig princip som hänger samman med detta begrepp är skalan, som är storleken på ett objekt i förhållande till ett annat. Ett enskilt objekt, oavsett hur stort eller litet det är, har ingen skala förrän det jämförs med ett annat. Det gör det möjligt för oss att skapa balans i en design och fokusera på dominerande element. Ju större skala, desto större betoning.

2 Perspektiv skapar en illusion av djup

Genom att använda perspektiv kan formgivare skapa en illusion av djup som sträcker sig från några få centimeter till flera kilometer. Eftersom vi ser liknande illusioner i den verkliga världen uppfattar vi generellt sett större objekt som närmare än liknande mindre objekt och därför brukar de vanligtvis väcka uppmärksamhet före alla andra objekt på en sida.

En illustration av en väg kommer till exempel vanligtvis att vara bredare på sin lägsta punkt och gradvis bli smalare ju högre den sträcker sig över duken. På samma sätt kommer ett objekt närmast betraktaren alltid att framstå som större än samma objekt längre bort.

Ett korrekt perspektiv använder sig av både skala och proportioner för att på ett korrekt sätt kommunicera lämpligt avstånd. En teckning av en fem mil lång vägsträcka kommer att avlägsna sig mycket tydligare än en halv mils vägsträcka som ritats på samma storlek.

3 Färg och kontrast drar till sig uppmärksamhet

Samma som att större element uppfattas som viktigare än mindre element, drar ljusa färger vanligen till sig större uppmärksamhet än tråkigare nyanser. Om till exempel en enskild mening i ett textblock lyfts fram med en ljus färg fångar den omedelbart läsarens uppmärksamhet.

Tänk på ovanstående design. Lägg märke till hur den väcker mycket större uppmärksamhet när de naturliga tonerna lyfts fram till neonfärger? Färgschemat är känt som en duotone, en alltmer populär webbdesigntrend. Effekten, som innebär att ett par kontrasterande färger läggs över ett foto, ger en slående design som bildligt talat hoppar upp från sidan eller skärmen.

Dramatiskt kontrasterande färger kan också framhäva specifika element än ett spektrum på en mer mild skala. Att placera ett rött föremål mot en grön eller svart bakgrund väcker mer uppmärksamhet än samma röda föremål på en orange eller lila bakgrund.

De färgkombinationer som används i en design, och hur de förhåller sig till varandra, kallas för dess färgschema. En designers val av färgschema kan skapa enhet, harmoni, rytm och balans i en skapelse, men det kan också skapa kontrast och betoning.

En design som använder för många kontrasterande färger kommer ofta att verka oorganiserad och osammanhängande. Samma sak kan ibland sägas om design som använder ett färgschema som inte följer färgteorin. Men att välja den bästa paletten innebär så mycket mer än att slumpmässigt välja en monokromatisk, komplementär eller tetradisk kombination.

Samma färger kan användas för att gruppera relaterade element i en design, och färgvalet kan till och med antyda vikt och avstånd. Varmare färger, som rött och gult, går fram i förgrunden i en design med en mörk bakgrund, medan svala färger som blått och grönt vanligtvis går tillbaka i bakgrunden. Det motsatta inträffar med en design över en ljus bakgrund: Kalla färger som blått och grönt framträder närmare än varma färger. Det är bara hur det mänskliga ögat uppfattar det.

Därför kan färgvalet verkligen påverka tittarnas förmåga att identifiera en figur från bakgrunden i en design. Att blanda varma och kalla färger kan skapa djup, precis som perspektiv.

Effektiva färgkombinationer bygger inte bara på varje nyans position på färghjulet, utan också på dess värme och kontrast med omgivande färger. Kolla in Vismes handledning om hur man väljer effektfulla färgscheman.

4 Typsnitt organiserar designen

Tänk på en översikt, ett traditionellt cv eller en innehållsförteckning. I allmänhet består var och en av dem av flera olika storlekar, med större rubriker i en större teckenstorlek än underavsnitt och mindre detaljer. Genom att använda olika storlekar betonas inte bara vad som är viktigast, utan dokumentets övergripande utformning organiseras också.

Typsnittshierarkier kan skapas med text i olika storlekar, vikter och med olika avstånd – eller en kombination av varje element. Även om ett enda typsnitt används i hela designen kan man genom att variera storlek och vikt inte bara rikta uppmärksamheten mot viktigare element, utan också skapa en övergripande komposition som är lätt att läsa och förstå.

Föreställ dig ett CV där man använder större och fetare typsnitt för referenser än för den sökandes namn. Det kan inte bara verka slarvigt, utan det skulle troligen skapa en hel del förvirring för dem som snabbt läser igenom ett berg av ansökningar.

På samma sätt kommer en utformning med en serie typer som alla har samma storlek, typsnitt och vikt inte att dra till sig fokus på något särskilt – en utmaning som måste lösas snabbt när så många målgrupper spenderar en bråkdel av en sekund på att bedöma kvaliteten på din utformning.

Det är därför som de flesta webbdesignprogram inte bara erbjuder ett manuellt urval av typsnittsattribut, utan också en förinställd hierarki bestående av typsnitt för titlar, undertitlar och graderade rubriker, förutom grundläggande kopieringstext.

Klipp på designen ovan? Verkar den mer organiserad och lättläst när alla ord har samma storlek, eller när hierarkiska principer tillämpas?

5 Utrymme ger betoning och rörelse

Rymmeregel

En av de mest grundläggande principerna för visuell komposition handlar om vad du lämnar bort i din design. Enligt rymdregeln kräver en estetiskt tilltalande design sin beskärda del av ett rörigt negativt utrymme, ofta kallat ”vitt utrymme”, oavsett designens faktiska bakgrundsfärg.

När de arrangerar elementen i en komposition kan formgivarna använda utrymmet runt innehållet för att fästa uppmärksamheten på särskilda element – tänk på ett enskilt element på en tom sida – eller för att sända ett helt separat visuellt budskap, som till exempel den dolda ”pilen” som finns i den berömda FedEx-logotypen.

Strategiskt avstånd kan till och med locka tittarnas ögon över sidan i en målinriktad sekvens, genom att bidra till sidskannningsmönster.

Sidskannningsmönster

Läsare tenderar att skanna sidor baserat på särskilda mönster, som kan observeras genom deras ögonrörelser. När formgivare vill att publiken ska lägga märke till element i en viss ordning förlitar de sig ofta på de vanligaste mönstren.

Englishspråkiga personer med engelska som modersmål läser till exempel från vänster till höger. Därför uppvisar de vanligtvis ett liknande skanningsmönster när de ställs inför en sida med text. Arabiska å andra sidan skrivs från höger till vänster. De som är vana vid att läsa det språket är mer benägna att skanna sidor i denna ”motsatta” riktning. Formgivare bör ha dessa skillnader i åtanke när de skapar innehåll för globala målgrupper.

F-mönster

Det vanligaste ögonrörelsemönstret hos engelska läsare är F-mönstret. Varför? Därför att det är just så vi läser en bok, ett brev eller en webbsida. Vi skannar sidan från vänster till höger längs toppen och igen för varje textrad tills vi når botten av sidan.

På grund av denna naturliga tendens använder designers oftast F-mönstret när de komponerar webbplatser och andra illustrationer som i hög grad bygger på text. Eftersom det bara är obekvämt att läsa i någon annan riktning när det inte är vad vi är vana vid.

Z-mönster

Designs som förlitar sig mer på bilder komponeras ofta i ett Z-mönster. Eftersom hjärnan bearbetar bilder snabbare än text kan läsare skanna sidan snabbt genom att kasta en blick över toppen från vänster till höger, sedan diagonalt nedåt på sidan innan de avslutar skanningen genom att återigen korsa från vänster till höger (eller från höger till vänster om publiken vanligtvis läser i den riktningen).

Designers kan framhäva vissa element i en komposition genom att placera dem längs detta vanliga ”Z”-ögonrörelsemönster. Tänk på en rubrik, en bild och en underrubrik.

6 Närhet antyder relationer

Närhet, eller var element visas i förhållande till varandra, är ett av de mest grundläggande elementen i komposition. Enkelt uttryckt, att placera relaterade element nära varandra antyder för läsarna att de faktiskt är relaterade.

Tänk på en vit skärm med en grupp av fem prickar på ena sidan och en enda prick på den andra sidan. Vårt första antagande kommer alltid att vara att de fem är en grupp.

Placering av element nära varandra kan också sända andra budskap. Att placera element på vissa platser på en karta kan till exempel ge publiken en förståelse för avstånd, oavsett om det är nära eller långt borta. Naturligtvis beror detta också på kartans storlek och skala. En tum är inte alltid en mil.

Då man placerar element inom viss närhet till varandra kan man skapa ytterligare bilder och budskap. Tänk på hur ofta du ser tre cirklar och en linje placerade på ett sätt som antyder formen av ett lyckligt eller sorgligt ansikte? Den föreslagna bilden får då ofta mer uppmärksamhet än de enskilda elementen. Ser du ett lyckligt ansikte eller ser du tre cirklar och ett streck?

7 Negativt utrymme betonar

Samma som att gruppera objekt nära varandra antyder att de är relaterade till varandra, visar vitrymden runt elementen att de är separata grupper av information. Negativt, tomt utrymme gör det inte bara lättare för läsaren att smälta informationen genom att gruppera den i fack, utan det skapar också fokus eftersom det hjälper ögonen att fokusera på enskilda objekt.

Compositioner som saknar gott om negativt utrymme kan resultera i en rörig, förvirrande och kaotisk design. Med andra ord, mindre är mer. Kloka formgivare kan till och med utnyttja det tomma utrymmet för att föreslå ett ytterligare visuellt budskap. Tänk bara på pilen i mitten av den berömda FedEx-logotypen eller Coca-Cola-designen ovan.

8 Justering styr ögonen

Riktning är en del av den struktur genom vilken elementen placeras i en design. Den dikterar att visuella komponenter, oavsett om de är text eller bilder, inte placeras godtyckligt i en komposition. Till exempel är en typisk sida med text inriktad till vänster, så att objekten delar en vänstermarginal.

Många visuella konstruktioner är centrerade eller rättfärdigade, vilket innebär att de är placerade över en sida så att de delar både vänster- och högermarginal. Om orden bara spreds slumpmässigt över en sida i alla riktningar skulle de skapa ett ganska förvirrande scenario.

I mönster med F-mönster är föremålen i allmänhet inriktade till vänster, medan Z-mönster ofta använder sig av en kombination av vänster, mitten och höger, som i annonsen ovan.

Enkla visuella mönster är oftast inriktade i mitten av ramen, ett format som ger balans och harmoni och som också är estetiskt tilltalande.

De flesta västerländska läsare är vana vid att läsa från vänster till höger storlek på en sida. Därför är design med text ofta inriktad på vänster marginal på samma sätt.

Högre inriktningar används ofta för att ge balans åt en övergripande design som kan vara mer visuellt tung på den vänstra sidan. På samma sätt kan vänsterjusteringar ge samma effekt i det omvända scenariot.

9 Grupper med udda nummer skapar fokus

Oddsregeln gör det möjligt för formgivare att framhäva vissa bilder genom att placera dem i mitten av en grupp. Genom att placera lika många angränsande objekt på vardera sidan av den huvudsakliga fokuspunkten – och därmed skapa en grupp med udda nummer – pekar resultatet tydligt på det viktigaste visuella elementet, som är placerat i mitten.

Till exempel är en grupp med ett eller tre element mer slående än ett enda par. På samma sätt anses grupper som består av ett udda antal objekt nästan alltid vara mer intressanta och estetiskt tilltalande än jämnt numrerade grupper. Varför? Människor känner sig mer bekväma med balans.

10 Upprepning förenar en komposition

Samma som kontraster framhäver och drar uppmärksamheten till designelement, skapar upprepning enhet, vilket ökar förståelse och igenkänning.

Tänk på de flesta publicerade texter. Sidornas utformning är organiserad på ett sådant sätt att brödtexten har ett typsnitt, kapitelrubrikerna ett annat och fotnoter ett tredje annorlunda typsnitt – allt konsekvent genom hela publikationen. Denna upprepning av stilen skapar ett sammanhängande verk som känns igen som en helhet.

För en enhetlig design, upprepa något element – oavsett om det är typsnitt, färg, form eller storlek – genom hela kompositionen. Konsekventa stilar hjälper till att tydligt definiera den visuella hierarkin i en design.

Tag till exempel infografiken i inledningen med våra 12 principer för visuell hierarki. Genom att upprepa samma typsnitt och stilar i hela dokumentet förenhetligas listan tydligt och talar om för läsaren att varje post är en del av en helhet.

Repetering kan också ge element en ny innebörd. Hur ofta ser du blå understruken text som sticker ut på en sida? Tillräckligt mycket för att du omedelbart känner igen teckensnittet som en hyperlänk, eller hur? Att upprepa denna stil i en design talar om för din publik var den ska klicka för att få mer information. Vilka andra populära stilar kan ge din design ytterligare betydelse?

11 Lines Suggest Movement

Rörelse är ett av de effektivaste sätten att dra till sig tittarnas uppmärksamhet, särskilt när det är underförstått i en stillastående design. Linjer är uppenbarligen effektiva när det gäller att peka på objekt som ska betonas – tänk bara på en pil – men de behöver inte fysiskt synas på sidan för att göra susen.

Ledande linjer kan antydas genom användning av upprepade element – tänk på en rad prickar – närhet till objekt eller former samt förhållandet mellan positivt och negativt utrymme. Genom att till exempel luta ett objekt uppåt eller nedåt kan man skapa linjer som antyder flygning eller nedstigning.

12 Rutor organiserar en design

Den mest effektiva designen är sammansatt genom någon typ av rutnät. Det mest typiska rutnätet är den klassiska modulära kompositionen med korsande vertikala och horisontella linjer.

Konstnärer, fotografer och grafiska formgivare har länge använt sig av tredjedelsregeln för att förbättra den övergripande balansen i sina kompositioner. Regeln innebär att man mentalt delar in en komposition i ett rutnät som består av två horisontella och två vertikala linjer – eller nio separata sektioner.

Betydelsefulla visuella element är placerade längs linjerna, vilket framhäver de fyra punkterna där linjerna möts. Kompositioner utanför centrum anses i allmänhet vara mer estetiskt tilltalande jämfört med konstruktioner där huvudfokuspunkten är placerad i mitten av ramen. Regeln uppmuntrar till användning av negativa utrymmen, smart närhet mellan elementen och effektiv inriktning.

Det är inte bara vanligast, utan det modulära rutnätet är i allmänhet den mest läsbara utformningen. Men ibland är det bästa sättet att skapa betoning ändå att bryta mot reglerna.

Alternativa rutnätskonstruktioner

Istället för det klassiska vertikal-horisontella rutnätet kan designers välja en diagonalt riktad komposition för att se till att deras skapelse sticker ut på en sida och drar till sig tittarnas totala uppmärksamhet.

Brytning av rutnätet

En del designers väljer att bryta rutnätet helt och hållet, och placerar slumpmässigt ut visuella element på sidan för att på bästa sätt sticka ut från omgivande rutnätslåsad text. Den omgivande texten kan vara i samma design eller på en omgivande sida.

Låt dig inte luras av begreppet slumpmässighet. Att slumpmässigt sprida ut element över en bakgrund utan någon särskild anledning eller strategi kommer inte att mirakulöst förvandlas till ett mästerverk av Jackson Pollock. När man bryter mot rutnätet måste varje val fortfarande vara beräknat och ha ett syfte.

Principerna för visuell hierarki är några av de mest effektiva strategierna för att framhäva element i en design och förtydliga ett visuellt budskap. Men som med mycket i livet kan man få för mycket av det goda.

Designers måste klokt välja vilka principer de ska använda, annars riskerar de att späda ut all betoning och bryta ner den visuella hierarkin. Om allting sticker ut, sticker ingenting ut.

Är du osäker på om din hierarki är effektiv? Testa den då. Stirra helt enkelt på utrymmet framför din sida eller skärm och låt den faktiska designen blekna i bakgrunden tills den blir en oskärpa av former och färger. Vad sticker ut?

Och om du vill slippa bli skelögd kan du använda suddatestet genom att ta en skärmdump av din design, öppna den i Photoshop och applicera filtret Gaussian Blur.

Om huvudattraktionen fortfarande är det eller de element som du planerade att framhäva, är din visuella hierarki effektiv.

Visual Hierarchy Infographic

Get an at-a-glance understanding of what visual hierarchy means and how it can be implemented by scrolling through this infographic below.

Embed on your site:
<script src=”//my.visme.co/visme.js”></script><div class=”visme_d” data-url=”ep88eydm-12-visual-hierarchy-principles-every-non-designer-needs-to-know” data-w=”800″ data-h=”6404″></div><p style=”font-family: Arial; font-size: 10px; color: #333333″ >Created using <a href=”http://www.visme.co/make-infographics” target=”_blank” style=”color: #30a0ea”><strong>Visme</strong></a>. An easy-to-use Infographic Maker.</p>