Una panoramica sulla storia dell'infografica, sulle sue regole di composizione e sugli strumenti per costruirla

1. Comunicare dati
con l’Infografica{

2. Di cosa parliamo oggi
• Cosa si intende per infografica
• Dati e design
• Raccontare una storia
• Quando fare infografica
• Il pubblico dell’infografica
• Font, colori, icone
• Alcuni tipi di infografica
• ‘Regole’ e buone pratiche
• Infografiche automatiche
• Infografiche personalizzate
• Link utili

3. Cosa si intende per infografica
Un’immagine vale più
di mille parole
(Kong Fu Zi, 500 A.C.)

4. Cosa non è l’infografica
• Non è un comunicato stampa
• Non è una slide
• Non è un grafico, una tabella, un diagramma
• Non è un “lancio di agenzia”
• Non è un’illustrazione
L’infografica non è una
presentazione in Powerpoint*, ma
una presentazione Powerpoint può
usare infografica.
* o in Keynote ;-
P

5. Un’equazione non bilanciata
Una buona infografica è un’equazione
non bilanciata: la quantità di
informazioni trasmesse è sproporzionata
rispetto al tempo necessario allo
spettatore per elaborarle.

6. Effetto sorpresa
L’infografica suscita curiosità, voglia di approfondire e veicola una metafora visiva con ironia
diventando perciò sorprendente e virale

7. Perché funziona?

8. Informazione, illustrazione, design
Le bi-sezioni:
• Non solo una vignetta
• Non solo arte
• Non solo disposizione di dati

9. Un po’ di storia / 1
Charles Minard “Map of napoleon’s Russian
campaign”1812
Florence Nightingale “Causes of
Mortality” 1858

10. Un po’ di storia / 2
Walter Houghton “Conspectus of the
History of Political Parties and the Federal
Government” 1880
Emma Willard “Picture of
Nations” 1836

11. 1936 - 2002
1936
Otto Neurath
1972
Pioneer Plaque
1972
Otl Aicher – Munich ‘72
1982
USA Today
2002
Royksopp Remind Me

12. I pittogrammi AIGA
• Pubblico dominio
• Helvetica delle immagini
• 50 pittogrammi

13. Le regole di Neurath
• 1 pochi simboli ISO
• 2 irrilevanza del testo
• 3 pochi colori
• 4 distribuzione dei segni
• 5 asse x (quantità) / y (tempo)

14. I dati e il design
Un’immagine vale più di mille
parole. Ma se la tua immagine
è accompagnata da 1000
parole, hai fallito.

15. Grafici e fogli di calcolo

16. Big Data!
• Big data / Open data
• Dati complessi, non strutturati
• Gli Zettabyte
• La pubblica amministrazione

17. Minimalismo e chartjunk
• Il concetto di Graphicacy

18. La critica a Powerpoint
• Tabelle e grafici inutili e semplicistici dovuti alla bassa risoluzione dello schermo
• Poco spazio per riflessione e presentazione di dati
• Spazio sprecato per loghi, immagini, firme etc
• Gerarchie molto forti nella presentazione delle informazioni
• Rapida successione di frammenti di informazione invece di un'analisi articolata
• I titoli delle singole pagine non corrispondono ai contenuti
• i modelli di struttura
Death
by Powerpoint

19. Raccontare una storia

20. Realizzare uno storyboard
• Inizio, svolgimento, conclusione
• Scansione “a vignette”

21. Tagliare, tagliare, tagliare

22. Punto di vista
Il vero valore aggiunto

23. Quando fare infografica
Una buona infografica parte
con un buon “perché?”.

24. Scadenza e autenticità dei dati
• Usare dati rilevanti
• Usare fonti autorevoli
• Fact-Checking
• Focalizzarsi sul messaggio
• Citare le fonti

25. MetaInfografica

26. Il pubblico dell’infografica

27. Giornalisti, uffici stampa, blogger

28. Going viral!
• Pinterest
• Twitter
• Facebook
• Blog
• Bottoni, badge e
embed

29. Il contesto di presentazione
Il sito o la pagina dove volete pubblicare la vostra infografica è tanto importante quanto l’infografica stessa.
Non va mostrata in contesti che non hanno nulla a che vedere con il messaggio.

30. Font colori icone

31. Gradevole vs. comprensibile?
● Colori complementari
● Font facili da leggere
● Corpo del carattere abbastanza
grande da essere letto senza
fatica

32. Colori, spazi, forme, misure

33. La scelta del font

34. Il quadro di lavoro

35. Comunicazione integrata

36. Alcuni tipi di infografica

37. Infografiche insospettabili
La tavola periodica, il Pioneer Plate, la
ruota dello zodiaco, il quadrato
semantico, la timeline, l’uomo
vitruviano...

38. Mappe concettuali e mentali

39. Tabelle, istogrammi, grafici

40. Mappe topografiche e cartogrammi

41. Diagrammi a blocchi

42. Ideogrammi

43. Sparklines

44. Regole e buone pratiche
Una buona infografica comunica
il massimo numero di dati nel
minimo spazio possibile.

45. Le 7 domande di base
• I dati sono corretti?
• L’infografica è ben disegnata?
• È ben scritta?
• È interessante, sorprendente o divertente (almeno una delle 3)?
• Non è confusionaria?
• Perché dovrebbe interessare?
• È stata creata da un soggetto legittimato?

46. Le regole d’oro
• Massima informazione possibile nel minimo spazio disponibile
• Rendere inutile la “spiegazione”
• Dati interessanti e coinvolgenti
• Grafica “creativa” (non solo diagrammi e grafici a barre)
• Un bel titolo virale (possibilmente ricco di parole chiave)

47. Il metodo SMART

48. Parole chiave
• brevità
• chiarezza
• immediatezza
• attrattiva
• significatività
• interesse (dei dati)
• verità (dei dati)
• creatività
• humour
• viralità
• credibilità della fonte

49. Infografiche automatiche

50. Infografica per non-designer
• Automazione per infografiche “standard”
• Programmi gratuiti (o freemium)
• Applicazioni basate su web
• Nessun bisogno di programmi di grafica

51. Piktochart
• 400 template
• HTML publisher
• Interattività

52. Visual.ly
• Showcase
• Marketplace
• Paghi e hai i migliori designer

53. Infogr.am
• 20 modelli
• Lavoro in team
• Import dei dati

54. Easel.ly
• Template predefiniti
• Poco customizzabile
• Velocissimo

55. Highcharts
• Pesca da fogli di calcolo
• Grafici interattivi
• Embed in pagine web

56. Wordle e Tagxedo
• Le tag cloud
• Parole “in forma”
• Potere del font e dei colori

57. Un CV in infografica
• Visualize.me
• Re.vu
• Vizify (più sul lifestream che sul CV)
• L’integrazione con LinkedIn

58. Infografiche personalizzate

59. I software da usare
• Adobe Photoshop
• Adobe Illustrator
• Powerpoint e Keynote
• Adobe Flash (?)

60. Infografiche interattive
• Prezi: il superamento di Powerpoint
• La ZUI (Zoom User Interface)
• Il rischio nausea

61. Video in motion graphics
• Il video in Motion Graphics
• Adobe Première
• Adobe After Effects
• Si parte dal disegno “su carta” per arrivare all’animazione audiovisiva
• Brevità e ritmo

62. Crearsi una banca dati di stili
• Icone, tipologie di grafici, abbinamenti di colore
• Noun project
• Findicons
• Iconspedia
• Shutterstock
• Stock Free Images
• Foter

63. L’utilizzo finale
• Stampa (occhio a formati e risoluzione)
• Web (massima libertà)
• Social (accento sulla comunicazione virale)
• Presentazione dal vivo (spacchettamento delle informazioni)

64. Conclusioni

65. Link utili e sitografia
• www.informationisbeautiful.net
• www.designhistory.org
• www.aiga.org/symbol-signs
• www.gerdarntz.org
• www.emanuelecolombo.it
• www.francescofranchi.com
• www.edwardtufte.com
• www.fonts.com
• www.color-hex.com
• www.coolinfographics.com
• www.dailyinfographic.com
• flowingdata.com
• www.behance.net
• www.deviantart.com
• www.pinterest.com
• thenounproject.com
• piktochart.com
• visual.ly
• infogr.am
• www.easel.ly
• www.wordle.net
• www.tagxedo.com
• vizualize.me
• re.vu
• www.vizify.com
• prezi.com
• www.adobe.com/it
• www.highcharts.com
• motiongraphics.nu
• vimeo.com/channels/pmg
• www.iconspedia.com
• www.data.gov
• www.census.gov
• open-data.europa.eu
• data.gov.uk
• www.cia.gov/library/publications/the-
world-factbook
• www.who.int
• www.google.com/publicdata/directory
• data.worldbank.org
• www.istat.it
• www.dati.gov.it
• soldipubblici.gov.it
• mappa.italiasicura.gov.it
• www.rndt.gov.it