Visualizzazione dei dati in Web Design: 12 splendidi esempi
Dati, dati, ovunque. Ma cosa ci fai? Oggi abbiamo raccolto 12 splendidi esempi di visualizzazioni dei dati nella progettazione di siti Web per far ripartire le tue idee su come lavorare con i dati.
Viviamo in un'epoca in cui la capacità di mostrare i dati in modi nuovi e interessanti può essere una risorsa enorme come designer.
Che tu abbia una vasta collezione di numeri o solo informazioni che vuoi mostrare, questo stile di design può essere un ottimo strumento nel tuo kit.
Esplora Envato Elements
1. Storia della NFL
Con decenni di dati che coprono 32 team, ci sono molte informazioni disponibili sui giochi nella NFL. FiveThirtyEight ha riassunto tutto in una serie di grafici interattivi che puoi visualizzare per squadra per vedere i flussi e riflussi della storia del calcio.
La cosa migliore di questa visualizzazione dei dati è che è super semplice. Le linee mostrano vincite e perdite. Ma con clic e passaggi, i dati prendono vita: puoi ottenere punteggi, date e record per ogni singola partita sovrapposti su una mappa delle medie per l'intera lega. (Quindi puoi vedere se la tua squadra è avanti o indietro rispetto al gruppo.)
2. Selfiecity
I selfie non sono solo un divertente set di foto. Selfiecity utilizza visualizzazioni rich media per assemblare migliaia di foto per trovare informazioni demografiche sulle persone che le prendono.
La cosa interessante di questo set di dati è che mentre è tutto visivo - migliaia di foto - puoi iniziare a vedere modelli, come lo stile di selfie che le persone scattano in luoghi diversi, sia che le donne o gli uomini scattino più foto e l'età dei selfie- acquirenti. Mentre ci sono alcune statistiche e numeri qui, questi dati sono tracciati usando le foto in una griglia gigante.
3. Il più grande vocabolario nell'hip hop
Questo progetto di ThePudding mostra che i dati non devono sempre essere numerati. Analizza il numero di parole uniche utilizzate nei testi hip hop e traccia i più grandi vocabolari per il numero di parole con immagini dell'artista.
Ecco come funziona: “Confronta il numero di parole uniche utilizzate da alcuni dei più famosi artisti dell'hip hop (ovvero, un esempio di una visione quantitativa del lirismo, una volta proposta da Tahir Hemphill). Ho usato i primi 35.000 testi di ogni artista. In questo modo, artisti prolifici, come Jay-Z, possono essere paragonati a artisti più recenti, come Drake. "
Il semplice design in bianco e nero della carta stampata è visivamente interessante e rende facile vedere quali artisti sono in testa al gruppo. (Oppure puoi usare gli strumenti più interattivi e cercare artisti specifici.) Puoi anche ordinare per epoca, con gli anni 2000 il più liricamente robusto.
4. Anno di Shopify in revisione
Arricchisci una serie di dati annuali con un sito web radicato nel renderlo tutto visivo. Il 2016 in Review di Shopify è una raccolta di dati di report annuali in un pacchetto di facile lettura.
Il sito scorre in blocchi simili a pagine con fatti e informazioni. La visualizzazione in stile sequenza temporale scorre più a fondo nei collegamenti con grafici e altri grafici numerici. Questo sito mostra che anche con molti numeri, puoi creare qualcosa di sbalorditivo e di tendenza.
5. Routine quotidiane di famosi creativi
Non lasciarti ingannare dalla barra del pensiero o dai grafici a linee sono noiosi. Questo fantastico set di linee mostra dati interessanti che mostrano come alcuni creativi piuttosto famosi hanno trascorso le loro giornate. (E c'è un sacco di cibo e tempo libero lì dentro.)
Ciò che fa funzionare questa visualizzazione dei dati è il colore. Ogni riga significa qualcosa. Ogni colore contrasta nettamente con i colori che lo circondano in modo che ogni bit di informazione sia facile da vedere e capire.
6. Falling through the Gap
Questa visualizzazione interattiva dei dati dalla BBC è geniale. Una serie di modifiche ai punti animati sull'azione di scorrimento mostrano informazioni complesse a colpo d'occhio.
Le animazioni e l'idea alla base di questa infografica interattiva sono ben pianificate ed eseguite.
7. Ogni evento di eclissi solare totale
Questa visualizzazione dei dati mescola un po 'di magie, animazioni e dati scientifici per fornire informazioni personalizzate su quando (e se) potresti vedere un'eclissi solare.
Inizia con l'anno di nascita per un rapporto personalizzato. Ecco il mio (nota che l'estrazione dei dati è del 2017): “Se sei nato nel 1980, quest'anno hai (o sarai) 37 anni. Se vivi fino a 100, ci saranno altre 43 eclissi solari in tutto il mondo nella tua vita. Molti saranno in Sud America. Si eclisserà solo sull'acqua. "
I dati si espandono ulteriormente nelle spiegazioni su come funziona un'eclissi e sui percorsi per l'evento 2017.
8. Mappa del vento
Dove soffia il vento?
Questa mappa mostra le velocità e le medie del vento per gli Stati Uniti in tempo reale. I dati meteorologici vengono trasferiti in una semplice mappa in bianco e nero, che mostra modelli di vento in movimento in tutta la nazione. (Devo ammetterlo, solo guardare l'animazione è abbastanza avvincente ... e rilassante.)
9. Come ogni membro è arrivato al Congresso
La mappatura dei dati è un'esperienza esaustiva e altamente istruttiva. Questa mappa di dati interattiva mostra il percorso di ogni membro del Congresso e membro del Congresso negli Stati Uniti
Puoi tenere traccia di istruzione, lavoro e altre esperienze politiche. (È sorprendente vedere quanti percorsi simili ci siano.) Immergiti più in profondità nei dati cercando e percorsi individuali dei politici.
10. Violazioni e attacchi ai dati più grandi al mondo
Se stai cercando dati di grande impatto, Information is Beautiful è un buon punto di partenza. Questo diagramma circolare traccia violazioni dei dati di almeno 30.000 record dal 2008 ad oggi.
Le dimensioni del cerchio rappresentano l'entità della violazione ed è facile vedere dove le tue informazioni potrebbero essere state catturate in un hack di dati. Passa il mouse su qualsiasi cerchio per ulteriori informazioni sulla violazione. Il design in stile timeline mostra anche qualcos'altro: l'incremento assoluto delle violazioni ogni anno.
11. Perché il tuo smartphone ti sta causando la sindrome del "collo di testo"
Alcune delle migliori visualizzazioni di dati intrecciano fatti e una storia per fornire un quadro più completo delle informazioni. Questo è il caso di questa guida al "collo del testo".
Piccoli diagrammi di dati - usando fatti e numeri - si mescolano con dati animati che mostrano cambiamenti di postura per mostrare (non dire) esattamente cosa sta succedendo in questo fenomeno che è iniziato con un numero di casi di "collo di testo". È un ottimo modo per spiegare visivamente qualcosa che altrimenti potrebbe non avere molto senso.
12. Guida illustrata di 2.339 morti in "Il Trono di Spade"
Usa le illustrazioni per realizzare anche una visualizzazione accattivante dei dati. Il Washington Post ha documentato ogni morte nel famoso spettacolo "Game of Thrones", con una guida illustrata.
Le illustrazioni e la codifica delle icone mostrano i decessi a colpo d'occhio con azioni di clic che vanno ancora più in dettaglio. Inoltre, tutto è organizzato per stagione (e posizione e tipo di personaggio se sei interessato). Per dimostrare che questo è molto più che divertente, esiste una metodologia completa su come funziona e su ciò che "conta" come una morte.
Conclusione
L'uso delle visualizzazioni dei dati è praticamente ovunque. Viviamo in un'era basata sui dati, in cui le persone sono attratte dall'informazione e dalla conoscenza.
Essere in grado di far bollire grandi quantità di dati in un design utilizzabile è un'abilità preziosa che può aiutarti in numerosi progetti. E se non ti è stato ancora chiesto di farlo, è probabile che lo sarai presto.
