The Do’s And Don’ts Of Infographic Design

• About The Author
• Verder lezen op SmashingMag:
• Wrapping Your Mind Around Data Viz And Infographic Design
• Show, Don’t Tell
• Als de klant een Excel-grafiek wilde, hadden ze jou niet nodig
• Typografie mag geen kruk zijn
• Typografie heeft haar plaats
• Organisatie en verhaallijn
• Infographic wireframen
• Denk buiten het kader
• Vertel een verhaal
• Visualiseer de ‘haak’
• De boel op orde brengen met kleur
• Make It Universal
• Een driekleurenpalet is prettig voor de ogen
• Gebruik de hulpmiddelen die tot je beschikking staan
• Final Thoughts

About The Author

Amy Balliett is the co-founder of Killer Infographics, an infographic design agency located in Seattle, WA. Killer Infographics began as Submit Infographics, a …More aboutAmy↬

Opmerking van de redacteur: Lees het artikel The Do’s And Don’ts of Infographic Design van Nathan Yau: Revisited hier op Smashing Magazine, dat een reactie is op dit artikel.

Sinds het begin van het internet is de vraag naar goed design explosief gestegen. Van Web 1.0 naar Web 2.0 en verder, ontwerpers zijn op hun tenen blijven lopen terwijl ze de trends en verwachtingen van ons online universum definiëren. Het internet is een grote speeltuin voor ontwerpers, en online bedrijven worden steeds meer gewaardeerd voor wat er gewonnen kan worden uit een beetje goed uitgevoerde eye candy. In de afgelopen twee jaar is dit feit de ruggengraat geworden van een groeiende trend in online marketing: de infographic.

Infographics zijn visuele weergaven van informatie, of “data viz” zoals de coole kinderen het tegenwoordig noemen. De term “data viz” komt van “data visualization”, wat inhoudt dat gegevensverzamelingen op een unieke manier worden weergegeven, zodat ze kunnen worden gezien in plaats van gelezen. Deze visualisatie mag niet aan interpretatie worden overgelaten, maar moet worden ontworpen op een manier die een universele conclusie biedt voor alle kijkers. In de eenvoudigste bewoordingen zijn infographics niet veel anders dan de grafieken en diagrammen die programma’s als Excel al jaren uitspuwen.

Verder lezen op SmashingMag:

• Engrijpende voorbeelden van interactief infografisch ontwerp
• Voorzieningen voor datavisualisatie en infographics
• Stel je voor dat een cirkeldiagram voor altijd op een infographic stampt
• Geluk met natuurkunde in datavisualisatie

Of course, just as Web 2.0 1.0 veranderde, zijn de infographics van vandaag veel meer in het oog springend dan eenvoudige cirkeldiagrammen en staafdiagrammen. Tegenwoordig bundelen infographics veel verschillende datavisualisaties in één samenhangend stuk “eye candy”. Ze zijn meegeëvolueerd met ontwerptrends, hebben een aantal creatieve facelifts gekregen, en het internet wordt nu gevuld met interessante informatie die op boeiende manieren wordt geleverd.

Hoewel sommige ontwerptrends komen en gaan, zijn infographics hier om te blijven. Met merken als USA Today, The New York Times en Google en zelfs president Obama die zich erachter scharen, worden infographics een krachtig hulpmiddel voor het verspreiden van grote hoeveelheden informatie onder de massa. Grote en kleine bedrijven gebruiken infographics om hun merken op te bouwen, hun publiek te informeren en hun zoekmachine ranking te optimaliseren door link-building. Dit is waarom het leren ontwerpen van een goede infographic een must is, en het vermijden van de veel voorkomende valkuilen van infographic ontwerp kan het verschil betekenen tussen het landen van een grote klant en ze helemaal verliezen.

Wrapping Your Mind Around Data Viz And Infographic Design

Het ontwerpen van een infographic is niet hetzelfde als het ontwerpen van een website, flier, brochure, etc. Zelfs sommige van de beste ontwerpers, met portfolio’s die je zouden doen kwijlen, kunnen geen effectief infografisch ontwerp uitvoeren. Het maken van infographics is een uitdaging en vereist een mentaliteit die niet bij iedereen van nature aanwezig is. Maar die mentaliteit kan worden gewonnen door oefening en door vast te houden aan bepaalde normen, waarvan de belangrijkste is om data viz te respecteren en te begrijpen. Hier zijn enkele eenvoudige regels die je kunt volgen als je je geest rond de juiste data viz wikkelt.

Show, Don’t Tell

Een regel van de cinema is om te laten zien, niet te vertellen. Hetzelfde geldt voor het ontwerp van infografieken. De basis van elke goede infographic is data viz. Als infographic ontwerper bepaal je al dan niet het concept en verzamel je al het onderzoek voor het uiteindelijke ontwerp, maar hoe dan ook ben je verantwoordelijk voor het omzetten van die informatie in een visueel stimulerend, samenhangend ontwerp dat een verhaal vertelt en dat geen enkele kans laat liggen om data te visualiseren. Neem dit deel van een infographic over Twitter door ViralMS als voorbeeld:

Wat is er mis met deze infographic? Hij breekt meteen de eerste regel. Als je de kans krijgt om informatie visueel weer te geven, moet je die kans grijpen. Hier hadden de tweets per seconde op zijn minst in een staafdiagram kunnen worden weergegeven. Dan zou iemand snel naar dit gedeelte kunnen kijken en zien wat er aan de hand is; door de verschillende hoogtes van de balken te zien, had het oog snel de verschillen in tweets per seconde per gebeurtenis kunnen inschatten zonder iets te hoeven lezen.

Als je moeite hebt om je aan deze regel te houden, probeer dan al je tekst op één laag van je AI-bestand te houden (uitgezonderd tekst in grafieken en diagrammen). Zet af en toe de tekstlaag uit en kijk of de infographic nog steeds zinvol is. Als er geen data viz is, of als een heleboel plaatjes context missen, dan vertel je te veel en laat je te weinig zien.

Als de klant een Excel-grafiek wilde, hadden ze jou niet nodig

Het klinkt misschien hard, maar het is waar. Als infographics zo eenvoudig waren als het neerzetten van een aantal standaard grafieken en diagrammen op een pagina, dan zouden klanten geen geweldige ontwerpers hoeven te zoeken. Er zijn veel tools online die kleurrijke cirkeldiagrammen, lijngrafieken en staafdiagrammen kunnen maken, dus je moet dingen naar een hoger niveau tillen om je ontwerp te laten opvallen. Welke van de twee onderstaande grafieken zou volgens jou een klant gelukkiger maken?

Als je grafiek B hebt geantwoord, heb je het goed begrepen. Natuurlijk lenen niet alle gegevens zich voor creatieve en unieke grafieken. Grafiek A zou heel goed kunnen werken als de rest van de infographic een vergelijkbare esthetiek zou hebben. Soms moet je gewoon door de zure appel heen bijten en een traditioneel staafdiagram of cirkeldiagram produceren; overweeg niettemin altijd manieren om het op te leuken, zoals in de voorbeelden hieronder:

Typografie mag geen kruk zijn

Typografie kan een ontwerp maken of breken, maar het mag niet de oplossing zijn voor een data viz-probleem. Vaak beginnen ontwerpers een infographic met veel energie en opwinding, maar verliezen ze snel stoom naarmate ze verder op de pagina komen. Dit leidt vaak tot snelle beslissingen en slechte oplossingen, zoals het gebruik van typografie om een groot getal te laten zien in plaats van het op een of andere manier te visualiseren. Hier is een voorbeeld:

Wanneer ik dit zie, moet ik denken aan de reclamecampagne “Where’s the beef?”, en denk ik: “Waar is de data viz?” Hoewel Sketch Rockwell een van mijn favoriete lettertypen aller tijden is, is dit een perfect voorbeeld van te veel vertrouwen op typografie.

Altijd als je een onderzoeksgetal krijgt voor een infographic, vraag je dan af hoe het gevisualiseerd kan worden. Percentages kunnen altijd worden gevisualiseerd met creatieve taartdiagrammen; numerieke waarden in een reeks kunnen meestal worden omgezet in een uniek staafdiagram; en wanneer getallen niet op een consistente schaal passen, kun je ze misschien visualiseren in een diagram. Hier is een andere manier waarop de bovenstaande gegevens hadden kunnen worden gevisualiseerd:

Typografie heeft haar plaats

Dit gezegd hebbende, heeft typografie haar toepassingen, die niet mogen worden genegeerd bij het maken van een infographic. Meestal zul je je creatieve typografische energie willen richten op titels en koppen. De titel van de infographic is een perfecte gelegenheid om een leuk en opvallend lettertype te gebruiken en het een behandeling te geven die past bij het thema of onderwerp. Zorg er alleen voor dat de titel niet zo afleidt dat hij de aandacht afleidt van de reden waarom we naar de infographic kijken. Sommige onderwerpen in infografieken zijn saai, maar met de juiste titel kunnen mensen genoeg geënthousiasmeerd worden om door te scrollen.

Ook koppen helpen om een infographic op te breken en maken de gegevens makkelijker op te nemen, waardoor je nog een kans krijgt om je font-nerd-vlag te laten wapperen.

Organisatie en verhaallijn

Het organiseren van een infographic op een manier die zinvol is en de kijker geïnteresseerd houdt, is niet altijd eenvoudig, maar het hoort bij het werk van de meeste infographicontwerpers. Meestal krijg je een heleboel gegevens en moet je daar een visueel verhaal van maken. Dit kan in het begin een uitdaging zijn, maar je kunt een aantal algemene regels volgen om het gemakkelijker te maken.

Infographic wireframen

Infographic wireframen stelt je in staat om een storyboard en lay-out voor het ontwerp uit te werken. Misschien heb je een idee van het verhaal dat je wilt vertellen, maar als je begint met de lay-out, loop je misschien tegen een muur op en moet je opnieuw beginnen. Het is ongelooflijk frustrerend om te moeten reorganiseren nadat je al een groot deel van het ontwerp hebt gedaan. Vermijd dit door uw verhaallijn in het begin op te zetten om te bepalen welke gegevens u wilt laten zien en hoe. Trek een uur uit om dingen te schetsen en ervoor te zorgen dat het allemaal zinvol is. Dit helpt ook om ervoor te zorgen dat het kleurenpalet dat je kiest de aandacht vestigt op de belangrijke punten en ervoor zorgt dat de blik over de pagina blijft stromen.

Denk buiten het kader

Als je de infographic uittekent, identificeer je onderbrekingen in de secties die helpen het verhaal te vertellen. De meeste infographics online hebben een verticale stroom, waarbij elke sectie een kop heeft om hem te onderscheiden van de vorige. Dit gaat snel vervelen. Het organiseren van de gegevens en het onderverdelen van informatie zonder volledig te vertrouwen op kopjes en kleurafbrekingen is een goede manier om de eentonigheid te doorbreken.

In plaats van voor een typische indeling met één kolom te gaan, zou je bijvoorbeeld in bepaalde delen twee kolommen kunnen gebruiken. Je kunt ook delen opbreken met randen, met achtergronden van verschillende vormen of het hele ontwerp een weg- of padthema geven. Hier zijn enkele lay-outs om je creativiteit de vrije loop te laten:

Vertel een verhaal

Alle goede verhalen hebben een begin, midden en einde. Infographics verdienen dezelfde behandeling. Aan het begin van de infographic introduceer je het probleem of de stelling. Onderbouw dit met gegevens. Eindig de infographic ten slotte met een conclusie.

Visualiseer de ‘haak’

Elke goede infographic heeft een ‘haak’ of ‘primaire take-away’ die de kijker doet zeggen: “A-ha!” Als ontwerper moet je deze haak, als het even kan, het middelpunt van het ontwerp maken. Het is meestal het beste om het haakje in het midden of helemaal aan het einde van de infographic te plaatsen, zodat het meer aandacht trekt. Geef de belangrijkste informatie het meeste visuele gewicht, zodat kijkers weten wat ze mee moeten nemen. Hier volgen enkele voorbeelden van goed gevisualiseerde haken:

De boel op orde brengen met kleur

Het verschil dat een kleurenpalet kan maken, is verbazingwekkend, vooral in de wereld van infographics. Het juiste palet kan helpen een infographic te organiseren, het merk te promoten, het onderwerp te versterken en nog veel meer. Het verkeerde palet kan van een geweldig onderwerp een doorn in het oog maken, het imago van het merk schaden en de verkeerde boodschap overbrengen. Hier zijn enkele tips om te overwegen bij het kiezen van kleuren voor uw infographic.

Make It Universal

In webdesign is het altijd belangrijk om een palet te kiezen dat past bij het thema van de website en dat neutraal genoeg is voor een diverse groep bezoekers. Omdat infographics voornamelijk online worden gedeeld, is het kiezen van het juiste palet voor een scala aan bezoekers net zo belangrijk. Je moet ook rekening houden met wat er online goed uitziet.

Dominante donkere kleuren en neonkleuren zijn bijvoorbeeld niet goed te vertalen op infographics; neon op zwart kan moeilijk te lezen zijn, en als er veel data is, wordt het een uitdaging om alles in je op te nemen. Vermijd ook wit als achtergrond waar mogelijk. Infographics worden vaak gedeeld op meerdere websites en blogs, waarvan de meeste een witte achtergrond hebben. Als de achtergrond van je infographic ook wit is, is het moeilijk te ontcijferen waar hij begint en eindigt.

Een driekleurenpalet is prettig voor de ogen

Met alle gegevens die in een infographic staan, moet het oog van de lezer gemakkelijk de pagina kunnen doorlopen; een verkeerd kleurenpalet kan hier een groot obstakel voor zijn. Kies een palet dat de zintuigen niet aantast. En overweeg dit te doen voordat je begint met ontwerpen, omdat het je zal helpen bepalen hoe je de verschillende elementen moet visualiseren.

Als het kiezen van een kleurenpalet moeilijk voor je is, houd je dan aan de regel van drie. Kies drie primaire kleuren. Van de drie moet er één de achtergrondkleur zijn (meestal de lichtste van de drie), en de andere twee moeten de secties onderverdelen. Als u andere kleuren moet toevoegen, gebruik dan nuances van de drie hoofdkleuren.

Gebruik de hulpmiddelen die tot je beschikking staan

Bij het kiezen van kleuren hoef je het wiel niet opnieuw uit te vinden. Er zijn een aantal goede websites die je kunnen helpen bij het kiezen van het juiste kleurenpalet voor je infographic. Adobe’s Kuler biedt nieuwe thema’s en een doorzoekbare database, alsook een gemakkelijk hulpmiddel om het palet aan te passen waarin u geïnteresseerd bent. Een probleem met Kuler is dat alle paletten vijf kleuren hebben, en de kleuren zijn soms van totaal verschillende families, in plaats van tinten van een paar primaire kleuren, dus het vinden van het juiste palet kan zijn als het zoeken naar een naald in een hooiberg.

Een ander hulpmiddel om kleuren te kiezen is COLOURlovers. Deze database is eenvoudiger te doorzoeken: hij verdeelt paletten in verschillende thema’s en kan worden gesorteerd op favorieten. Hoewel de meeste paletten ook uit vijf kleuren bestaan, wordt aan de kleuren niet altijd evenveel gewicht toegekend; in plaats daarvan suggereert de tool welke kleur dominant zou moeten zijn. Hier zijn enkele goede en slechte paletten voor infographics:

Final Thoughts

Hoewel deze normen belangrijk zijn om te overwegen voor de meeste infographicontwerpen, komt er soms een infographic voorbij die al deze regels breekt en toch enorm slaagt. Uiteindelijk houden klanten van “eye candy” en ontwerpen die “knallen!” Hoewel dergelijke termen subjectief zijn (en vervelend voor de meeste ontwerpers), herkennen we allemaal een geweldig infografisch ontwerp als we er een zien, en je klanten doen dat ook. Gebruik deze regels als leidraad in de wereld van infografieken, maar creëer je eigen technieken en normen nadat je enige ervaring hebt opgedaan.

(al)