Infographics ei ole uusi. Ja varmasti, vuorovaikutteiset eivät olekaan - mutta tuoreiden datapohjaisten uutissivustojen, kuten vox,Fivethirtyeight ja Upshot , he ovat yhä suosittuja.
Ja koska katsojat näkevät tablet-sovelluksia, puhelimia ja työpöytiä, näiden grafiikan rakentaminen HTML5: een on tapa mennä - se on todennäköisesti tapa, jolla asiakkaat ja työntekijät pyytävät sinua rakentamaan!
map of baseball fans baseball-fanien kartta tekijä The Upshot
Tässä on kolme tapaa varmistaa, että HTML5-pohjaiset interaktiiviset infografiset tiedot katkeavat häiriöitä.
Ennen kuin ajattelet edes tekniikkaa, on tärkeää miettiä graafista näkemystä näkökulmasta. Vaikka HTML5 antaa sinulle aivan uuden välineen tietojen keräämiseksi, se ei automaattisesti anna tarkoitusta tai kertomusta kappaleelle.
On ilmeistä, kun projekti laukaistiin viime hetken, ilman että se olisi käyttökelpoisuutta tai laatua. Miten vältät sen tekemisen? Tykkään "FIRED" -menetelmän käyttämisestä - helppo tapa muistaa ajatella kriittisesti ennen kuin aloitat CSS-temppujen uusimman käyttämisen vuorovaikutteisen kartan tekemiseksi:
Näiden kysymysten pyytäminen auttaa sinua kartoittamaan sivusi tavoitteet ja kuinka haluat, että viestisi resonoi yleisösi. Viime kädessä lopullisen tuotteen tulisi kuvata ideasi selkeällä ja miellyttävällä tavalla. Ole luova, kyllä, mutta myös kurittaa. Graafinen taide on, mitä pitäisi tehdä lukijalle, mutta esitetyt tiedot on suppea; älä anna tallennusvälineen ohittaa viestin. Menestyvä infographic kiinnittää yleisösi enemmän ja on helppo sulattaa.
Adobe Edge Animate on HTML5-animaatiotyökalu, jonka avulla voit lisätä liikettä web-grafiikkaan, joten voit laajentaa mukautettuja malleja vuorovaikutteisuuden ja liikkuvuuden avulla. Se on myös integroitu muihin luovia työkaluja tarjoamaan saumaton sillan muotoilun ja HTML: n välillä, kun luot verkkoon. On olemassa todella hienoja malleja ja näytteitä esittelysivu pääset alkuun. Jos haluat siirtyä tasolle syvemmälle ja lisätä elementtejä, kuten napsauttamalla ja koskettamalla siirrettäviä pesureita, tässä on opetusohjelma omaisuuden kanssa pääset alkuun.
Voit myös kutoa interaktiivisia grafiikoita, jotka käyttävät CSS: n ja HTML5: n viimeisimpiä selaimen päivityksiä tekemään melko hienoja vaikutuksia. CSS-muodot ovat viimeisimmissä määrittelyvaiheissa; Tarkista se (Github repo tässä ).
evolution of the Web verkon kehitys infographic.
Infografiikka ei ole mikään ilman tehokkaita tietolähteitä ja välineitä niiden havainnollistamiseksi.
Tietolähteet voivat vaihdella - onko kyseessä oma tutkimus tai asiakkaasi. Myös Quorasta on hyvä lista julkisesti saatavilla olevat tietokannat joka voi antaa sinulle hyviä raaka-tietoja pelata.
Osa suosikkikuvastopalveluista (jotka tietenkin tarjoavat kaikki HTML5-tuotteet) tietojesi keräämiseen ja arviointiin ovat:
Ja jos olet erityisen kunnianhimoinen ja etsit todella syvää sukeltaa suuremmalle tietotieteen alalle, on paljon resursseja verkossa aiheesta. Tällaisia ovat MOOC: t tietotieteen kurssi Washingtonin yliopistosta.