Visuell hierarki finns överallt. På hemsidor, flygblad och på kaffeautomaten på jobbet. Idén är att nå fram med ett budskap till användaren. Detta kan till exempel vara att förmedla en känsla eller kanske en viss information som användaren ska ta till sig.

Att kunna skapa en visuell hierarki är viktigt för att kunna leda din besökare genom ett material. Må detta vara en hemsida eller ett flygblad. Med en tydlig visuell hierarki lyfter du fram en fokuspunkt och guidar mottagaren genom ditt grafiska material. Notera bilderna nedan.

Vart börjar ni titta? troligtvis enligt denna ordningen:

Ögat försöker att behandla det som presenteras och en visuell rangordning har skapats. Genom att endast ändra lite på bildernas storlek och position kan man ändra fokuspunkt och den visuella hierarkin ändras.

Fokuspunkten ändras och den visuella hierarkin ändras. Förhoppningsvis dras första anblicken mot den vänstra bilden. Ögat har som vana att dras till sådant som sticker ut ifrån det vanliga.

Detta gör att det skapas en spänning inom oss och vi blir nyfikna. Man kan på så vis skapa en visuell guide för åskådaren för hur ens material skall avsynas.

Notera bilden nedan. En enkel poster som till exempel skulle kunna vara en hemsidas front.

Själva bilden förmedlar en känsla men det är inte huvudfokus med denna designen. Om vi säger att huvudfokus skall ligga på texten om vi ansåg att det är viktigt för designen kan vi ändra om den lite för att skapa lite bättre visuell hierarki.

Fokus ligger nu mer på texten än på bilden. Hur har jag åstadkommit det här? Jo om ni tittar på bildens färger så är de genomgående kalla och skapar en kall känsla. Jag valde därför en varm färg för att ge kontrast mot fotots känsla och färger. Det är för övrigt inte bara färg du kan använda dig utav för att skapa kontrast och förändra fokuspunkten och därmed påverka den visuella hierarkin.

Värt att nämna är dock att alla inte alltid kommer att tyda ditt material som du tänkt dig men man bör ändå skapa så bra förutsättningar som möjligt för att den visuella hierarkin kommer följas. Det finns många faktorer som påverkar din fokuspunkt. Dessa punkter kan vara saker så som:

  • Kontrast
  • Utrymme
  • Symmetri&Asymmetri

Varför ska man då bry sig om den visuella hierarkin? Här nämns några fördelar medans det finns fler.

  • Du kan leda din besökare genom en design till exempel en hemsida
  • Du kan skapa en mer spännande design
  • Du kan planera din design bättre och därmed bli mindre låst i ditt arbete.
  • Du repeterar dig mindre och förblir kreativ som designer

Så nästa gång du ser någon grafisk design du gillar kan du fråga dig vad det är som gör att du gillar det. Troligtvis har personen bakom materialet använt sig av olika metoder vid skapandet av just den designen.

Att bli inspirerad är en viktig faktor för att hålla kreativiteten uppe. Människor som får en att bli inspirerad ser jag som viktiga. Eftersom internet har funnits ett tag nu så har antalet människor som inspirerat mig ökat men här presenterar jag mina topp 3 som verkligen hjälpt mig genom åren.

Chris Coyier

Skaparen av css-tricks.com. Sidan som jag vet inte hur många gånger jag besökt genom åren. Skönare kille hittar man inte. På hans sida finns oerhört mycket som rör css-kodande vilket har hjälpt mig mycket genom åren.

Jeffrey Zeldman

Lite av en fadersfigur inom webbdesign. Ordet mysgubbe ploppar upp. Driver en podcast ”The big web show” som man somnat in till ett par gånger.

Rachel Nabors

Tecknaren som började göra hemsidor. Animatör som jobbar med animation på webben. Tjejen som verkligen med denna film fick mig att förstå att allt kommer inte så lätt för alla när det gäller programmering.

Vilka har ni som favoriter? Skriv gärna i kommentarerna.