3 sätt att designa en infographic som står ut från mängden
Infographics är inte nya. Och säkert, interaktiva är inte heller - men med lanseringen av nyligen data-driven nyheter webbplatser som VoxFivethirtyeight och Upproret , de blir mer populära.
Och eftersom tittarna ser de infographics på tabletter, telefoner och stationära datorer, är det säkert sättet att bygga den grafiken i HTML5-det är troligt hur dina kunder och medarbetare kommer att fråga dig att bygga!
en karta över baseball fans av The Upshot
Här är tre sätt att se till att dina HTML5-baserade interaktiva infographics bryter igenom röran.
1) Tänk på varför du gör infographic i första hand med FIRED-metoden
Innan du ens tänker på tekniken är det viktigt att tänka på grafiken ur en tittares synvinkel. Medan HTML5 ger dig ett helt nytt medium för att presentera historien om dina data, ger det inte automatiskt syfte eller berättelse till stycket.
Det är uppenbart när ett projekt slogs samman i sista minuten, utan hänsyn till användbarhet eller kvalitet. Hur undviker du att göra det arbetet? Jag gillar att använda "FIRED" -metoden-ett enkelt sätt att komma ihåg att tänka kritiskt innan du börjar använda det senaste i CSS-tricks för att göra en interaktiv karta:
- Frisk - Hur kommer din design att sticka ut från mängden?
- Informativ - presenterar du exakta och spännande fakta?
- Relevant - Berätta dina uppgifter om en harmonisk historia?
- Underhållande - Är tittaren dragit in och upphetsad att vara en del av din berättelse?
- Olika - Är din infografiska nya? Har det gjort det förut?
Att ställa dessa frågor hjälper dig att kartlägga målen för din sida och hur du vill att ditt meddelande ska resonera med din publik. Slutligen bör din slutprodukt ramma din idé på ett tydligt och välsmakande sätt. Var kreativ, ja, men också vara disciplinerad. Den grafiska konsten är vad som bör rita läsaren i, men de presenterade data måste vara kortfattade; låt inte mediet ta över meddelandet. Ett framgångsrikt infographic drar in din publik för mer och är lätt att smälta.
2) Gör det rör sig
Adobe Edge Animera är ett HTML5-animeringsverktyg som låter dig lägga till rörelse i webbgrafik, så att du kan utöka dina anpassade mönster med interaktivitet och rörelse. Den integrerar också med andra kreativa verktyg för att erbjuda en sömlös bro mellan design och HTML som du skapar för webben. Det finns några riktigt bra mallar och prover på presentationssida för att komma igång. Om du vill gå en nivå djupare och lägga till element som klick-och-touch-släppbara skrubber, här är en handledning med tillgångar för att komma igång.
Du kan också väva in interaktiv grafik som utnyttjar de senaste webbläsaren uppdateringar till CSS och HTML5 för att göra några ganska fina effekter. CSS former är i sina sista faser av specifikationen; Kolla in det (Github repo här ).
De utveckling av webben infographic.
3) Data, data, data
En infographic är ingenting utan kraftfulla datakällor och verktygen för att illustrera dem.
Datakällor kan variera - oavsett om det är egen forskning eller din kunds. Det finns också en bra lista på Quora of offentligt tillgängliga dataset Det kan ge dig några bra råa data att spela med.
Några av mina favoritinfografiska tjänster (som innehåller alla HTML5-produkter, förstås) för att samla in och utvärdera dina data är:
- Piktochart - En gratis tjänst (med betalat pro-alternativ) som erbjuder ett brett utbud av anpassningsbara teman med ett smidigt dataimporterande verktyg.
- infogr.am - En gratis tjänst (med betalat betalat pro-alternativ) som erbjuder mallar, kalkylblad och andra verktyg för att bygga ut visuella grafer.
- visuellt - en grafisk gemenskap Medan prispunkten för visual.ly kan verka lite brant (de kommer att göra dig en infografisk baserad på en kreativ kort med början på 999 USD) är deras samhälle ett paradis för inspiration när man letar efter att starta ett eget infografiskt projekt.
Och om du är särskilt ambitiös och ser ut att verkligen dyka dyka in i större datavetenskapsområde, finns det massor av resurser online om ämnet. Det finns MOOCs så här datavetenskapskurs från University of Washington.