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!

baseball_info

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

1) Ajattele, miksi olet tekemässä infographia ensiksi käyttämällä FIRED-menetelmää

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:

  • Tuore - Miten muotoilisi erottuvat joukosta?
  • Informatiivinen - Esitteletko tarkkoja ja kiehtovia tosiasioita?
  • Relevant - Antavatko tietosi kertoa harmoninen tarina?
  • Viihdyttävä - Onko katsojan piirretty ja innoissut olemaan osa tarinaasi?
  • Eri - Onko infografiasi uusi? Onko se aikaisemmin tehty?

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.

2) Siirrä se

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_web

evolution of the Web verkon kehitys infographic.

3) Tiedot, tiedot, tiedot

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:

  • Piktochart - ilmainen palvelu (maksullisella lisätoiminnolla), joka tarjoaa laajan valikoiman muokattavissa olevia teemoja, joissa on liukas tietojen tuontiapuohjelma.
  • infogr.am - ilmainen palvelu (maksetulla maksetulla lisäasetuksella), joka tarjoaa malleja, laskentataulukoita ja muita apuohjelmia visuaalisten kaavioiden luomiseen.
  • visuaalisesti - grafiikkayhteisö. Vaikka visuaalisen hintatason voi näyttää hieman jyrkäeltä (he antavat sinut infograafille, joka perustuu luovaan lyhytnäkemiseen, joka alkaa 999 dollaria). Yhteisö on inspiraatiota, kun he haluavat aloittaa oman infographicprojektin.

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.