infografica

3 MOTIVI PER REALIZZARE UN SITO WEB IN STILE INFOGRAFICA

Hai mai realizzato un progetto di grafica o web in cui hai utilizzato un’infografica? Ti hanno mai commissionato un progetto in stile infografica? L’infografica serve davvero? Come si realizza un’infografica?”.

Queste sono alcune delle domande più importanti sulle quali si concentra il dibattito sulla utilità o meno dell’infografica. Non voglio soffermarmi sugli innumerevoli strumenti o risorse vettoriali a disposizione per realizzarla; voglio invece parlare dei motivi che spiegano la sua importanza perché troppo spesso ho sentito dire che “l’infografica non serve a nulla”.

Come in tutte le cose, quando utilizziamo uno strumento eccezionale in modo eccessivo e senza un minimo di progettazione, il risultato è scarso ed in quel caso potrei dire che l’infografica non serve a nulla. Se invece, utilizziamo alcuni accorgimenti importanti, gli stessi che utilizziamo quando scriviamo un semplice articolo o post l’infografica diventa un valore aggiunto rispetto al post normale. L’infografica è la rappresentazione grafica di dati che semplifica informazioni complesse rendendole più chiare e più veloci da comprendere.

L’infografica è importante per 3 motivi principali:

  • perché viviamo in un’epoca di sovraccarico di informazioni e grazie alla sua particolare forma caratterizzata da intreccio di dati e di progettazione grafica, l’infografica favorisce un certo ordine nel quadro generale dell’informazione;
  • perché sappiamo che l’occhio umano tende a “scannerizzare” il testo più che a leggere e l’infografica e in tal senso è un elemento fondamentale per catturare l’attenzione del lettore in misura maggiore rispetto al solo testo;
  • perché oramai il testo non può più prescindere dall’immagine che non è più considerata come un elemento decorativo come avveniva tanti anni fa, ma è più importante delle parole e è un elemento essenziale per la comprensione del significato. Oggi molto spesso, siamo attirati da un articolo e lo leggiamo soltanto se le immagini suscitano il nostro interesse;

INFOGRAFICA NEL WEB DESIGN

Come viene utilizzata l’infografica nel web design?

  1. È utilizzata sia per mostrare fatti interessanti sul proprio business;
  2. Per mostrare ai tuoi clienti la conoscenza di un particolare settore dell’industria.
  3. Per rendere il proprio sito-web graficamente stimolante per il lettore. L’infografica può essere sia statica che interattiva.

INFOGRAFICA STATICA

L’ infografica statica è rappresentata da un set di immagini grafiche di solito in formato ai o psd che possiamo disegnare personalmente con un software di disegno come illustrator o photoshop oppure possiamo ricercare sul web che offre tantissime risorse da scaricare gratuitamente. La scelta del colore è importante per creare un’infografica accattivante ma consiglio di scegliere la palette colori appropriata alla fine del progetto e disegnare inizialmente in bianco e nero. Le sfumature sono altrettanto importanti, se utilizzate correttamente, per offrire un look più seducente a questi elementi illustrati. Uno degli elementi più utilizzati nell’infografica è il diagramma circolare ( pie chart ) che permette di presentare dati in percentuale in un modo maggiormente stimolante. Molto utilizzato è anche il grafico a barra ( bar chart ) e i pittogrammi, elementi illustrati che ci permettono di identificare ed il tema proposto nell’infografica.

INFOGRAFICA ANIMATA

L’infografica animata ci permette di aggiungere un po’ di interattività alla nostra infografica per esempio sfruttando le ultime specifiche dei CSS3 per ottenere un effetto più accattivante; L’infografica animata fa sì che i lettori si sentano parte integrante del processo narrativo grazie alle possibili azioni che può compiere. Di conseguenza sarà più recettivo ed in grado di assorbire maggiormente il messaggio dell’infografica stessa grazie al controllo che può esercitare su di essa. L’utente può interagire e partecipare attivamente con l’nfografica in 4 modi.

Con un’azione di scrolling: questo è il metodo più utilizzato per dare importanza ad un’infografica ed è usato in combinazione con alcune animazioni realizzate con i css3 in modo che scorrendo le varie sezioni della pagina alcuni contenuti vengono visualizzati in modo dinamico ed animato. Questo tipo di coinvolgimento dell’utente è perfettamente riuscito in questa infografica realizzata da Neoman in cui si parla di alcune ragione importanti che spingono a realizzare un’infografica.

Neoman Infographic

14 reason why your brain craves infographic

La seconda azione che l’utente può compiere è il click del mouse; l’utente viene stimolato a leggere l’infografica cliccando su più punti importanti e rivelando dati in modo da scatenare reazioni che immergono il lettore nella storia massimizzando il suo coinvolgimento. In questo esempio di Distance to Mars, il lettore deve cliccare il mouse per sapere quanto dista la terra dalla luna in pixel.

Infographic distance to mars

Distance to Mars

La terza azione è la traccia lasciata dal movimento del mouse (mouse tracking): in questo caso l’utente interagisce con l’infografica nel momento in cui muove il mouse; questo tipo di interazione è utilizzata soprattutto nel campo dei giochi ma può riscuotere un effetto incredibile se per esempio l’infografica è caratterizzata da personaggi su cui il lettore può avere un certo controllo. Ecco un esempio pubblicato da Wired con The Three of life in cui muovendo il mouse viene ingrandita la parte interessata come una lente di ingrandimento.

Infine la quarta azione è quella che permette all’utente di utilizzare le frecce di tastiera (kayboards) grazie alle quali abbiamo la possibilità di filtrare o rivelare alcuni dati dell’infografica.

The web evolution

L’evoluzione del web

Adesso non ti rimane che scaricare il set gratuito di risorse creato per te; lo puoi utilizzare per qualsiasi tuo progetto e modificare a tuo piacimento. Enjoy it!

Infografica 176 downloads

...

Tu cosa ne pensi dell’infografica? La ritieni inutile o la consideri importante nella progettazione dei sitiweb? Scrivilo pure nei commenti.

alederodesign

Posts

Web design + Grafica. Specializzata in Responsive web design, Html5&Css3 ed effetto parallasse. Posso rinunciare ad una borsa griffata ma non ad un imac nuovo.

No Comments

Be the first to start the conversation.

Lascia un Commento

*

Text formatting is available via select HTML. <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>