Informationsgrafik: Hur du designar dina layouter för maximal effektivitet

 In Bästa praxis

1321316419, xorosho

Oavsett om du är designer, marknadsföringsproffs eller bara någon som drivit eget företag ett tag – har du nästan säkert hört frasen ”visuell hierarki”. De flesta av oss har en viss förståelse för att sättet en webbplats eller affisch utformas på, påverkar hur vi läser och konsumerar informationen på den. Men en av fördelarna med att anlita en effektiv, erfaren designer är att hjälpa dig se till att din kreativitet är visuellt lättsmält – inte bara vacker.

I den här guiden kommer vi ge dig en handfull principer om vad som skapar fantastisk, visuell konsekvent design – allt genom tips från det kreativa teamet i världsklass på iStock. Och eftersom detta är ett visuellt medium parar vi ihop vart och ett av våra tips med en praktisk liten grafik, för att visa dig vad vi menar. Därefter kan du besöka iStock för att välja din grafik och enkelt lägga ut den.

Bestäm först vad som är viktigt

2022_iS_VisualHierarchy_1.jpg

1338319555, filo | 1134199907, ungID

Detta kan låta självklart. Men innan du sätter pennan mot pappret (eller pennan på surfplattan) måste du verkligen bestämma vilken historia du vill berätta med designdelen. Är det ett flygblad för ett evenemang? Om så är fallet vill du att datum, tid och logistik kommer fram. Är det en enkel försäljningssida? Då vill du att din nyckelkompetens och/eller produkt ska vara den första informationen som en potentiell kund ser.

Ta till exempel den enkla grafiken här ovan. Den visar tre ikoner som alla ser exakt likadana ut. Däremot kommer du att se att den ena är större än de andra två och placerad i mitten. Dessa två tekniker drar ditt öga till ett specifikt objekt. Därmed vet du omedelbart att syftet med den här grafiken är att få dig att titta på bilden i mitten.

Förstora ditt budskap

Ett av de enklaste koncepten att ha koll på är: större = viktig. Vi har alla sett det här på affischer och webbplatser, där huvudrubriken är skriven med ett mycket större teckensnitt än resten av texten. Men storleken kan faktiskt ändra spelets regler på många olika sätt.

Ta till exempel bilden här nedan. Det är tydligt att ett av budskapen är det viktigaste, men det finns mer information att hämta. Du kan också se att de andra två budskapen har sin egen hierarki. Och även om ett av dem visas ovanför det andra på sidan, är detta faktiskt mindre viktigt. Vi har markerat det genom att justera teckenstorlekarna.

2022_iS_VisualHierarchy_2.jpg

920188714, kool99

När du placerar en stödjande rad ovanför en huvudrubrik, men gör den mindre kallas det ofta ett ”ögonbryn”. Detta är ett bra sätt att frigöra utrymme längre ner på sidan. Dessutom håller det layouter intressanta utan att tappa huvudrubrikens betoning.

Placering är nyckeln

Den andra layoutprincipen som de flesta proffs känner till är konceptet, att var du placerar en bild är nästan lika viktigt som hur stor den är. Även om vi har illustrerat att storleken kan hjälpa till att fräscha upp den vanliga textordningen, är det viktigt att tänka på det fysiska utrymmet på en sida som något som är lite mer tredimensionellt än så.

Att styra ögat är till exempel väldigt viktigt. Många kulturer runt om i världen är vana vid att läsa från vänster till höger och uppifrån och ned, vilket har sitt ursprung i vår historia med böcker och tryckta sidor. När du tänker på placeringen av viss information på en webbsida kan det vara annorlunda. Till exempel ses en liten serie ord överst på en webbsida ofta som ett navigeringsfält – tack vare vår moderna förtrogenhet med datorskärmar.

Ta den här bilden nedan, till exempel. Det finns inga ord som bokstavligen säger att den lilla serien av fraser längst upp är navigeringsknappar. Men deras placering och kontexten på sidan gör det uppenbart att om du klickar på dem kommer du till en sida om respektive djur.

2022_iS_VisualHierarchy_3.jpg

811314000, atakan

Välj din orientering klokt

Med hänsyn till ovanstående princip kan fysisk orientering av en designs layout ha en förvånansvärt stark känslomässig effekt på personen som tittar på sidan. Tänk på det som att skriva ut en sida i stående eller liggande riktning. Våra naturliga anlag för breda, landskapsvisuella bilder gör oss lugnare, medan  bilder med stående orientering kan galvanisera och skapa brådska. I bilden här nedan ser du att samma mening läses smidigare och jämnare när den är liggande, och mer dramatiskt när den är stående.

2022_iS_VisualHierarchy_4.jpg

1341467515, Anna Bliokh

Använd kontrast till din fördel

Allt är inte lika svartvitt som texten på en sida. Ibland vill du förbereda en design som innehåller komplexa färger, grafik och information. När layout och storlek inte ger dig den effekt eller berättelse som du behöver, kan kontrasten verkligen hjälpa till att separera saker. Det vill säga – att para ihop en bakgrundsfärg med en förgrundsfärg som verkligen sticker ut.

Ta en titt på serien av former nedan. De har alla samma storlek och ingen av dem är placerad på ett sätt som drar ögat till någon enskild. Men ögat dras ändå till en i synnerhet – triangeln nere till höger är den som sticker ut mest från bakgrunden ur ett kontrastperspektiv. Detta hjälper dig att ändra berättelsen på en sida och dra läsarens blick bort från vanan de ofta har att läsa uppifrån och ner.

2022_iS_VisualHierarchy_5.jpg

175380115, petekarici

Färglägg din publik imponerad

Färg och skuggning innebär mer än att bara ge kontrast. Vilken färg du använder har stark effekt på hur någon ser på din design. Att välja rött och orange kan dra tittarens blick till sig väldigt starkt, tack vare vår psykologiska känsla av brådska när det gäller dessa färger. Mjukare, lugnare blå och lila kan däremot skapa en lugnande underton.

I bilden nedan kan du se att en mening som skrivs med blått accentord har en helt annorlunda känsla, än samma mening med rött.

2022_iS_VisualHierarchy_6.jpg

532378051, michal-rojek

Hierarkin expanderar när man arbetar med animerade bilder

Vi har uteslutande pratat om statiska, tvådimensionella designplaceringar – men vad händer med visuell hierarki när du introducerar den tredje dimensionen av tid? Att använda en animerad bild på en annars statisk sida kan göra mycket för hierarkin. Det kan ofta helt ersätta många av principerna ovan. Ta till exempel bilden här nedan där det finns en stor, ljus rubrik i mitten, men ögat dras mycket effektivt till den rörliga underrubriken under den.

2022_iS_VisualHierarchy_7.gif

1127490759, jakkapan21

Använd ljud för berättande videor

En annan dimension av videobaserade projekt är närvaron av ljud. Även om affischer och tryckt material inte har något ljud och webbsidor med ljud ofta är irriterande, är videor en av de få platser där tittarna förväntar sig ljud.

Använd volym och dynamisk musik för att driva tittarna genom en video mer entusiastiskt, och använd lugnande musikbäddar för att kommunicera en känsla av ankomst. Klicka på spela, på videon här nedan för att se vad vi menar:

1053436938, PeopleImages | 1332781589, Templator

Visste du att du kan redigera video direkt på iStock-webbplatsen? Kolla in vår nya video editor för att förverkliga några av dessa layoutidéer utan behov av specialiserad programvara.

Bind ihop allt med mönster för att stödja din berättelse

Ett av de viktigaste syftena med designlayout är att ”träna” din publik. De flesta varumärken har idag en stilguide för design. Det här designsystemet inkluderar teckensnitt, storlekar, färger och ikoner som bör förbli konsekventa i allt designmaterial. På så sätt vet din publik vad de kan förvänta sig bara genom att se konsekventa layoutval.

Ett exempel är bilden här nedan som visar ett evenemangsschema för en kommande vecka. Där kan du se att datum/tid alltid är desamma, både storlek och färgmässigt, att namnet på evenemanget har störst kontrast gentemot bakgrunden och att den färgglada ikonen endast visas när evenemanget är fritt:

2022_iS_VisualHierarchy_8.jpg

1305412784, Dian_S_Cahya | 1328447791, Polina Tomtosova

Nu när du har en hel uppsjö av design- och layouttekniker i din verktygslåda, är det dags att gå till iStock för att hitta bilderna som blåser liv i ditt varumärke. Satsa på ikonpaket för att lägga till några accenter, välj abstrakta texturer för att skapa lugnande webbplatsbakgrunder. Kolla dessutom in de olika abonnemangsplanerna som finns tillgängliga för att få alla filer du behöver inom budget.

Var denna artikel användbar?
Dela din artikel
Få de senaste tipsen från iStock
Mer resurser för dig