The Do’s And Don’ts Of Infographic Design

• About The Author
• Další čtení na SmashingMagu:
• Zabývat se problematikou Data Viz a infografiky
• Show, Don’t Tell
• Kdyby klient chtěl graf v Excelu, nepotřeboval by vás
• Typografie by neměla být berličkou
• Typografie má své místo
• Organizace a děj
• Drátový rámec infografiky
• Myslete mimo rámec
• Vyprávějte příběh
• Vizualizujte háček
• Čištění pomocí barev
• Univerzální
• Tříbarevná paleta je snadná pro oči
• Používejte nástroje, které máte k dispozici
• Závěrečné myšlenky

About The Author

Amy Balliett is the co-founder of Killer Infographics, an infographic design agency located in Seattle, WA. Killer Infographics began as Submit Infographics, a …More aboutAmy↬

Poznámka redakce: Možná byste si měli přečíst článek Nathana Yaua The Do’s And Don’ts Of Infographic Design:

Od úsvitu internetu poptávka po dobrém designu neustále roste. Od webu 1.0 k webu 2.0 a dále zůstávají designéři na nohou, protože definují trendy a očekávání našeho online vesmíru. Internet je skvělým hřištěm pro designéry a online firmy stále více oceňují, co lze získat z dobře provedeného designu pro oči. V posledních dvou letech se tato skutečnost stala základem rostoucího trendu v online marketingu: infografiky.

Infografie jsou vizuální reprezentace informací nebo „data viz“, jak tomu dnes říkají cool kids. Termín „data viz“ pochází z anglického „data visualization“, což znamená, že soubory dat budou zobrazeny jedinečným způsobem, který lze spíše vidět než číst. Tato vizualizace by neměla být ponechána na interpretaci, ale měla by být navržena tak, aby poskytovala univerzální závěr pro všechny diváky. Zjednodušeně řečeno, infografika se příliš neliší od tabulek a grafů, které programy jako Excel chrlí už léta.

Další čtení na SmashingMagu:

• Zajímavé příklady interaktivního infografického designu
• Zdroje pro vizualizaci dat a infografiku
• Představte si koláčový graf, který na infografiku dupe věčně
• Zábava s fyzikou při vizualizaci dat

Jistě, stejně jako Web 2.0 změnil 1.0, dnešní infografiky jsou mnohem poutavější než jednoduché koláčové a sloupcové grafy. Infografiky dnes skládají mnoho různých vizualizací dat do jednoho uceleného „bonbónku pro oči“. Vyvíjely se spolu s designovými trendy, dostaly několik kreativních faceliftů a internet se nyní zaplňuje zajímavými informacemi podávanými poutavým způsobem.

Zatímco některé designové trendy přicházejí a odcházejí, infografiky tu zůstanou. Díky tomu, že se za ně postavily značky jako USA Today, The New York Times a Google a dokonce i prezident Obama, se infografiky stávají mocným nástrojem pro šíření obrovského množství informací masám. Velké i malé společnosti využívají infografiky k budování své značky, vzdělávání svého publika a optimalizaci umístění ve vyhledávačích prostřednictvím budování odkazů. Proto je nutné naučit se navrhnout dobrou infografiku a vyhnout se běžným nástrahám při navrhování infografiky může znamenat rozdíl mezi získáním velkého klienta a jeho úplnou ztrátou.

Zabývat se problematikou Data Viz a infografiky

Navrhování infografiky není stejné jako navrhování webových stránek, letáků, brožur atd. Ani někteří z nejlepších designérů s portfoliem, nad kterým by se vám sbíhaly sliny, nedokážou provést efektivní návrh infografiky. Tvorba infografiky je náročná a vyžaduje myšlení, které není pro každého přirozené. Toto myšlení však lze získat praxí a dodržováním určitých standardů, z nichž nejdůležitější je respektovat a chápat zobrazení dat. Zde je několik jednoduchých pravidel, kterými se můžete řídit, když se zaobíráte správným zobrazením dat.

Show, Don’t Tell

Pravidlem kinematografie je ukazovat, ne vyprávět. Totéž platí i pro tvorbu infografiky. Základem každé dobré infografiky je vizualizace dat. Jako designér infografiky můžete, ale nemusíte určit koncept a sestavit veškerý výzkum pro finální návrh, ale v každém případě jste zodpovědní za to, abyste tyto informace převedli do vizuálně podnětného, soudržného návrhu, který vypráví příběh a který nevynechá jedinou příležitost k vizualizaci dat. Jako příklad si vezměte tuto část infografiky o Twitteru od společnosti ViralMS:

Co je na této infografice špatně? Porušuje hned první pravidlo. Když máte možnost zobrazit informace vizuálně, využijte ji. Zde mohly být tweety za sekundu zobrazeny alespoň ve sloupcovém grafu. To by někomu umožnilo rychle se na tuto část podívat a zjistit, o co jde; díky zobrazení různých výšek sloupců by oko mohlo rychle posoudit rozdíly v počtu tweetů za sekundu v jednotlivých událostech, aniž by muselo cokoli číst.

Pokud máte problém s dodržováním tohoto pravidla, zkuste udržovat veškerý text v jedné vrstvě souboru AI (kromě textu uvnitř grafů a diagramů). Jednou za čas textovou vrstvu vypněte a podívejte se, zda infografika stále dává smysl. Pokud není vidět žádná data nebo pokud spoustě obrázků chybí kontext, pak příliš mnoho vyprávíte a málo ukazujete.

Kdyby klient chtěl graf v Excelu, nepotřeboval by vás

Může to znít krutě, ale je to pravda. Kdyby infografika byla tak jednoduchá jako rozvržení několika standardních tabulek a grafů na stránce, klienti by nemuseli vyhledávat skvělé designéry. Na internetu existuje mnoho nástrojů, které umí vytvářet barevné koláčové, čárové a sloupcové grafy, takže aby váš návrh vynikl, musíte se posunout na vyšší úroveň. Vezmeme-li data z výše uvedeného příkladu, který ze dvou níže uvedených grafů by podle vás udělal klientovi větší radost?

Pokud jste odpověděli Graf B, chytáte se. Samozřejmě ne všechna data se hodí pro kreativní a jedinečné grafy. Graf A by mohl fungovat velmi dobře, pokud by zbytek infografiky sdílel podobnou estetiku. Někdy prostě musíte zatnout zuby a vytvořit tradiční sloupcový nebo koláčový graf; přesto vždy zvažte způsoby, jak jej obléknout, jako v příkladech níže:

Typografie by neměla být berličkou

Typografie může vytvořit nebo rozbít design, ale neměla by být řešením problému s vizualizací dat. Častěji se stává, že designéři začínají infografiku s velkou energií a nadšením, ale jak pokračují na stránce, rychle ztrácejí dech. To často vede k rychlým rozhodnutím a špatným řešením, jako je použití typografie k předvedení velkého čísla, místo aby ho nějakým způsobem vizualizovali. Zde je příklad:

Kdykoli to vidím, vzpomenu si na reklamní kampaň „Kde je to hovězí?“ a říkám si: „Kde je ta data viz?“. Ačkoli je Sketch Rockwell jedním z mých nejoblíbenějších písem, toto je dokonalý příklad přílišného spoléhání na typografii.

Pokud vám někdo poskytne číslo z výzkumu pro infografiku, zeptejte se sami sebe, jak ho lze vizualizovat. Procenta lze vždy vizualizovat pomocí kreativních koláčových grafů; číselné hodnoty v souboru lze obvykle proměnit v jedinečný sloupcový graf; a když se čísla nevejdou do jednotné stupnice, můžete je vizualizovat v diagramu. Zde je další způsob, jak bylo možné výše uvedená data vizualizovat:

Typografie má své místo

Všechno, co bylo řečeno, má typografie své využití, které by se při tvorbě infografiky nemělo ignorovat. Většinu času budete chtít zaměřit svou tvůrčí typografickou energii na názvy a nadpisy. Název infografiky je ideální příležitostí k použití zábavného a poutavého písma a k jeho zpracování, které odpovídá tématu nebo tématu. Jen se ujistěte, že nadpis není natolik rušivý, aby odváděl pozornost od důvodu, proč se na infografiku vůbec díváme. Pravdou je, že některá témata infografiky jsou nudná, ale správný design nadpisu dokáže lidi zaujmout natolik, že si ji prolistují.

Podobně nadpisy pomáhají rozčlenit infografiku a usnadňují uchopení dat, což vám dává další příležitost nechat vlát svou vlajku font-nerd.

Organizace a děj

Uspořádat infografiku tak, aby dávala smysl a aby diváka zaujala, není vždy snadné, ale je to součást práce většiny designérů infografik. Obvykle dostanete k dispozici velké množství dat a budete z nich muset vytvořit vizuální příběh. To může být zpočátku náročné, ale můžete se řídit několika obecnými pravidly, která vám práci usnadní.

Drátový rámec infografiky

Drátový rámec infografiky vám umožní vypracovat storyboard a rozvržení návrhu. Možná máte představu o příběhu, který chcete vyprávět, ale jakmile začnete věci rozvrhovat, můžete narazit na zeď a budete muset začít znovu. Nutnost reorganizace poté, co jste již udělali velkou část návrhu, je neuvěřitelně frustrující. Vyhněte se tomu tím, že si na začátku nastavíte dějovou linii a určíte, jaká data a jakým způsobem zobrazit. Vyhraďte si hodinu na to, abyste si vše načrtli a ujistili se, že to dává smysl. To také pomůže zajistit, že barevná paleta, kterou zvolíte, přivede pozornost k důležitým bodům a udrží oko na stránce.

Myslete mimo rámec

Při tvorbě infografiky určete rozdělení na části, které pomohou vyprávět příběh. Většina infografik online má vertikální tok, v němž má každá část nadpis, který ji odlišuje od předchozí. To se rychle omrzí. Dobrým způsobem, jak rozbít monotónnost, je uspořádání dat a rozdělení informací do sekcí, aniž byste se zcela spoléhali na nadpisy a barevné zlomy.

Například místo typického jednosloupcového rozvržení můžete v některých částech použít dva sloupce. Sekce byste také mohli rozdělit pomocí rámečků, pozadí různých tvarů nebo dát celému designu motiv silnice či cesty. Zde je několik netradičních rozvržení, která vám dodají tvůrčí šťávu:

Vyprávějte příběh

Všechny dobré příběhy mají začátek, prostředek a konec. Stejné zacházení si zaslouží i infografika. Na začátku infografiky představte problém nebo tezi. Odtud ji podpořte daty. Nakonec infografiku zakončete závěrem.

Vizualizujte háček

Každá dobrá infografika má háček nebo primární poznatek, díky kterému si divák řekne „Aha!“ Jako designér byste měli tento háček učinit ústředním bodem návrhu, pokud je to možné. Umístění háčku buď uprostřed, nebo na samém konci infografiky je obvykle nejlepší, aby upoutal větší pozornost. Nejdůležitějším informacím dejte největší vizuální váhu, aby diváci věděli, co si mají odnést. Zde je několik příkladů dobře vizualizovaných háčků:

Čištění pomocí barev

Rozdíl, který může způsobit barevná paleta, je úžasný, zejména ve světě infografik. Správná paleta může pomoci uspořádat infografiku, evangelizovat značku, posílit téma a mnoho dalšího. Špatná paleta může ze skvělého tématu udělat pastvu pro oči, poškodit image značky a předat špatné sdělení. Zde je několik tipů, které je třeba vzít v úvahu při výběru barev pro infografiku.

Univerzální

Ve webovém designu je vždy důležité zvolit paletu, která se hodí k tématu webu a která je dostatečně neutrální pro různorodou skupinu návštěvníků. Protože infografiky jsou primárně sdíleny online, je výběr správné palety pro celou řadu návštěvníků stejně důležitý. Musíte také zvážit, co vypadá dobře online.

Například dominantní tmavé barvy a neony se na infografikách obvykle neprojeví dobře; neon na černé barvě může být špatně čitelný, a pokud je dat hodně, bude náročné je všechny pojmout. Pokud je to možné, vyhněte se také bílé barvě jako pozadí. Infografiky jsou často sdíleny na více webových stránkách a blozích, z nichž většina má bílé pozadí. Pokud bude pozadí vaší infografiky také bílé, bude obtížné rozluštit, kde začíná a končí.

Tříbarevná paleta je snadná pro oči

Při všech datech, která jsou v infografice obsažena, se ujistěte, že oko čtenáře snadno proplouvá stránkou; špatná barevná paleta tomu může být velkou překážkou. Zvolte paletu, která neútočí na smysly. A zvažte to ještě před zahájením návrhu, protože vám to pomůže určit, jak jednotlivé prvky vizualizovat.

Pokud je pro vás výběr barevné palety těžký, držte se pravidla tří. Vyberte si tři základní barvy. Z těchto tří by jedna měla být barvou pozadí (obvykle nejsvětlejší ze tří) a zbylé dvě by měly rozčlenit jednotlivé části. Pokud potřebujete přidat další barvy, použijte odstíny těchto tří hlavních barev. Díky tomu bude paleta soudržná a uklidňující, nikoli rušivá.

Používejte nástroje, které máte k dispozici

Při výběru barev nemusíte znovu vynalézat kolo. S výběrem správné palety pro vaši infografiku vám pomůže řada skvělých webových stránek. Program Kuler od společnosti Adobe nabízí čerstvé motivy a databázi s možností vyhledávání, jakož i snadný nástroj pro úpravu palety, která vás zajímá. Jedním z problémů programu Kuler je, že všechny palety mají pět barev a barvy jsou někdy z úplně jiných rodin, nikoliv odstíny několika základních barev, takže najít správnou paletu může být jako hledat jehlu v kupce sena.

Dalším nástrojem pro výběr barev je COLOURlovers. V této databázi se vyhledává snadněji: palety jsou v ní rozděleny do různých témat a lze je třídit podle oblíbených. Většina palet se sice také skládá z pěti barev, ale barvy nemají vždy stejnou váhu; místo toho nástroj navrhuje, které by měly být dominantní. Zde jsou některé dobré a špatné palety pro infografiky:

Závěrečné myšlenky

Přestože tyto standardy je důležité zohlednit u většiny návrhů infografik, někdy se objeví infografika, která všechna tato pravidla porušuje, a přesto má obrovský úspěch. Nakonec, klienti mají rádi „pastvu pro oči“ a návrhy, které „vyskakují“! I když jsou tyto termíny subjektivní (a pro většinu designérů nepříjemné), všichni poznáme skvělý infografický návrh, když ho vidíme, a vaši klienti také. Použijte tato pravidla jako vodítko do oblasti infografiky, ale po získání zkušeností si vytvořte vlastní techniky a standardy.

(al)