3 manieren om een infographic te ontwerpen die zich onderscheidt van de menigte
Infographics zijn niet nieuw. En zeker, interactieve zijn dat ook niet - maar met de lancering van recente data-gestuurde nieuwssites zoals Vox,Fivethirtyeight en The Upshot , ze worden steeds populairder.
En aangezien kijkers die infographics op tablets, telefoons en desktops zien, is het bouwen van die afbeeldingen in HTML5 de manier om te gaan - waarschijnlijk zullen uw klanten en collega's u vragen om te bouwen!
EEN kaart van honkbalfans door The Upshot
Hier zijn drie manieren om ervoor te zorgen dat uw HTML5-gebaseerde interactieve infographics de warboel doorbreken.
1) Denk na over waarom u de infographic maakt in de eerste plaats met behulp van de FIRED-methode
Voordat je over de technologie nadenkt, is het belangrijk om vanuit het oogpunt van een kijker na te denken over de afbeelding. Hoewel HTML5 je een volledig nieuw medium biedt voor het presenteren van het verhaal van je gegevens, geeft het niet automatisch een doel of verhaal aan het stuk.
Het is duidelijk wanneer een project op het laatste moment samen werd geslagen, zonder rekening te houden met bruikbaarheid of kwaliteit. Hoe voorkom je dat je dat werk doet? Ik gebruik graag de "FIRED" -methode - een eenvoudige manier om te onthouden om kritisch na te denken voordat je de nieuwste CSS-trucs gebruikt om een interactieve kaart te maken:
- Fris - Hoe onderscheid je ontwerp zich van de rest?
- Informatief - Geeft u nauwkeurige en intrigerende feiten weer?
- Relevant - Vertoont uw informatie een harmonieus verhaal?
- Vermakelijk - Wordt de kijker aangetrokken en opgewonden om een deel van uw verhaal te zijn?
- Anders - Is uw infographic nieuw? Is het al eerder gedaan?
Door deze vragen te stellen, kunt u de doelstellingen van uw pagina in kaart brengen en aangeven hoe u wilt dat uw bericht resoneert met uw publiek. Uiteindelijk moet uw eindproduct uw idee op een duidelijke en smakelijke manier uitwerken. Wees creatief, ja, maar wees ook gedisciplineerd. De grafische kunst moet de lezer erbij betrekken, maar de gepresenteerde gegevens moeten beknopt zijn; laat het medium de boodschap niet inhalen. Een succesvolle infographic trekt uw publiek voor meer en is gemakkelijk te verteren.
2) Laat het bewegen
Adobe Edge Animate is een HTML5-animatietool waarmee u beweging aan webafbeeldingen kunt toevoegen, zodat u uw aangepaste ontwerpen kunt uitbreiden met interactiviteit en beweging. Het integreert ook met andere creatieve hulpmiddelen om een naadloze brug te slaan tussen ontwerp en HTML terwijl u voor het web maakt. Er zijn een aantal echt geweldige sjablonen en voorbeelden op de showcase pagina om u op weg te helpen. Als je een niveau dieper wilt gaan en elementen zoals click-and-touch sleepbare scrubbers toevoegt, is dit een zelfstudie met activa om u op weg te helpen.
Je kunt ook weven in interactieve afbeeldingen die gebruik maken van de nieuwste browserupdates voor CSS en HTML5 om een aantal mooie fancy-effecten te maken. CSS Shapes bevindt zich in de laatste fase van specificatie; bekijken (Github repo hier ).
De evolutie van het web infographic.
3) Gegevens, gegevens, gegevens
Een infographic is niets zonder krachtige gegevensbronnen en de hulpmiddelen om ze te illustreren.
Gegevensbronnen kunnen variëren, of het nu uw eigen onderzoek is of uw klant. Er is ook een goede lijst op Quora van publiek beschikbare datasets dat kan je een aantal goede onbewerkte gegevens geven om mee te spelen.
Sommige van mijn favoriete infographic services, (die natuurlijk alle HTML5-producten leveren) voor het verzamelen en evalueren van uw gegevens zijn:
- Piktochart - een gratis service (met een betaalde pro-optie) met een breed scala aan aanpasbare thema's met een handig hulpmiddel voor het importeren van gegevens.
- infogr.am - een gratis service (met betaalde betaalde pro-optie) met sjablonen, spreadsheets en andere hulpprogramma's om visuele grafieken uit te bouwen.
- visual.ly - een grafische gemeenschap. Hoewel de prijs van visual.ly een beetje steil lijkt (ze zullen je een infographic maken op basis van een creatieve opdracht die begint bij $ 999), is hun community een bron van inspiratie bij het opstarten van je eigen infographicproject.
En als u bijzonder ambitieus bent en er echt naar op zoek wilt gaan naar het grotere veld van de gegevenswetenschap, dan zijn er ontzettend veel online bronnen over dit onderwerp. Er zijn MOOC's zoals deze cursus gegevenswetenschap van de Universiteit van Washington.