Le INFOGRAFICHE (dinamiche)

4,166 views

Published on

Published in: Design

Le INFOGRAFICHE (dinamiche)

  1. 1. INFOGRAFICA DINAMICAAndrea Parisi31.05.2012, EDUCAFE, METID – Politecnico di Milano
  2. 2. TRE FASI x L’EXPERTISEPRIMA FASEPanoramica sulle infografiche e raccolta link (questa presentazione).SECONDA FASERealizzazione di una METID INFOGRAPHIC.TERZA FASEProgettazione e Realizzazione di "uninfografica dinamica".Unapplicazione che si "auto-aggiorna" importando i dati da un databasespecifico sulla base di un format visuale standard predefinito.Fattibile? …
  3. 3. DEFINIZIONI “Linfografica si occupa principalmente dell’organizzazione e della rappresentazione di dati e informazioni in forma grafica“.Mattia Lissi (Social Media Analyst):l’infographic è lo strumento grazie al quale è possibile comprendere inmodo immediato concetti articolati e renderli accessibili ad un pubblicomeno esperto.www.lissimattia.comPasquale Gangemi (SEO Specialist):l’infografica consiste nella rappresentazione visuale di informazioni, datio conoscenze attraverso l’uso di diversi elementi grafici.www.pasqualegangemi.com
  4. 4. LA STORIANella preistoria, i nostri antenati hanno creato i primi esempi di infografica: le mappe. La cartografia infatti è di parecchi millenniprecedente alla scrittura: le mappe di Çatal Hüyük sono datate allincirca 7500 a.C.Nel 1626, il gesuita Christoph Scheiner pubblica Rosa Ursina, in cui usa una grande varietà di elementi grafici per rivelare la suaricerca astronomica sul sole. In quella pubblicazione, Scheiner usa una serie di immagini per spiegare la rotazione del sole neltempo.Nel 1786, William Playfair pubblica i primi grafici di dati nel suo libro LAtlante commerciale e politico. Il libro è pieno di graficistatistici che rappresentano leconomia del diciottesimo secolo, usando istogrammi e diagrammi a colonna.Nel 1801, continua ad innovare creando i primi diagrammi ad area nel suo breviary di statistica.Nel 1878, James Joseph Sylvester introduce il termine "grafico" e pubblica una serie di diagrammi rappresentanti la relazione fralegami chimici e proprietà matematiche.Nel 1861, mediante un grafico seminale, venne rappresentata la disastrosa marcia su Mosca di Napoleone. Lautore di questografico, Charles Joseph Minard, è riuscito a rappresentare in una singola immagine bidimensionale, quattro diverse variabili chehanno contribuito al fallimento della marcia [ La distanza e la direzione in cui lesercito viaggiò - le quote daltitudine a cuiviaggiarono le truppe - la quantità di soldati morti di fame e per le ferite - le temperature gelide incontrate durante la marcia.Nel 1936, Otto Neurath introdusse un sistema di pittogrammi progettati come linguaggio visivo internazionale. Isotype (questo ilnome del gruppo di pittogrammi) include una serie di figure umane stilizzate che saranno la base per le moderne icone di figureumane al tratto.Nel 1972, Otl Aicher creò, in occasione delle Olimpiadi di Monaco di Baviera, una serie di pittogrammi divenuti molto popolari eche influenzarono (e continuano ad influenzare) lo stile nella stilizzazione della figura umana usata in tutta la segnaletica pubblica.OGGI, milioni di infografiche nel mondo (e sul web) per ogni tipo di rappresentazione e dato.
  5. 5. OGGILe infografiche sono ovunque eutilizzate per tantissimi scopiDal raccontare lo sviluppo delweb nel tempo alla creazionedi CV personalizzati fino astrumenti automatici checonsentono di creareinfografiche dinamiche.Sono utilizzate anche perCreare e Condividere storie
  6. 6. TIPOLOGIE INFOGRAFICHE tabelle diagrammi di flusso mappe concettuali schemi a blocchi istogrammi grafici mappe mappe topografiche schemi sistemi di segnaletica idee e concetti processi ed evoluzioni cronologie e timeline CV istruzioni altro...
  7. 7. OGGI Facebook - Relationships
  8. 8. PERCHE’ USARLE E’ UN VANTAGGIOLutente medio:- consuma i dati sul web in maniera differente dal contesto tradizionale- percepisce e impara i contenuti in modo diversoLe infografiche:- supportano questa consultazione di informazioni- aiutano a conservare nel ricordo i messaggi visualizzati.La comunicazione attraverso le immaginiè un innegabile vantaggio!
  9. 9. L’INFOGRAFICA (DATI + DESIGN)The Value of Data Visualization
  10. 10. DA CONSIDARAREEasy to digest, Easy to share, They are cool!10 ragioni per cui le Infografiche sono importanti:1. It makes info more appealing - Rende le informazioni più attraenti.2. It shows valuable ideas - Mostra le idee di valore.3. It is attention-grabbing - Attira lattenzione.4. It is easier to understand - E più facile da capire.5. It lessens boredom - Si riduce la noia.6. It awakens one’s interest - Risveglia il proprio interesse.7. It is accessible - E accessibile.8. It is more persuasive - E più convincente.9. It is memorable - E memorizzabile.10. It can easily relay info - Si può facilmente ritrasmettere.
  11. 11. DA CONSIDARAREConsigli utiliun concetto = un’immagine- NON esprimere idee diverse allinterno di ununica immagine.- Più concetti insieme potrebbe complicare la comprensione del dato.- Creare grafica per accogliere le altre idee.Rendere facile la rappresentazione- Utilizzare molto spazio bianco o cmq alleggerire spazi e ingombri.- Ogni testo deve essere di facile lettura (font puliti e abbastanza grandi ).- Riunire in una sola citazione o frase un insieme di informazioni.- Riassumere graficamente piccoli gruppi di informazione.- Pensare in termini di numeri e aggregatori (5 motivi per… sette cosa da…).
  12. 12. COSA NON FARE Esempi da N N seguire! Molte infografiche sono costruite con minuziosa cura dei particolari, ma purtroppo si basano principalmente sull’estetica e danno meno importanza alla chiarezza con cui vengono trasmesse le informazioni.
  13. 13. COSA NON FARE1) Il testo dellinfografica non è reso inalcun modo disponibile2) Non vi è alcun aiuto alla lettura comegrassetti e corsivi.3) Il pezzo è taggato con termini quali"Bettino Craxi"che neppure ricorrono neltesto dellarticolo, ma solo nellimmagine.4) Lanalogia con il Gioco dellOca o con unpercorso tortuoso rende linfografica didifficilissima lettura5) Le informazioni sarebbero risultate piùchiare in un normale post diviso perparagrafi di testo6) Lunica idea pertinente è lamodificazione nel tempo della casa, ci sonosolo punto di partenza e arrivo, mentre ilpercorso manca. (e l’uccellino?)Da Linkiesta Italia 1973-2011, Una repubblica fondata sul condono
  14. 14. IL CONTESTOTitoloTesto, testo, testo
  15. 15. PUNTI DI VISTA"Cambiare prospettiva per vedere la realtà di scala del dato"
  16. 16. PUNTI DI VISTA
  17. 17. PUNTI DI VISTALimmediatezza dei dati visivi e lasua comprensione rispetto alconfronto tra dati a volte ci fàscoprire anche informazioni chenon avevamo considerato.Vulcano islandese e le sueemissioni di CO2206,465 Tons CO2 savedby 60% cancelled flights across Europe
  18. 18. STRUMENTI ONLINEhttp://infogr.am (beta) Crea infografiche online (richiede account Facebook e Twitter).
  19. 19. STRUMENTI ONLINEVisual.ly Crea infografiche personalizzate, attraverso Facebook e Twitter.Easel.ly Crea infografiche personalizzate sulla base di template predefiniti.Google public Data Explorer Visualizzare grandi serie di dati, analizzarli e comunicarli.Ionz Applicazione web che consente di realizzare un’infografica personale.Vizualize.me Crea un’infografica del proprio curriculum vitae da LinkedIn.Cvgram.me Crea infografiche del proprio CV.Social Memories Realizza il Libro infografico del profilo di Facebook.Indiemapper Servizio web gratuito per creare delle mappe geografiche tematiche.Tiki-Toki Crea linee temporali con foto, video e notizie.Memolane Timeline personali su avvenimenti di Facebook, Twitter e altri social.Chartle Web-app per creare grafici con diagrammi, istogrammi, grafici a torta, etc.Hohli Diagrammi di Venn, a torta, a barre, e altri tipi di informazioni grafiche.Tagxedo Strumento per creare tag cloud, con possibilità di personalizzazione.Presenti sul web anche risorse grafiche free per realizzare infografiche (es. Vector Infographic Kit).
  20. 20. ESEMPI TEMATICI Education Environment Gaming Geography Social Media Transportation – Travel Tecnology Entertainment Computers – Design Curriculum Vitae Real Info Other – Funny Vertical infographics Video - Animation
  21. 21. ESEMPI Education
  22. 22. ESEMPI Education
  23. 23. ESEMPI Environment
  24. 24. ESEMPI Gaming
  25. 25. ESEMPI Gaming
  26. 26. ESEMPI Gaming
  27. 27. ESEMPI Geography
  28. 28. ESEMPI Social Media
  29. 29. ESEMPI Transportation - Travel
  30. 30. ESEMPI Tecnology
  31. 31. ESEMPI Tecnology
  32. 32. ESEMPI Entertainment
  33. 33. ESEMPI Computers - Design
  34. 34. ESEMPI Computers - Design
  35. 35. ESEMPI Curriculum Vitae
  36. 36. ESEMPI Curriculum Vitae
  37. 37. ESEMPI Real Info
  38. 38. ESEMPI Other - Funny
  39. 39. ESEMPI Other - Funny
  40. 40. ESEMPI Vertical infographics SPACE RACE INFOGRAPHIC - bbc www.bbc.com/future/bespoke/space_infographic H = 14.190 px
  41. 41. ESEMPI (video and animation)Liquid infographics
  42. 42. ESEMPI (video and animation)Move more, move better, move forever.
  43. 43. ESEMPI (video and animation)This video introduce you to the concepts of data visualization and show online tools
  44. 44. Laboratorio POLIMIDensity Design is a Research Lab in the design department (INDACO) of thePolitecnico di Milano. It focuses on the visual representation of complex social,organizational and urban phenomena.info@densitydesign.org
  45. 45. INFO E STACKS Delicious Staks http://delicious.com/stacks/andrea_parisi BeeP | METID Match http://beep.metid.polimi.it/web/metid-match METID web site www.metid.polimi.it
  46. 46. GRAZIE.

×