Infografy nejsou nové. A jistě ani interaktivní nejsou - ale s uvedením nedávných zpravodajských serverů, jako jsou například Vox,Fivethirtyeight a Upshot , jsou stále populárnější.

A protože diváci vidí infografiku na tabletech, telefonech a stolních počítačích, vytváření grafiky ve formátu HTML5 je způsob, jak jít - je to pravděpodobně způsob, jakým vás vaši klienti a spolupracovníci požádají o vybudování!

baseball_info

A mapa fanoušků baseballu od Upshot

Zde jsou tři způsoby, jak se ujistit, že vaše interaktivní infograficky založené na HTML5 prolomí nepořádek.

1) Přemýšlejte o tom, proč děláte infografii na prvním místě pomocí metody FIRED

Než se dokonce zamyslíte nad technologií, je důležité přemýšlet o grafice z pohledu diváka. Zatímco HTML5 vám dává úplně nové médium pro prezentaci příběhu vašich dat, automaticky neposkytuje účel ani narativu k dílu.

Je zřejmé, když byl projekt spojen s posledním okamžikem, bez ohledu na použitelnost či kvalitu. Jak se vyvarujete této práci? Líbí se mi zaměstnání metody "FIRED" - snadný způsob, jak si zapamatovat, abyste kriticky mysleli, než začnete používat nejnovější triky CSS, abyste vytvořili interaktivní mapu:

  • Čerstvé - Jak bude váš design vynikat z davu?
  • Informativní - Předkládáte přesné a zajímavé skutečnosti?
  • Relevantní - Poskytují vaše informace harmonický příběh?
  • Zábavná - Je divák vtažen a nadšen, že je součástí vašeho příběhu?
  • Různé - Je váš infografic nový? Už se to stalo?

Při zadávání těchto otázek vám pomohou mapovat cíle vaší stránky a jak chcete, aby vaše zpráva rezonovala s vaším publikem. V konečném výsledku by váš konečný produkt měl rámovat svůj nápad jasným a chutným způsobem. Buďte kreativní, ano, ale také disciplinujte. Grafické umění je to, čemu by měl čtenář čerpat, ale předložené údaje musí být stručné; Nenechte médium předjet zprávu. Úspěšná infografie přitahuje vaše publikum více a je snadné strávit.

2) Přesuňte jej

Adobe Edge Animovat je animační nástroj HTML5, který vám umožňuje přidávat pohyb do webové grafiky, což vám umožní rozšířit vlastní vzory s interaktivitou a pohybem. Je také integrován s dalšími kreativními nástroji, které nabízejí bezproblémový most mezi designem a HTML, jak vytváříte pro web. Existují některé opravdu skvělé šablony a vzorky na prezentace stránky abys začal. Chcete-li jít do úrovně hlouběji a přidat prvky, jako jsou klepnutí a dotek drahé pračky, je zde tutoriál s aktivy abys začal.

Můžete také tkát v interaktivní grafice, která využívají nejnovější aktualizace prohlížeče CSS a HTML5, aby se některé docela fantazie efekty. CSS Shapes je ve svých posledních stádiích specifikace; Koukni na to (Github repo tady ).

evolution_web

The vývoj webu infographic.

3) Data, data, data

Infographic není ničím bez silných zdrojů dat a nástrojů pro jejich ilustraci.

Zdroje dat se mohou lišit - ať je to váš vlastní výzkum nebo váš klient. Tam je také dobrý seznam na Quora z veřejně dostupné datové sady které vám mohou poskytnout nějaké dobré surové údaje.

Některé z mých oblíbených infografických služeb (které samozřejmě poskytují všechny produkty HTML5) pro shromažďování a vyhodnocování dat jsou:

  • Piktochart - bezplatná služba (s možností placených pro), která nabízí širokou škálu přizpůsobitelných motivů pomocí nástroje pro import dat.
  • infogr.am - bezplatná služba (s placenou placenou volbou pro), která nabízí šablony, tabulky a další nástroje pro vytváření vizuálních grafů.
  • visual.ly - grafická komunita. Zatímco cenový bod vizuálně se může zdát trochu strmý (udělají vám infografii založenou na kreativní struktuře začínající na 999 dolarů), jejich komunita je útočištěm inspirace při hledání vlastního infografického projektu.

A pokud jste obzvláště ambiciózní a hledáte opravdu hluboké ponoření do větší oblasti vědy o datech, je na tomto tématu spousta zdrojů online. Existují takové MOOC kurzu datových věd z univerzity ve Washingtonu.