The Do’s And Don’ts Of Infographic Design

Nota dell’editore: Potresti voler leggere l’articolo di Nathan Yau The Do’s And Don’ts Of Infographic Design: Revisited qui su Smashing Magazine che è una risposta a questo articolo.

Dagli albori di Internet, la domanda di buon design ha continuato a salire alle stelle. Dal Web 1.0 al Web 2.0 e oltre, i designer sono rimasti sulle punte mentre definivano le tendenze e le aspettative del nostro universo online. Internet è un grande parco giochi per i designer, e le aziende online stanno apprezzando sempre di più ciò che si può ottenere da un po’ di caramelle per gli occhi ben fatte. Negli ultimi due anni, questo fatto è diventato la spina dorsale di una tendenza crescente nel marketing online: l’infografica.

Le infografiche sono rappresentazioni visive di informazioni, o “data viz” come li chiamano i ragazzi cool di questi tempi. Il termine “data viz” deriva da “data visualization”, che implica che le serie di dati saranno visualizzate in un modo unico che può essere visto, piuttosto che letto. Questa visualizzazione non dovrebbe essere lasciata all’interpretazione, dovrebbe invece essere progettata in modo da fornire una conclusione universale per tutti gli spettatori. Nei termini più semplici, le infografiche non sono troppo diverse dalle tabelle e dai grafici che programmi come Excel hanno sputato fuori per anni.

Altre letture su SmashingMag:

• Engaging Instances Of Interactive Infographic Design
• Data Visualization and Infographics Resources
• Immagina un grafico a torta che calpesta un’infografica per sempre
• Divertiti con la fisica nella visualizzazione dei dati

Naturalmente, proprio come il Web 2.0 ha cambiato l’1.0, le infografiche di oggi sono molto più accattivanti dei semplici grafici a torta e a barre. Oggi, le infografiche compilano molte diverse visualizzazioni di dati in un pezzo coesivo di “caramelle per gli occhi”. Si sono evoluti con le tendenze del design, hanno ricevuto alcuni lifting creativi, e Internet ora si sta riempiendo di informazioni interessanti fornite in modi coinvolgenti.

Mentre alcune tendenze del design vanno e vengono, le infografiche sono qui per rimanere. Con marchi come USA Today, The New York Times e Google e persino il presidente Obama che li sostiene, le infografiche stanno diventando uno strumento potente per diffondere enormi quantità di informazioni alle masse. Aziende grandi e piccole stanno usando le infografiche per costruire i loro marchi, educare il loro pubblico e ottimizzare il loro posizionamento nei motori di ricerca attraverso il link-building. Questo è il motivo per cui imparare a progettare una buona infografica è un must, ed evitare le insidie comuni del design infografico potrebbe significare la differenza tra l’atterraggio di un grande cliente e la sua perdita totale.

Wrapping Your Mind Around Data Viz And Infographic Design

Progettare un’infografica non è lo stesso che progettare un sito web, un volantino, una brochure, ecc. Anche alcuni dei migliori designer, con portafogli che ti farebbero sbavare, non possono eseguire un design infografico efficace. Creare infografiche è una sfida e richiede una mentalità che non viene naturale a tutti. Ma questa mentalità può essere acquisita attraverso la pratica e attenendosi a certi standard, il più importante dei quali è quello di rispettare e comprendere il data viz.

Show, Don’t Tell

Una regola del cinema è quella di mostrare, non raccontare. Lo stesso vale per il design infografico. Il fondamento di ogni buona infografica è la visualizzazione dei dati. Come designer di infografiche, puoi determinare o meno il concetto e compilare tutte le ricerche per il design finale, ma in entrambi i casi sei responsabile di trasformare le informazioni in un design visivamente stimolante e coesivo che racconta una storia e che non perde una singola opportunità di visualizzare i dati. Prendete questa parte di un’infografica su Twitter di ViralMS come esempio:

Cosa c’è di sbagliato in questa infografica? Infrange la prima regola fin dall’inizio. Quando hai l’opportunità di mostrare informazioni visivamente, coglila. Qui, i tweet al secondo avrebbero potuto almeno essere mostrati in un grafico a barre. Questo avrebbe permesso a qualcuno di guardare rapidamente questa sezione e vedere cosa sta succedendo; vedendo le varie altezze delle barre, l’occhio avrebbe potuto valutare rapidamente le differenze di tweet al secondo per evento senza dover leggere nulla.

Se hai problemi a rispettare questa regola, prova a mantenere tutto il tuo testo su un livello del tuo file AI (escludendo il testo all’interno di grafici e tabelle). Ogni tanto, spegni il livello del testo e vedi se l’infografica ha ancora senso. Se non c’è alcun viz di dati, o se un mucchio di immagini mancano di contesto, allora stai facendo troppo per raccontare e non abbastanza per mostrare.

Se il cliente volesse un grafico Excel, non avrebbe bisogno di te

Può sembrare severo, ma è vero. Se le infografiche fossero semplici come un mucchio di tabelle e grafici standard su una pagina, allora i clienti non avrebbero bisogno di cercare grandi designer. Ci sono molti strumenti online che possono creare grafici a torta colorati, grafici a linee e a barre, quindi devi portare le cose al livello successivo perché il tuo design si distingua. Prendendo i dati di cui sopra, quale dei due grafici qui sotto pensi che renderebbe un cliente più felice?

Se hai risposto grafico B, hai capito bene. Naturalmente, non tutti i dati si prestano a grafici creativi e unici. Il grafico A potrebbe funzionare molto bene se il resto dell’infografica condividesse un’estetica simile. A volte devi solo mordere il proiettile e produrre un tradizionale grafico a barre o a torta; tuttavia, considera sempre modi per abbellirlo, come negli esempi qui sotto:

La tipografia non dovrebbe essere una stampella

La tipografia può fare o rompere un design, ma non dovrebbe essere la soluzione ad un problema di data viz. Più spesso che no, i designer iniziano un’infografica con una grande quantità di energia ed eccitazione, ma perdono rapidamente vapore mentre proseguono lungo la pagina. Questo spesso porta a decisioni rapide e soluzioni scadenti, come usare la tipografia per mostrare un grande numero invece di visualizzarlo in qualche modo. Ecco un esempio:

Ogni volta che vedo questo, mi viene in mente la campagna pubblicitaria “Where’s the beef?”, e penso, “Where’s the data viz?” Anche se Sketch Rockwell è uno dei miei font preferiti di sempre, questo è un esempio perfetto di fare troppo affidamento sulla tipografia.

Ogni volta che vi viene fornito un numero di ricerca per un’infografica, chiedetevi come può essere visualizzato. Le percentuali possono sempre essere visualizzate con grafici a torta creativi; i valori numerici in un insieme possono di solito essere trasformati in un unico grafico a barre; e quando i numeri non si adattano a una scala coerente, si potrebbe essere in grado di visualizzarli in un diagramma. Ecco un altro modo in cui i dati di cui sopra avrebbero potuto essere visualizzati:

La tipografia ha il suo posto

Tutto ciò detto, la tipografia ha i suoi usi, che non dovrebbero essere ignorati quando si crea un’infografica. La maggior parte delle volte, vorrete concentrare le vostre energie creative tipografiche su titoli e intestazioni. Il titolo dell’infografica è un’opportunità perfetta per utilizzare un font divertente e accattivante e per dargli un trattamento che si adatti al tema o all’argomento. Assicurati solo che il titolo non sia così distraente da distogliere l’attenzione dal motivo per cui stiamo guardando l’infografica in primo luogo. La verità è che alcuni argomenti delle infografiche sono noiosi, ma il giusto design del titolo può coinvolgere le persone abbastanza da farle scorrere.

Similmente, i titoli aiutano a spezzare un’infografica e a rendere i dati più facili da prendere, dandoti un’altra possibilità di far sventolare la tua bandiera di font-nerd.

Organizzazione E Storyline

Organizzare un’infografica in un modo che abbia senso e che mantenga l’interesse dello spettatore non è sempre facile, ma fa parte del lavoro della maggior parte dei designer di infografiche. Di solito, ti vengono dati un sacco di dati e hai bisogno di creare una storia visiva da essi. Questo può essere impegnativo all’inizio, ma è possibile seguire alcune regole generali per rendere le cose più facili.

Wireframe the Infographic

Wireframing una infografica ti permette di elaborare uno storyboard e un layout per il design. Potresti avere un’idea della storia che vuoi raccontare, ma quando inizi a stendere le cose, potresti sbattere contro un muro e dover ricominciare da capo. Dover riorganizzare dopo aver già fatto gran parte del design è incredibilmente frustrante. Evita questo impostando la tua trama all’inizio per determinare quali dati mostrare e come. Mettete da parte un’ora per abbozzare le cose e assicuratevi che tutto abbia senso. Questo aiuterà anche a garantire che la tavolozza di colori che sceglierai porti l’attenzione ai punti importanti e mantenga l’occhio che scorre lungo la pagina.

Pensa fuori dagli schemi

Come fai il wireframe dell’infografica, identificherai le interruzioni di sezione che aiutano a raccontare la storia. La maggior parte delle infografiche online hanno un flusso verticale, in cui ogni sezione ha un titolo per distinguerla dalla precedente. Questo diventa noioso velocemente. Organizzare i dati e sezionare le informazioni senza affidarsi interamente alle intestazioni e alle interruzioni di colore è un buon modo per rompere la monotonia.

Per esempio, piuttosto che andare per un tipico layout a una colonna, si potrebbero usare due colonne in alcune parti. Potreste anche spezzare le sezioni con bordi, con sfondi di forme diverse o dare all’intero design un tema di strade o sentieri. Ecco alcuni layout fuori dagli schemi per far scorrere i vostri succhi creativi:

Racconta una storia

Tutte le buone storie hanno un inizio, una parte centrale e una fine. Le infografiche meritano lo stesso trattamento. All’inizio dell’infografica, introduci il problema o la tesi. Da lì, sostenetelo con i dati. Infine, terminare l’infografica con una conclusione.

Visualizzare il gancio

Ogni buona infografica ha un gancio o un take-away primario che fa dire allo spettatore “A-ha!” Come designer, si dovrebbe fare questo gancio il punto focale del design, se possibile. Posizionare il gancio al centro o alla fine dell’infografica è di solito la cosa migliore, in modo da catturare più attenzione. Date alle informazioni più importanti il maggior peso visivo, in modo che gli spettatori sappiano cosa portare via. Ecco alcuni esempi di ganci ben visualizzati:

Pulire le cose con il colore

La differenza che una tavolozza di colori può fare è incredibile, specialmente nel mondo delle infografiche. La tavolozza giusta può aiutare a organizzare un’infografica, evangelizzare il marchio, rafforzare l’argomento e altro ancora. La tavolozza sbagliata può trasformare un grande argomento in un pugno di mosche, danneggiare l’immagine del marchio e trasmettere il messaggio sbagliato. Ecco alcuni suggerimenti da considerare quando si scelgono i colori per la vostra infografica.

Make It Universal

Nel web design, è sempre importante scegliere una tavolozza che si adatti al tema del sito web e che sia abbastanza neutra per un gruppo diverso di visitatori. Poiché le infografiche sono principalmente condivise online, scegliere la tavolozza giusta per una serie di visitatori è altrettanto importante. Per esempio, i colori scuri dominanti e i neon di solito non si traducono bene sulle infografiche; il neon sul nero può essere difficile da leggere, e se ci sono molti dati, prenderli tutti sarà una sfida. Inoltre, evita il bianco come sfondo quando possibile. Le infografiche sono spesso condivise su più siti web e blog, la maggior parte dei quali ha uno sfondo bianco. Se lo sfondo della tua infografica è anche bianco, allora decifrare dove inizia e finisce sarà difficile.

Una tavolozza di tre colori è facile per gli occhi

Con tutti i dati che vanno in un’infografica, assicurati che l’occhio del lettore scorra facilmente lungo la pagina; la tavolozza di colori sbagliata può essere una grande barriera a questo. Scegli una tavolozza che non aggredisca i sensi. E considera di farlo prima di iniziare a progettare, perché ti aiuterà a determinare come visualizzare i vari elementi.

Se scegliere una tavolozza di colori è difficile per te, attieniti alla regola del tre. Scegliete tre colori primari. Dei tre, uno dovrebbe essere il colore di sfondo (di solito il più chiaro dei tre), e gli altri due dovrebbero spezzare le sezioni. Se avete bisogno di aggiungere altri colori, usate le sfumature dei tre colori principali. Questo manterrà la tavolozza coesa e calmante, piuttosto che stridente.

Usa gli strumenti a tua disposizione

Quando scegli i colori, non devi reinventare la ruota. Un certo numero di ottimi siti web là fuori ti aiuterà a scegliere la giusta tavolozza per la tua infografica. Kuler di Adobe offre temi freschi e un database ricercabile, così come un facile strumento per regolare la tavolozza che ti interessa. Un problema con Kuler è che tutte le tavolozze hanno cinque colori, e i colori sono a volte da famiglie completamente diverse, piuttosto che sfumature di alcuni colori primari, quindi trovare la tavolozza giusta può essere come cercare un ago in un pagliaio.

Un altro strumento per scegliere i colori è COLOURlovers. Questo database è più facile da cercare: rompe le palette in diversi temi e può essere ordinato per preferiti. Mentre la maggior parte delle palette consiste anche di cinque colori, i colori non hanno sempre lo stesso peso; invece, lo strumento suggerisce quale dovrebbe essere dominante. Ecco alcune tavolozze buone e cattive per le infografiche:

Pensieri finali

Mentre questi standard sono importanti da considerare per la maggior parte dei design infografici, a volte arriva un’infografica che rompe tutte queste regole e ha ancora un immenso successo. Alla fine, ai clienti piacciono le “caramelle per gli occhi” e i disegni che “scoppiano”! Mentre questi termini sono soggettivi (e fastidiosi per la maggior parte dei designer), tutti noi riconosciamo un grande design infografico quando ne vediamo uno, e anche i tuoi clienti lo fanno. Usa queste regole per guidarti nel regno delle infografiche, ma crea le tue tecniche e i tuoi standard dopo aver acquisito una certa esperienza.

(al)