Share
Qualche settimana fa ho raccolto un'infografica per evidenziare alcuni fatti e cifre riguardanti il Remote Staff di Envato. Diamo un'occhiata ad alcuni dei processi decisionali, del flusso di lavoro e delle tecniche che sono state utilizzate per realizzarlo.
Recentemente ho alzato dei bastoncini e mi sono trasferito da Valencia in Spagna, a Bordeaux in Francia - il lusso della libertà che il lavoro a distanza offre. Essere da qualche altra parte mi ha fatto pensare a chi fosse il mio collega Envato più vicino, cosa che mi ha fatto pensare allo staff remoto in generale, che mi ha fatto pensare: chi è il personale remoto più remoto di Envato?
Controlla l'infografica finale su Envato Notes!
Non avrei bisogno di sottolineare le origini della parola Infografica. Ma lo farò. È una fusione di informazione e grafico, letteralmente informazioni rappresentate graficamente. Potresti anche sentire il termine visualizzazione dati, che descrive di nuovo ciò che stiamo guardando qui.
L'infografica mira a raccogliere dati, statistiche, fatti, frammenti di conoscenza e comunicarli visivamente. In tal modo, se eseguita correttamente, l'infografica presenta un'idea chiara ed efficace, che altrimenti non sarebbe raggiunta dai dati nel suo stato grezzo (ovvero: un mucchio di numeri).
Bima Arafah, nel suo articolo Huge Infographics Design Resources: Panoramica, Principi, Suggerimenti ed esempi, identifica tre fasi della struttura infografica, tre elementi necessari per raggiungere la gloria dell'infografica:
Queste tre fasi si suddividono in ulteriori sottosezioni, ma affrontandole a turno formuleremo il nostro capolavoro in modo logico.
Diamo un'occhiata alla progettazione di una infografica, utilizzando come riferimento la grafica del Resto Envato Remote.
Prima di tutto, un'infografica deve avere una ragione per essere. Ci deve essere una domanda a cui stai cercando di rispondere, un fatto poco noto che stai cercando di evidenziare, un argomento persuasivo che stai cercando di trasmettere. Nel mio caso, volevo semplicemente identificare il più remota Envato membro dello staff. Puntare il dito su questo individuo sarebbe il ruolo essenziale della mia infografica.
Senza dati, non possiamo rispondere alla nostra domanda, non abbiamo alcun messaggio da comunicare, quindi andate a prenderne alcuni. Nella raccolta dei dati dello staff remoto avevo bisogno di un po 'di collaborazione dai miei compagni di squadra di Envato. Fortunatamente, sono un gruppo utile, quindi l'invio di una o due e-mail batch impersonali era tutto ciò di cui avevo bisogno per far girare la palla. Adam e Amanda entrarono entrambi immediatamente, creando una mappa di Google in cui la gente poteva aggiungere le loro posizioni e dettagli. Dovevo solo sedermi e guardare il mio schema spiegarsi.
In realtà è stato molto interessante vedere esattamente dove vive ogni membro dello staff in relazione al resto. Di conseguenza, tutti erano desiderosi di immergersi e contribuire.
Una volta che ho avuto un carico di informazioni (ci sono ancora un gran numero di revisori e staff di supporto che hanno perso il promemoria, ma non potevo andare a rincorrere tutti individualmente), ho utilizzato il pratico strumento vettoriale di Google Maps per tracciare linee tra i marcatori, in relazione tra loro e anche HQ a Melbourne.
Bene, questo è Vectortuts+.
Ho quindi preparato un foglio di calcolo con tutte le cifre che avevo raccolto (vale 33 membri). Farlo era la prova che avevo bisogno di una infografica!
Non è esattamente facile mettere a punto cosa stava succedendo, ma almeno ho potuto ordinare le colonne e verificare rapidamente le classifiche. Sono stato piuttosto sorpreso di trovarlo io era più lontano da Melbourne di chiunque altro! Visto su uno schermo piatto non sembra essere il caso, ma i vettori di Google prendono astutamente in considerazione la curvatura della terra. Non solo una cappelliera, amico mio.
OK, quindi abbiamo affrontato il primo nelle nostre tre fasi. Avendo arrotondato i miei dati e le mie cifre, era chiaro che il tipi di informazioni erano spaziali e quantitivi. Potrei quindi prendere una decisione informata e determinare la seconda fase, la mia dispositivo infografica. Guarderei la visualizzazione di mappe e grafici per comunicare i miei dati, quindi ora cerchiamo di restringere le opzioni del dispositivo.
Raccogliere tutte le informazioni possibili prima ancora di considerare la grafica ti aiuterà immensamente. Il tuo obiettivo è comunicare nel modo più efficace possibile l'impatto dei tuoi dati. Se non sai ancora quanto saranno grandi i tuoi numeri, non puoi giudicare correttamente le conseguenze di ciò che stai visualizzando.
Il modo in cui progetta i tuoi grafici è una discussione aperta, ma ci sono delle linee guida sul tipo di grafico che usi per visualizzare al meglio i tuoi dati. Ci sono 4 tipi principali di grafici riconoscibili:
Proprio come pensavo! I tassi tendono ad allungarsi man mano che diventano più pesanti.
Dove ero io? ? Ah sì. Se guardiamo alle nostre distanze da Melbourne, il modo più chiaro per visualizzare le informazioni è su base individuale. Per quanto riguarda l'inseguimento, possiamo supporre che un grafico a barre sia il modo migliore per andare. Chi vive più lontano avrà la barra più lunga, chi più vicino avrà il più breve.
Usare un grafico a barre non sembra molto stimolante, vero? I grafici a barre mi fanno pensare di stare a lato di una strada mentre eseguo un censimento del traffico per la scuola. La bellezza di progettare un'infografica è la libertà di giocare con l'equilibrio tra forma e funzione. Non possiamo permettere che il nostro lavoro di progettazione interferisca con il messaggio, ma possiamo certamente impiegarci un po 'di sfarzo.
L'immagine sopra mostra un grafico a barre. Rappresenta perfettamente l'informazione; ogni individuo e la loro distanza da qualunque cosa stiamo misurando. Non è estremamente attraente e, più problematicamente, sarebbe enorme se dovessimo tramare 33 persone. Sarebbe in effetti poco pratico, in quanto confrontando la persona all'estrema destra con la persona all'estrema sinistra diventerebbe sempre più difficile più persone abbiamo aggiunto. Semplifichiamo le cose.
Conducendo tutto il lotto in una barra (sebbene sia ancora un grafico a barre) abbiamo raggiunto diverse cose.
Facciamo uso della larghezza della pagina e semplificiamo ulteriormente le cose.
La nostra barra finale rende l'intero effetto il più semplice possibile, concentrando gli occhi dello spettatore su ciò che è importante: i dati. Non è necessario identificare ogni individuo, ma è possibile distinguere chiaramente la distanza maggiore, la distanza più breve e la distanza e la distribuzione delle distanze tra. Missione compiuta!
Puntiamo a comunicare il nostro messaggio in un batter d'occhio. Non è probabile che i nostri lettori esaminino i dati, quindi dobbiamo assicurarci di non presentare le cose in modo sproporzionato. Non vorremmo essere fuorvianti ora, vero?? ?
Mi sono imbattuto nella seguente situazione nella mia infografica; due grafici, entrambi che rappresentano tutti i membri del personale e le distanze di qualche tipo.
Non molto chiaro, quindi ovviamente non lo lascerei lì. Il grafico in alto rappresenta la distanza che ogni membro dello staff è di Melbourne, in linea d'aria. Il grafico in basso illustra la distanza che ogni membro del personale proviene dal suo altro membro personale più vicino.
Ciò che è chiaro in ogni grafico è quale dei marker ha la massima distanza. Anche la distribuzione approssimativa è decifrabile, ma il effettivo le distanze non sono chiare. Dobbiamo etichettarli.
Meglio. Tuttavia, stiamo ancora cadendo in una trappola. Abbiamo usato barre di larghezza uniforme perché, beh, siamo designer, e abbiamo sentito che hanno adattato meglio la nostra estetica in questo modo. Anche se abbiamo etichettato le distanze su di loro, potrebbero comunque essere confuse come esattamente della stessa lunghezza, visivamente e simbolicamente. Dobbiamo accertarci che il lettore comprenda la differenza di scala cruciale, altrimenti stiamo travisando i dati.
Aggiungiamo un indizio in più.
Meglio ancora. Con le nostre linee tratteggiate abbiamo suggerito che ci sono più unità di misura nella tabella più in alto. Non esiste un modo giusto o sbagliato per superare questi dettagli, ma ricorda sempre come stai presentando ogni pezzo di dati parente per il resto.
È giunto il momento di decidere come sarà questa infografica. Due fattori principali hanno giocato un ruolo nelle mie decisioni di styling: era destinato ad essere pubblicato su Notes, il blog della community Envato, e si concentra sulle mappe.
Il blog di Notes ha un'intestazione scura e strutturata. Decisione presa cura di! Uno sfondo scuro e sottilmente rumoroso sarebbe perfetto per la visualizzazione dei dati.
Il formato della mia grafica sarebbe anche dettato dal blog di Notes; i post presentano immagini non più larghe di 660px, quindi, se volessi che il grafico fosse visualizzato a fondo scala, sarebbe il mio limite. Le infografiche lunghe e strette non sono rare e guidano l'occhio in modo logico attraverso i dati in ogni caso. Stiamo quasi mirando a raccontare una storia - proprio come con un fumetto vogliamo il controllo su ciò che viene visto e in quale ordine. Una grafica allungata mi permetterebbe di porre un "qualcosa" conclusivo proprio in fondo, avvolgendo bene la storia.
L'intero motivo per cui mi sono imbarcato in questa infografica è stato scoprire quale membro del personale ha vissuto più lontanamente rispetto agli altri. Questa sarebbe la mia conclusione e tutti gli altri dati porteranno l'occhio a quella informazione.
Alla decisione tre. Le mappe hanno una massa di elementi visivi tutti propri; leggende, scale, contorni, per citarne alcuni. Stavo lavorando con Google Maps per compilare i dati, quindi i marcatori di mappe hanno avuto un ruolo importante. (In realtà volevo fornire un paragrafo informativo sulle origini dell'indicatore della mappa di Google, ma non riesco a trovare alcuna informazione su di esso! Se qualcuno ha delle risorse decenti che spiegano il processo di progettazione iniziale, per favore lasciate i link nei commenti! )
Gli indicatori di mappa di Google sono un esempio di brillantezza del design. Sono semplici, immediatamente riconoscibili, versatili (con colori e contenuti variabili) e svolgono perfettamente una funzione cruciale; puntano la punta su una posizione precisa offrendo al contempo un'ampia area di clic per gli utenti.
Google Map Marker di [Mooi], su Flickr.
Ho deciso che sarebbero perfetti per scopi decorativi e (ovviamente) per identificare ogni membro del personale. Sarebbero la perfetta 'metafora dei dati'; un modo di illustrare la mia materia. Ho disegnato una piccola raccolta (che troverai nel download sorgente).
Il risultato è stato uno sfondo scuro e rumoroso con una gamma di tonalità colorata grazie ai marcatori. Un punto di partenza ideale per le immagini.
Ho una serie di statistiche da condividere; dettagli personali dei membri del personale, distanza di ogni persona (in linea d'aria) a H.Q. a Melbourne, il numero relativo di membri dello staff maschile e femminile, fusi orari e, infine, chi è il membro più remoto del personale.
Ogni sezione aveva bisogno di una segregazione definita dagli altri, pur rimanendo chiaramente collegata. Userei elementi comuni all'interno di ognuno (titolo, breve descrizione, grafica, statistiche aggiuntive) ma colorerei ognuno in modo diverso. I colori dei miei indicatori di mappa erano perfetti per separare ogni sezione, quindi mi affiderei a loro per la tavolozza.
Avevo bisogno di una mappa su cui collocare i miei indicatori. Un po 'di googling mi ha portato a http://english.freemap.jp dove sono riuscito a scaricare una mappa vettoriale perfetta del mondo.
Chiaramente, non avevo bisogno dell'intera mappa in tutti i suoi dettagli gloriosi, ma era presentata perfettamente in strati che potevo rimuovere. Armato con i profili di massa di terra pura, incollato nel mio documento con una trasparenza del 10%, avevo finito.
Infine, avevo bisogno di considerare gli extra visivi; dettagli che potrei portare in tutta la grafica per aggiungere decorazioni e che legherebbero tutto insieme. Linee tratteggiate e frecce! I vecchi compagni affidabili del progettista di infografica.
Una linea tratteggiata qui?
? un altro qui?
? uno lì?
(Mentre guardiamo l'orologio, vale la pena ricordare che l'immagine circolare ha ben spezzato la natura orizzontale e verticale dell'intero grafico.)
? e un ultimo qui!
Non solo le linee collegano visivamente tutte le sezioni, ma dirigono l'occhio del lettore e danno l'impressione di energia. Se la tua infografica non sembra abbastanza infograficamente, incolla alcune linee tratteggiate.
OK, siamo arrivati alla fine della linea. È giunto il momento di assicurarti di aver fatto riferimento alle tue fonti (dopo tutto il tempo che hai dedicato a far sembrare le cose belle, le persone hanno bisogno di essere rassicurate sul fatto che non hai semplicemente tirato fuori i dati dal nulla). E hai finito!
Spero che l'esame di questo flusso di lavoro ti abbia ispirato ad affrontare la tua infografica, è molto divertente con i dati giusti!
Prima di concludere, ecco un paio di punti tecnici che sono comparsi durante la realizzazione dell'infografica Envato Remote Staff. Potresti trovarli utili.
In un paio di occasioni mi sono ritrovato a guardare una sfocatura di indicatori di mappa - non potevo facilmente dire quanti ne avevo messi sui miei grafici. Prova a contare i marcatori qui sotto:
Vedi il mio punto? Per assicurarti di avere la giusta quantità di oggetti in questo tipo di situazione, lascia che Illustrator faccia il lavoro per te. Seleziona tutti gli oggetti che vuoi contare, quindi vai su Finestra> Informazioni sul documento, seleziona "Solo selezione" e "Oggetti".
Bingo! Dalla finestra Informazioni documento puoi vedere che ho selezionato 33 istanze di simboli. Proprio quello che volevo.
L'aggiunta di un po 'di rumore allo sfondo ha ammorbidito le cose e ha portato la grafica piacevolmente in linea con il blog di Envato Notes. Realisticamente, ci sono due approcci per farlo.
Creare texture di disturbo in Illustrator non è affatto difficile, ma se il problema è Google, molte persone sembrano non sapere come è fatto. Si tratta semplicemente di applicare una texture a grana all'aspetto del tuo oggetto di sfondo. Giocheremo leggermente all'idea e applicheremo la texture a un oggetto trasparente sopra il nostro colore di sfondo.
Iniziamo con il nostro oggetto di sfondo a colori piatto:
Quindi posizioniamo un rettangolo bianco sopra di esso. A quel rettangolo applichiamo un filtro andando su Effetto> Texture> Grano?
Le opzioni che ho usato erano 10% di intensità, 50% di contrasto e "puntinato" come tipo di grana. Gioca qui - ci sono un sacco di effetti che puoi ottenere. Questo è il risultato:
Dare all'oggetto una trasparenza Moltiplica del 20% e dovrebbe creare più o meno ciò che stai cercando. È possibile attenuare ulteriormente l'effetto aggiungendo una sfocatura gaussiana all'oggetto. Questo è ciò che ha creato Illustrator: gli effetti combinati sono visibili nel pannello Aspetto:
È sottile, sono d'accordo.
Quindi, lavoro fatto.
Purtroppo, c'è un problema nell'affrontare la sfida del rumore in questo modo: dimensioni del file e CPU. Dando all'oggetto di sfondo un po 'di rumore, ho aumentato questa dimensione del file da 5 Mb a 45 Mb e le prestazioni ne hanno risentito.
L'alternativa è creare una bitmap in Photoshop. Quindi, vai via, riempi lo sfondo di un nuovo documento con un colore adatto e aggiungi un po 'di rumore selezionando Filtro> Disturbo> Aggiungi disturbo. Salva con risoluzione dello schermo e lancia il file in Illustrator. Facile.
Un po 'di rumore aggiunge una sensazione calda e tenera alla maggior parte delle zone piatte.
Quindi ecco qua - due approcci per aggiungere rumore. Dipende esclusivamente da te in che modo lo affronterai.
La probabilità è che la tua infografica utilizzi elementi visivi ripetuti, ma non copiare e incollare oggetti ovunque, utilizzare simboli.
Nel mio caso ho marcatori di mappe sparsi sulla tavola da disegno. Stiamo esaminando centinaia di marker, ma sono ripetuti casi di soli 6 simboli. Facciamo rapidamente i simboli, poi discuteremo i vantaggi di questo approccio.
Inizia con il tuo oggetto complesso.
Trascinalo nel pannello Simboli (Windows> Simboli), assegna un nome e premi OK.
Sei l'orgoglioso proprietario di un simbolo! Ora che ne hai la possibilità, fai quanti ne vuoi; Avevo bisogno di una gamma di colori, quindi ho preparato sette marcatori.
Una volta che hai creato una raccolta di simboli, potresti trovare utile salvarli come libreria per uso futuro. Con il pannello Simbolo che mostra la tua collezione, fai clic sul "Menu Biblioteche di simboli" e seleziona "Salva simboli?". Ti verrà richiesto di salvare la libreria come file .ai sul tuo sistema (usa un nome di file adatto in modo da riconoscerlo).
Una volta completato, il caricamento della libreria in qualsiasi documento futuro è semplice come aprire il pannello Simboli, fare clic sul "Menu Librerie simboli", scorrere verso il basso fino a "Definito dall'utente" e selezionare la libreria.
Per far sì che una libreria si apra automaticamente all'avvio di Illustrator, seleziona "Persistente" dal menu del pannello di quella libreria.
Per utilizzare i simboli nel documento, trascinali direttamente dal pannello Simboli o selezionane uno e fai clic su "Inserisci istanza di simbolo". Puoi piazzarne quanti ne vuoi?
Ci sono tre distinti vantaggi nell'usare i simboli, diamo un'occhiata a loro.
Forse hai piazzato tutti i tuoi segnalini, ma poi hai realizzato che hai bisogno di cambiare il loro aspetto. Non vuoi sostituirli manualmente, ed è qui che entra in gioco il primo vantaggio dell'uso dei simboli. Fai doppio clic su un simbolo (sulla tua tavola da disegno o nel pannello Simboli) e entrerai in Modalità isolamento. Con quel simbolo isolato, puoi modificare via.
Modalità di isolamento
Qualsiasi modifica apportata influirà ogni istanza di quel simbolo nel tuo documento.
Google dovrebbe assolutamente farlo.
Questo è particolarmente utile nel nostro caso, perché abbiamo posizionato dei marcatori in luoghi specifici; non vogliamo che si muovano inutilmente. Abbiamo una pila di segnalini verdi, ma vogliamo che un paio di essi siano rossi invece. Seleziona i marcatori in questione e assicurati che la barra di controllo (Finestra> Controllo) sia visibile. Vedrai un piccolo pannello a discesa chiamato "Sostituisci": in esso troverai tutti i simboli attualmente nel pannello Simboli. Fai clic sull'indicatore rosso e le istanze dei simboli selezionati verranno invertite.
Forse è ovvio, ma se ridurre al minimo le dimensioni del file è importante per te, i simboli ti danno le spalle. Nell'esempio seguente ho salvato due file, ciascuno con 700 marcatori su una tavola da disegno. Uno è stato realizzato con istanze di simboli, l'altro con oggetti complessi - la differenza è abbastanza chiara?
L'infografica finale (mostrata sotto) originariamente pubblicata su Envato Notes!
Questo è tutto! Grazie per la lettura e per favore condividi ulteriori suggerimenti e consigli nei commenti!
Accentsconagua