The Do’s And Don’ts Of Infographic Design

Redaktörens anmärkning: Du kanske vill läsa Nathan Yau’s artikel The Do’s And Don’ts Of Infographic Design: Revisited här på Smashing Magazine som är ett svar på den här artikeln.

Sedan Internets början har efterfrågan på bra design fortsatt att skjuta i höjden. Från Web 1.0 till Web 2.0 och framåt har formgivare varit på tårna när de definierat trenderna och förväntningarna på vårt onlineuniversum. Internet är en fantastisk lekplats för designers, och onlineföretagen uppskattar allt mer vad man kan vinna på en väl utförd ögonfröjd. Under de senaste två åren har detta faktum blivit ryggraden i en växande trend inom marknadsföring på nätet: infografiken.

Infografiker är visuella representationer av information, eller ”data viz” som de coola barnen kallar det nuförtiden. Termen ”data viz” kommer från ”datavisualisering”, vilket innebär att uppsättningar av data visas på ett unikt sätt som kan ses, snarare än läsas. Denna visualisering bör inte lämnas upp till tolkning, utan bör i stället utformas på ett sätt som ger en universell slutsats för alla betraktare. I de enklaste termerna är infografik inte så annorlunda än de diagram och grafer som program som Excel har spottat ur sig i åratal.

Ytterligare läsning på SmashingMag:

• Engagerande exempel på interaktiv infografisk design
• Resurser för datavisualisering och infografik
• Föreställ dig ett cirkeldiagram som stampar på en infografik för alltid
• Skoj med fysik i datavisualisering

Självklart, precis som Web 2.0 förändrade 1.0 är dagens infografik mycket mer iögonfallande än enkla cirkeldiagram och stapeldiagram. Idag sammanställer infografiker många olika datavisualiseringar till ett sammanhängande stycke ”ögongodis”. De har utvecklats i takt med designtrenderna, fått några kreativa ansiktslyftningar och Internet fylls nu med intressant information som levereras på fängslande sätt.

Men även om vissa designtrender kommer och går är infografikerna här för att stanna. Med varumärken som USA Today, New York Times, Google och till och med president Obama som står bakom dem blir infografikerna ett kraftfullt verktyg för att sprida stora mängder information till massorna. Stora och små företag använder infografik för att bygga upp sina varumärken, utbilda sin publik och optimera sin sökmotorrankning genom länkbyggande. Därför är det ett måste att lära sig hur man utformar en bra infografik, och att undvika de vanligaste fallgroparna vid utformning av infografik kan innebära skillnaden mellan att landa en stor kund och att förlora dem helt och hållet.

Vidare dig om Data Viz och infografisk utformning

Att utforma en infografik är inte samma sak som att utforma en webbplats, en folder, en broschyr osv. Till och med några av de bästa formgivarna, med portföljer som skulle få dig att dregla, kan inte utföra en effektiv infografisk design. Att skapa infografik är en utmaning och kräver ett tankesätt som inte faller alla naturligt. Men den inställningen kan man få genom övning och genom att hålla sig till vissa standarder, varav den viktigaste är att respektera och förstå data viz. Här är några enkla regler att följa när man ska sätta sig in i korrekt data viz.

Show, Don’t Tell

En filmregel är att visa, inte berätta. Samma sak gäller för infografisk design. Grunden för varje bra infografik är datavisualisering. Som infografikdesigner kanske du bestämmer konceptet och sammanställer all forskning för den slutliga designen eller inte, men i vilket fall som helst är du ansvarig för att förvandla informationen till en visuellt stimulerande, sammanhängande design som berättar en historia och som inte missar ett enda tillfälle att visualisera data. Ta den här delen av en infografik om Twitter från ViralMS som exempel:

Vad är fel med den här infografiken? Den bryter mot den första regeln direkt från början. När du har en möjlighet att visa information visuellt, ta den. Här kunde tweets per sekund åtminstone ha visats i ett stapeldiagram. Detta skulle göra det möjligt för någon att snabbt titta på det här avsnittet och se vad som händer; genom att se de olika höjderna på staplarna hade ögat snabbt kunnat bedöma skillnaderna i antalet tweets per sekund per händelse utan att behöva läsa något.

Om du har problem med att följa den här regeln kan du prova att hålla all din text på ett enda lager i din AI-fil (med undantag för text i tabeller och grafer). Stäng av textlagret då och då och se om infografiken fortfarande är meningsfull. Om det inte finns några datavisualiseringar, eller om en massa bilder saknar sammanhang, så berättar du för mycket och visar inte tillräckligt.

Om kunden ville ha ett Excel-diagram skulle de inte behöva dig

Det kan låta hårt, men det är sant. Om infografik var lika enkelt som att lägga ut en massa standardtabeller och grafer på en sida skulle kunderna inte behöva leta efter bra formgivare. Det finns många verktyg online som kan skapa färgglada cirkeldiagram, linjediagram och stapeldiagram, så du måste ta saker och ting till nästa nivå för att din design ska sticka ut. Med data från ovan, vilket av de två graferna nedan tror du skulle göra en kund gladare?

Om du svarat Graf B är du på väg att fatta. Naturligtvis lämpar sig inte alla data för kreativa och unika grafer. Graf A kan fungera mycket bra om resten av infografiken har en liknande estetik. Ibland måste du bara bita i det sura äpplet och producera ett traditionellt stapeldiagram eller cirkeldiagram, men fundera ändå alltid på hur du kan försköna det, som i exemplen nedan:

Typografi bör inte vara en krycka

Typografi kan göra eller förstöra en design, men det bör inte vara lösningen på ett problem med datavisualisering. Oftast börjar designers en infografik med mycket energi och spänning, men de tappar snabbt ångan när de fortsätter neråt på sidan. Detta leder ofta till snabba beslut och dåliga lösningar, som att använda typografi för att visa upp en stor siffra i stället för att visualisera den på något sätt. Här är ett exempel:

När jag ser detta påminns jag om reklamkampanjen ”Where’s the beef?”, och jag tänker ”Where’s the data viz?”. Även om Sketch Rockwell är ett av mina absoluta favorittypsnitt är detta ett perfekt exempel på att förlita sig för mycket på typografi.

Varje gång du får ett forskningsnummer för en infografik, fråga dig själv hur det kan visualiseras. Procentandelar kan alltid visualiseras med kreativa cirkeldiagram, numeriska värden i en uppsättning kan vanligtvis förvandlas till ett unikt stapeldiagram, och när siffrorna inte passar på en konsekvent skala kan du kanske visualisera dem i ett diagram. Här är ett annat sätt att visualisera ovanstående data:

Typografi har sin plats

Allt detta sagt har typografi sina användningsområden, som inte bör ignoreras när man skapar en infografik. Oftast vill du fokusera dina kreativa typografiska krafter på titlar och rubriker. Infografikens titel är ett perfekt tillfälle att använda ett roligt och iögonfallande typsnitt och ge det en behandling som passar temat eller ämnet. Se bara till att titeln inte är så distraherande att den tar bort anledningen till att vi tittar på infografiken från början. Sanningen är att vissa infografiska ämnen är tråkiga, men rätt utformning av titeln kan engagera människor tillräckligt mycket för att de ska scrolla vidare.

På samma sätt hjälper rubrikerna till att bryta upp en infografik och göra det lättare att ta till sig uppgifterna, vilket ger dig ytterligare en chans att låta din teckensnitts flagga vaja.

Organisering och berättelse

Att organisera en infografik på ett sätt som är vettigt och som håller betraktaren intresserad är inte alltid lätt, men det är en del av jobbet för de flesta infografikdesigners. Vanligtvis får du en massa data och måste skapa en visuell berättelse av den. Detta kan vara en utmaning i början, men du kan följa några allmänna regler för att göra det lättare.

Wireframe the Infographic

Med hjälp av wireframing av en infografik kan du utarbeta en storyboard och en layout för designen. Du kanske har en idé om den historia du vill berätta, men när du börjar lägga upp saker och ting kan du stöta på en vägg och måste börja om från början. Att behöva omorganisera efter att du redan har gjort en stor del av designen är otroligt frustrerande. Undvik detta genom att sätta upp din berättelse från början för att bestämma vilka data som ska visas och hur. Avsätt en timme för att skissa upp saker och ting och se till att allt är meningsfullt. Detta kommer också att bidra till att säkerställa att den färgpalett du kommer att välja leder uppmärksamheten till de viktiga punkterna och håller ögat flytande nedåt på sidan.

Tänk utanför boxen

När du utformar infografiken kommer du att identifiera sektionsbrytningar som hjälper till att berätta historien. De flesta infografiker på nätet har ett vertikalt flöde, där varje avsnitt har en rubrik som skiljer det från det föregående. Detta blir snabbt tråkigt. Att organisera data och dela upp information i sektioner utan att helt förlita sig på rubriker och färgbrytningar är ett bra sätt att bryta monotonin.

Istället för att välja en typisk layout med en kolumn kan du till exempel använda två kolumner i vissa delar. Du kan också bryta upp sektionerna med ramar, med bakgrunder av olika former eller ge hela designen ett väg- eller stigtema. Här är några annorlunda layouter för att få igång din kreativitet:

Berätta en historia

Alla bra historier har en början, en mitt och ett slut. Infografiker förtjänar samma behandling. I början av infografiken ska du introducera problemet eller tesen. Stöd den därifrån med data. Slutligen avslutar du infografiken med en slutsats.

Visualisera kroken

Alla bra infografiker har en krok eller en primär behållning som får betraktaren att säga ”A-ha!” Som designer bör du om möjligt göra denna krok till designens fokuspunkt. Det är oftast bäst att placera kroken antingen i mitten eller i slutet av infografiken, så att den fångar mer uppmärksamhet. Ge den viktigaste informationen störst visuell tyngd, så att tittarna vet vad de ska ta med sig. Här är några exempel på väl visualiserade krokar:

Rensa upp saker och ting med färg

Den skillnad som en färgpalett kan göra är fantastisk, särskilt i infografikens värld. Rätt palett kan hjälpa till att organisera en infografik, evangelisera varumärket, förstärka ämnet och mycket mer. Fel palett kan förvandla ett bra ämne till en synvilla, skada varumärkets image och förmedla fel budskap. Här är några tips att tänka på när du väljer färger till din infografik.

Make It Universal

I webbdesign är det alltid viktigt att välja en palett som passar webbplatsens tema och som är tillräckligt neutral för en varierande grupp besökare. Eftersom infografik främst delas online är det lika viktigt att välja rätt palett för en rad olika besökare. Du måste också tänka på vad som ser bra ut på nätet.

Dominanta mörka färger och neonfärger är till exempel vanligtvis inte bra på infografik; neon på svart kan vara svårt att läsa, och om det finns mycket data blir det en utmaning att ta in allt. Undvik också vitt som bakgrund när det är möjligt. Infografiker delas ofta på flera webbplatser och bloggar, varav de flesta har vita bakgrunder. Om bakgrunden i din infografik också är vit blir det svårt att tyda var den börjar och slutar.

En trefärgspalett är lätt för ögonen

Med all data som ingår i en infografik måste du se till att läsarens öga lätt flödar nedåt på sidan; fel färgpalett kan vara ett stort hinder för detta. Välj en palett som inte attackerar sinnena. Och tänk på att göra detta innan du börjar designa, eftersom det hjälper dig att bestämma hur du ska visualisera de olika elementen.

Om det är svårt för dig att välja en färgpalett, håll dig till regeln om tre. Välj tre primära färger. Av de tre ska en vara bakgrundsfärgen (vanligtvis den ljusaste av de tre), och de andra två ska bryta upp sektionerna. Om du behöver lägga till andra färger, använd nyanser av de tre huvudfärgerna. På så sätt håller du paletten sammanhängande och lugnande, snarare än skrikande.

Använd de verktyg du har till ditt förfogande

När du väljer färger behöver du inte uppfinna hjulet på nytt. Det finns ett antal bra webbplatser som hjälper dig att välja rätt palett för din infografik. Adobes Kuler erbjuder nya teman och en sökbar databas samt ett enkelt verktyg för att justera den palett som du är intresserad av. Ett problem med Kuler är att alla paletter har fem färger, och färgerna är ibland från helt olika familjer, snarare än nyanser av några få primärfärger, så att hitta rätt palett kan vara som att leta efter en nål i en höstack.

Ett annat verktyg för färgval är COLOURlovers. Denna databas är lättare att söka igenom: den delar in paletter i olika teman och kan sorteras efter favoriter. Även om de flesta paletter också består av fem färger ges färgerna inte alltid lika stor vikt; i stället föreslår verktyget vilka som bör vara dominerande. Här är några bra och dåliga paletter för infografik:

Sluttliga tankar

Även om dessa standarder är viktiga att ta hänsyn till för de flesta infografikdesigns, så dyker det ibland upp en infografik som bryter mot alla dessa regler och ändå lyckas enormt bra. I slutändan gillar kunder ”ögongodis” och design som ”poppar”! Även om sådana termer är subjektiva (och irriterande för de flesta designers) känner vi alla igen en bra infografisk design när vi ser en, och dina kunder gör det också. Använd dessa regler för att guida dig in i den infografiska världen, men skapa dina egna tekniker och standarder när du har fått lite erfarenhet.

(al)