3 måder at designe en infographic, der står ud fra mængden
Infographics er ikke nye. Og helt sikkert er interaktive dem heller ikke - men med lanceringen af nyere data-drevne nyhedswebsteder som f.eks Vox,Fivethirtyeight og The Upshot , de bliver mere populære.
Og da seerne ser disse infografier på tabletter, telefoner og stationære computere, er det sandsynligvis den måde, dine kunder og medarbejdere vil bede dig at opbygge, at bygge dem i HTML5.
EN kort over baseball fans af The Upshot
Her er tre måder at sikre, at dine HTML5-baserede interaktive infografier går i stykker gennem rod.
1) Tænk på hvorfor du gør det infographic i første omgang ved hjælp af FIRED-metoden
Før du selv tænker på teknologien, er det vigtigt at tænke på grafikken ud fra en seers synsvinkel. Mens HTML5 giver dig et helt nyt medium til at præsentere historien om dine data, giver det ikke automatisk formålet eller fortællingen til stykket.
Det er indlysende, da et projekt blev slået sammen i sidste øjeblik uden hensyn til brugervenlighed eller kvalitet. Hvordan undgår du at gøre det arbejde? Jeg kan godt lide at anvende "FIRED" -metoden - en nem måde at huske på at tænke kritisk, før du begynder at bruge det nyeste i CSS-tricks til at lave et interaktivt kort:
- Frisk - Hvordan vil dit design skille sig ud fra mængden?
- Informativ - Præsenterer du nøjagtige og spændende fakta?
- Relevant - Fortæller dine oplysninger en harmonisk historie?
- Underholdende - Er seeren trukket ind og begejstret for at være en del af din historie?
- Forskellige - Er din infografiske ny? Er det blevet gjort før?
At stille disse spørgsmål vil hjælpe dig med at kortlægge målene for din side og hvordan du vil have din besked til at genoprette med dit publikum. I sidste ende skal dit endelige produkt ramme din idé på en klar og velsignet måde. Vær kreativ, ja, men også være disciplineret. Den grafiske kunst er, hvad der skal tegne læseren i, men de fremlagte data skal være kortfattede; lad ikke mediet overgå meddelelsen. En succesfuld infografisk trækker dit publikum ind for mere og er let at fordøje.
2) gør det flytte
Adobe Edge Animate er et HTML5 animationsværktøj, der giver dig mulighed for at tilføje bevægelse til webgrafik, så du kan udvide dine brugerdefinerede designs med interaktivitet og bevægelse. Den integrerer også med andre kreative værktøjer til at tilbyde en sømløs bro mellem design og HTML, som du opretter til internettet. Der er nogle rigtig gode skabeloner og prøver på showcase side for at komme i gang. Hvis du ønsker at gå dybere og tilføje elementer som klik-og-touch-trækbare skrubber, her er en tutorial med aktiver for at komme i gang.
Du kan også væve i interaktiv grafik, der udnytter de nyeste browser opdateringer til CSS og HTML5 for at gøre nogle smukke effekter. CSS Shapes er i sine sidste faser af specifikationen; tjek det ud (Github repo her ).
Det udvikling af internettet infografik.
3) Data, data, data
En infographic er intet uden kraftige datakilder og værktøjerne til at illustrere dem.
Datakilder kan variere - hvad enten det er din egen forskning eller din kundes. Der er også en god liste på Quora of offentligt tilgængelige datasæt der kan give dig nogle gode rå data at lege med.
Nogle af mine foretrukne infografiske tjenester (som indeholder alle HTML5-produkter, selvfølgelig) til indsamling og evaluering af dine data er:
- Piktochart - En gratis service (med en betalt pro-mulighed), der tilbyder en bred vifte af brugerdefinerede temaer med et glat dataimporterende værktøj.
- infogr.am - En gratis service (med betalt en betalt pro-mulighed), der tilbyder skabeloner, regneark og andre hjælpeprogrammer til at udarbejde visuelle grafer.
- visual.ly - et grafisk fællesskab Selv om prispunktet for visual.ly kan virke lidt stejlt (de vil gøre dig en infografisk baseret på en kreativ kort fra 999 $), er deres fællesskab et inspirationssted, når man søger at starte dit eget infografiske projekt.
Og hvis du er særligt ambitiøs og ser ud til at dybere dykke ind i det større felt af datalogi, er der masser af ressourcer online om emnet. Der er MOOC'er som denne datavidenskab kursus fra University of Washington.