Andrea Parisi31.05.2012, EDUCAFE, METID – Politecnico di Milano

INFOGRAFICA DINAMICA

TRE FASI x L’EXPERTISE

PRIMA FASEPanoramica sulle infografiche e raccolta link (questa presentazione).

SECONDA FASERealizzazione di una METID INFOGRAPHIC.

TERZA FASEProgettazione e Realizzazione di "un'infografica dinamica".Un'applicazione che si "auto-aggiorna" importando i dati da un database specifico sulla base di un format visuale standard predefinito.

Fattibile? …

DEFINIZIONI

“L'infografica 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 in modo immediato concetti articolati e renderli accessibili ad un pubblico meno esperto.www.lissimattia.com

Pasquale Gangemi (SEO Specialist): l’infografica consiste nella rappresentazione visuale di informazioni, dati o conoscenze attraverso l’uso di diversi elementi grafici. www.pasqualegangemi.com

LA STORIA

Nella preistoria, i nostri antenati hanno creato i primi esempi di infografica: le mappe. La cartografia infatti è di parecchi millenni precedente alla scrittura: le mappe di Çatal Hüyük sono datate all'incirca 7500 a.C.Nel 1626, il gesuita Christoph Scheiner pubblica Rosa Ursina, in cui usa una grande varietà di elementi grafici per rivelare la sua ricerca astronomica sul sole. In quella pubblicazione, Scheiner usa una serie di immagini per spiegare la rotazione del sole nel tempo.Nel 1786, William Playfair pubblica i primi grafici di dati nel suo libro L'Atlante commerciale e politico. Il libro è pieno di grafici statistici che rappresentano l'economia 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 fra legami chimici e proprietà matematiche. Nel 1861, mediante un grafico seminale, venne rappresentata la disastrosa marcia su Mosca di Napoleone. L'autore di questo grafico, Charles Joseph Minard, è riuscito a rappresentare in una singola immagine bidimensionale, quattro diverse variabili che hanno contribuito al fallimento della marcia [ La distanza e la direzione in cui l'esercito viaggiò - le quote d'altitudine a cui viaggiarono 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 il nome del gruppo di pittogrammi) include una serie di figure umane stilizzate che saranno la base per le moderne icone di figure umane al tratto.Nel 1972, Otl Aicher creò, in occasione delle Olimpiadi di Monaco di Baviera, una serie di pittogrammi divenuti molto popolari e che 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.

OGGI

Le infografiche sono ovunque eutilizzate per tantissimi scopi

Dal raccontare lo sviluppo del web nel tempo alla creazionedi CV personalizzati fino a strumenti automatici che consentono di creare infografiche dinamiche.

Sono utilizzate anche perCreare e Condividere storie

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...

OGGI

Facebook - Relationships

PERCHE’ USARLE E’ UN VANTAGGIO

L'utente medio:- consuma i dati sul web in maniera differente dal contesto tradizionale- percepisce e impara i contenuti in modo diverso

Le infografiche:- supportano questa consultazione di informazioni - aiutano a conservare nel ricordo i messaggi visualizzati.

La comunicazione attraverso le immaginiè un innegabile vantaggio!

L’INFOGRAFICA (DATI + DESIGN)

The Value of Data Visualization

DA CONSIDARARE

Easy 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 l'attenzione.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.

DA CONSIDARARE

Consigli utili

un concetto = un’immagine - NON esprimere idee diverse all'interno di un'unica 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…).

COSA NON FARE

Molte infografiche sono costruite con minuziosa cura dei particolari, ma purtroppo si basano principalmente sull’estetica e danno meno importanzaalla chiarezza con cui vengono trasmesse le informazioni.

Esempi da N N seguire!

COSA NON FARE

1) Il testo dell'infografica non è reso in alcun modo disponibile2) Non vi è alcun aiuto alla lettura come grassetti e corsivi.3) Il pezzo è taggato con termini quali "Bettino Craxi"che neppure ricorrono nel testo dell'articolo, ma solo nell'immagine.4) L'analogia con il Gioco dell'Oca o con un percorso tortuoso rende l'infografica di difficilissima lettura5) Le informazioni sarebbero risultate più chiare in un normale post diviso per paragrafi di testo6) L'unica idea pertinente è la modificazione nel tempo della casa, ci sono solo punto di partenza e arrivo, mentre il percorso manca. (e l’uccellino?)Da Linkiesta Italia 1973-2011, Una repubblica fondata sul condono

IL CONTESTO

TitoloTesto, testo, testo

PUNTI DI VISTA

"Cambiare prospettiva per vedere la realtà di scala del dato"

PUNTI DI VISTA

PUNTI DI VISTA

L'immediatezza dei dati visivi e la sua comprensione rispetto al confronto tra dati a volte ci fà scoprire anche informazioni che non avevamo considerato.

Vulcano islandese e le sue emissioni di CO2

206,465 Tons CO2 saved by 60% cancelled flights across Europe

STRUMENTI ONLINE

http://infogr.am (beta) Crea infografiche online (richiede account Facebook e Twitter).

STRUMENTI ONLINE

Visual.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).

ESEMPI TEMATICI

Education Environment Gaming Geography Social Media Transportation – Travel Tecnology Entertainment Computers – Design Curriculum Vitae Real Info Other – Funny Vertical infographics

Video - Animation

ESEMPI Education

ESEMPI Education

ESEMPI Environment

ESEMPI Gaming

ESEMPI Gaming

ESEMPI Gaming

ESEMPI Geography

ESEMPI Social Media

ESEMPI Transportation - Travel

ESEMPI Tecnology

ESEMPI Tecnology

ESEMPI Entertainment

ESEMPI Computers - Design

ESEMPI Computers - Design

ESEMPI Curriculum Vitae

ESEMPI Curriculum Vitae

ESEMPI Real Info

ESEMPI Other - Funny

ESEMPI Other - Funny

ESEMPI Vertical infographics

H = 14.190 px

SPACE RACE INFOGRAPHIC - bbc

www.bbc.com/future/bespoke/space_infographic

ESEMPI (video and animation)

Liquid infographics

ESEMPI (video and animation)

Move more, move better, move forever.

ESEMPI (video and animation)

This video introduce you to the concepts of data visualization and show online tools

Laboratorio POLIMI

Density Design is a Research Lab in the design department (INDACO) of the Politecnico di Milano. It focuses on the visual representation of complex social, organizational and urban phenomena.

info@densitydesign.org

INFO E STACKS

METID web site

BeeP | METID Match

Delicious Staks http://delicious.com/stacks/andrea_parisi

http://beep.metid.polimi.it/web/metid-match

www.metid.polimi.it

GRAZIE.