3 måter å designe en infographic som står ut fra mengden
Infographics er ikke nye. Og absolutt er interaktive det heller ikke, men med lanseringen av nyere datadrevne nyhetssider som Vox,Fivethirtyeight og The Opptatt , blir de mer populære.
Og siden seere ser disse infografiene på tabletter, telefoner og stasjonære datamaskiner, er det sikkert å bygge dem grafikk i HTML5-det er sannsynligvis måten dine kunder og kollegaer spør deg om å bygge!
EN kart over baseball fans av The Upshot
Her er tre måter å sørge for at HTML5-baserte interaktive infographics bryter gjennom rotet.
1) Tenk på hvorfor du gjør infographic i utgangspunktet ved hjelp av FIRED-metoden
Før du tenker på teknologien, er det viktig å tenke på grafikken fra en betraps synspunkt. Mens HTML5 gir deg et helt nytt medium for å presentere historien om dataene dine, gir den ikke automatisk formålet eller fortellingen til brikken.
Det er opplagt når et prosjekt ble slått sammen i siste øyeblikk, uten hensyn til brukervennlighet eller kvalitet. Hvordan unngår du å gjøre det arbeidet? Jeg liker å bruke "FIRED" -metoden-en enkel måte å huske på å tenke kritisk før du begynner å bruke det siste innen CSS-triks for å lage et interaktivt kart:
- Frisk - Hvordan vil designet skille seg ut fra mengden?
- Informativ - presenterer du nøyaktige og spennende fakta?
- Relevant - Forteller informasjonen din en harmonisk historie?
- Underholdende - Er betrakteren trukket inn og glade for å være en del av historien din?
- Ulike - Er din infografiske ny? Har det blitt gjort før?
Å stille disse spørsmålene vil hjelpe deg med å kartlegge målene for siden din og hvordan du vil at meldingen din skal resonere med publikum. Til slutt skal ditt endelige produkt ramme din ide på en klar og smakfull måte. Vær kreativ, ja, men vær også disiplinert. Den grafiske kunsten er det som skal tegne leseren i, men dataene som presenteres må være kortfattede; ikke la mediet overta meldingen. Et vellykket infographic trekker inn publikum for mer og er lett å fordøye.
2) Gjør det flytte
Adobe Edge Animate er et HTML5 animasjonsverktøy som lar deg legge til bevegelse til webgrafikk, slik at du kan forlenge dine tilpassede design med interaktivitet og bevegelse. Den integrerer også med andre kreative verktøy for å tilby en sømløs bro mellom design og HTML som du lager for nettet. Det er noen flotte maler og prøver på showcase side å komme i gang. Hvis du vil gå et nivå dypere og legge til elementer som klikk-og-trykk-dragerbare skrubber, her er en opplæring med eiendeler å komme i gang.
Du kan også veve i interaktiv grafikk som utnytter de nyeste nettleseroppdateringene til CSS og HTML5 for å gjøre noen flotte effekter. CSS Shapes er i sine siste faser av spesifikasjonen; Sjekk det ut (Github repo her ).
De evolusjon av Internett Infographic.
3) Data, data, data
En infographic er ingenting uten kraftige datakilder og verktøyene for å illustrere dem.
Datakilder kan variere - enten det er din egen forskning eller kundens. Det er også en god liste på Quora of offentlig tilgjengelige datasett som kan gi deg gode rådata til å leke med.
Noen av mine favoritt infografiske tjenester (som gir alle HTML5-produkter, selvfølgelig) for å samle inn og evaluere dataene dine er:
- Piktochart - En gratis tjeneste (med et betalt pro-alternativ) som tilbyr et bredt spekter av tilpassbare temaer med et slick dataimporterende verktøy.
- infogr.am - En gratis tjeneste (med betalt en betalt proopsjon) som tilbyr maler, regneark og andre verktøy for å bygge ut visuelle grafer.
- visual.ly - et grafisk fellesskap. Selv om prispunktet for visual.ly kan virke litt bratt (de vil gjøre deg en infografisk basert på en kreativ kort fra $ 999), er deres fellesskap et paradis for inspirasjon når du ser på å starte ditt eget infografiske prosjekt.
Og hvis du er spesielt ambisiøs og ser ut til å virkelig dykke dykke inn i det større feltet av datavitenskap, er det massevis av ressurser online på emnet. Det er MOOCer som dette datavitenskapskursus fra University of Washington.