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

 In Bästa praxis

1321316419, xorosho

Oavsett om du är designer, marknadsföringsproffs eller bara någon som har drivit eget företag ett tag, så har du nästan säkert hört frasen ”visuell hierarki” tidigare. De flesta av oss har en viss förståelse för att hur en webbplats eller en affisch utformas har en effekt på 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 att se till att din kreativitet är lättsmält visuellt – inte bara vacker.

I den här guiden kommer vi att ge dig en handfull principer om vad som skapar fantastisk, visuell konsekvent design – allt med hjälp av tips från iStocks kreativa team i världsklass. Och eftersom detta är ett visuellt medium kommer vi att para 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 gå över till iStock för att välja din grafik och lägga ut dem med lätthet.

Bestäm först vad som är viktigt

2022_iS_VisualHierarchy_1.jpg

1338319555, filo | 1134199907, ungID

Det kan låta självklart, men innan du sätter pennan mot pappret (eller pennan på surfplattan) måste du verkligen bedöma vilken historia du vill berätta med designen. Ä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 allra första informationen som en potentiell kund ser.

Ta den enkla grafiken nedan, till exempel. Den visar tre ikoner som alla ser exakt likadana ut. Men du kommer att se att den ena är större än de andra två och placerad i mitten. Dessa två tekniker drar ögat till en särskild detalj – och du vet omedelbart att syftet med den här grafiken är att få dig att titta på mittbilden.

Förstora ditt meddelande

Ett av de enklaste koncepten att ha koll på är: större = viktigt. 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 orden på sidan. Men storlek kan faktiskt förändra förutsättningarna på många olika sätt.

Ta grafiken här nedan, till exempel – det är tydligt att ett budskap är viktigast, men det är inte hela historien. Du kommer att se att de andra två meddelandena har sin egen hierarki, och även om ett av dem visas ovanför det andra på sidan, är det faktiskt mindre viktigt. Vi har markerat detta genom att justera teckenstorlekarna.

2022_iS_VisualHierarchy_2.jpg

920188714, kool99

När du placerar en stödjande linje ovanför en huvudrubrik men gör den mindre, kallas detta ofta för ett ”ögonbryn”. Det här är ett bra sätt att frigöra utrymme längre ner på sidan och hålla 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 storlek 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. Men det kommer från 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 av ord överst på en webbsida ofta som ett navigeringsfält – tack vare vår moderna förtrogenhet med datorskärmar.

Ta bilden här 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 inriktning 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 som är orienterade stående kan galvanisera och skapa brådska. I bilden nedan ser du att samma mening läses smidigare och jämnare på ett sätt och mer dramatiskt när den är orienterad stående.

2022_iS_VisualHierarchy_4.jpg

1341467515, Anna Bliokh

Använd kontrast till din fördel

Allt är inte lika svartvitt som text 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 skilja saker åt. 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 är alla av samma storlek, och ingen av dem är placerade på ett särskilt sätt som drar ögat till någon enskild. Men ditt öga dras till en i synnerhet – triangeln nere vid bottnen ä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 kan ha 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 väldigt starkt dra åt sig tittarens blick tack vare vår psykologiska känsla av brådska när det gäller dessa färger. Mjukare, lugnare blå och lila nyanser kan istället skapa en lugnande underton.

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

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 ta in en animerad bild på en annars statisk sida kan göra mycket för hierarkin, och det kan ofta helt ersätta många av principerna ovan. Ta bilden här nedan, där det finns en stor, ljus rubrik i mitten av sidan, men ögat dras mycket effektivt till den rörliga underrubriken under den.

2022_iS_VisualHierarchy_7.gif

1127490759, jakkapan21

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

Den viktiga delen med designlayout är att ”träna” din publik. De flesta varumärken har idag någon typ av stilguide för sin design. Detta designsystem inkluderar teckensnitt, storlekar, färger och ikoner som bör förbli konsekventa i alla designmaterial. På så sätt vet din publik vad de kan förvänta sig bara genom att se konsekventa layoutval.

Ta bilden här nedan som visar ett evenemangsschema för en kommande vecka. Du kommer att se att datumen/tiderna alltid är desamma (både storlek och färgmässigt), att namnet på evenemanget har störst kontrast mot bakgrunden och att den färgglada ikonen endast visas när evenemanget är kostnadsfritt:

2022_iS_VisualHierarchy_8.jpg

1305412784, Dian_S_Cahya | 1328447791, Polina Tomtosova

Nu när du har ett brett urval av design- och layouttekniker i din verktygslåda, gå till iStock för att hitta några bilder som skapar liv åt ditt varumärke. Satsa på ikonpaket för att lägga till några accenter, kolla in abstrakta texturer för att skapa lugnande webbplatsbakgrunder och kolla in de olika abonnemangsplanerna som finns tillgängliga för att få allt material du behöver inom din budget.

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