Le infografiche non sono nuove. E certamente, quelli interattivi non lo sono, ma con il lancio di recenti siti di notizie guidati dai dati come Vox,Fivethirtyeight e L'Upshot stanno diventando più popolari

E dal momento che gli spettatori vedono queste infografiche su tablet, telefoni e desktop, la realizzazione di tali elementi grafici in HTML5 è la strada da percorrere: è probabile che i tuoi clienti e colleghi ti chiedano di creare!

baseball_info

UN mappa dei tifosi di baseball da The Upshot

Ecco tre modi per assicurarti che le tue infografiche interattive basate su HTML5 sfondino la confusione.

1) Pensa perché stai facendo l'infografica in primo luogo usando il metodo FIRED

Prima ancora di pensare alla tecnologia, è importante pensare alla grafica dal punto di vista di uno spettatore. Mentre HTML5 ti offre un mezzo completamente nuovo per presentare la storia dei tuoi dati, non dà automaticamente uno scopo o una narrazione al pezzo.

È ovvio quando un progetto è stato schiaffeggiato insieme all'ultimo minuto, senza alcun riguardo per l'usabilità o la qualità. Come eviti di fare quel lavoro? Mi piace utilizzare il metodo "FIRED", un modo semplice per ricordare di pensare in modo critico prima di iniziare a utilizzare gli ultimi trucchi CSS per creare una mappa interattiva:

  • Fresh - Come si distinguerà il tuo progetto dalla massa?
  • Informativo - Stai presentando fatti accurati e intriganti?
  • Rilevante - Le tue informazioni raccontano una storia armoniosa?
  • Divertente : lo spettatore è attirato ed entusiasta di far parte della tua storia?
  • Diverso : la tua infografica è nuova? È già stato fatto prima?

Chiedere queste domande ti aiuterà a tracciare gli obiettivi della tua pagina e come desideri che il tuo messaggio entri in risonanza con il tuo pubblico. In definitiva il tuo prodotto finale dovrebbe incorniciare la tua idea in modo chiaro e gradevole. Sii creativo, sì, ma anche disciplinato. L'arte grafica è ciò che dovrebbe attirare il lettore, ma i dati presentati devono essere succinti; non lasciare che il mezzo superi il messaggio. Un'infografica di successo attira il tuo pubblico per di più ed è facile da digerire.

2) Fallo muovere

Adobe Edge Animate è uno strumento di animazione HTML5 che ti consente di aggiungere movimento alla grafica web, consentendoti di estendere i tuoi progetti personalizzati con interattività e movimento. Si integra inoltre con altri strumenti creativi per offrire un ponte tra design e HTML mentre crei per il web. Ci sono alcuni modelli e campioni davvero fantastici vetrina per iniziare. Se vuoi andare ad un livello più profondo e aggiungere elementi come lavaggi trascinabili click-and-touch, ecco a tutorial con risorse per iniziare.

Puoi anche tessere in grafici interattivi che sfruttano gli ultimi aggiornamenti del browser per CSS e HTML5 per creare effetti piuttosto fantasiosi. CSS Shapes è nelle sue ultime fasi di specifica; controlla (Repository Github Qui ).

evolution_web

Il evoluzione del web infografica.

3) Dati, dati, dati

Un'infografica non è nulla senza potenti fonti di dati e gli strumenti per illustrarle.

Le origini dati possono variare, indipendentemente dal fatto che si tratti della tua ricerca o di quella del tuo cliente. C'è anche una buona lista su Quora di set di dati pubblicamente disponibili questo può darti dei buoni dati grezzi con cui giocare.

Alcuni dei miei servizi infografici preferiti (che forniscono tutti i prodotti HTML5, ovviamente) per la raccolta e la valutazione dei dati sono:

  • Piktochart - un servizio gratuito (con un'opzione Pro a pagamento) che offre un'ampia gamma di temi personalizzabili con un'utilità di importazione dei dati.
  • infogr.am - un servizio gratuito (con un'opzione pagata a pagamento pro) che offre modelli, fogli di calcolo e altre utilità per creare grafici visivi.
  • visual.ly - una comunità grafica Mentre il punto di prezzo di visual.ly può sembrare un po 'ripido (ti faranno un'infografica basata su un brief creativo a partire da $ 999) la loro comunità è un'oasi di ispirazione quando cerchi di iniziare il tuo progetto di infografica.

E se sei particolarmente ambizioso e stai cercando di immergerti davvero nel più vasto campo della scienza dei dati, ci sono un sacco di risorse online sull'argomento. Ci sono MOOC come questo corso di informatica dall'università di Washington.