The Do’s And Don’ts Of Infographic Design

• About The Author
• Lecturi suplimentare pe SmashingMag:
• Învățându-vă mintea în jurul Data Viz și a designului infografic
• Show, Don’t Tell
• Dacă clientul ar vrea un grafic Excel, nu ar avea nevoie de dumneavoastră
• Tipografia nu ar trebui să fie o cârjă
• Tipografia își are locul său
• Organizarea și povestea
• Wireframing the Infographic
• Think Outside the Box
• Spuneți o poveste
• Vizualizați cârligul
• Curățarea lucrurilor cu ajutorul culorilor
• Fă-o universală
• O paletă de trei culori este ușoară pentru ochi
• Utilizați instrumentele pe care le aveți la dispoziție
• Gânduri finale

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↬

Nota editorului: Poate doriți să citiți articolul lui Nathan Yau The Do’s And Don’ts Of Infographic Design: Revisited aici, pe Smashing Magazine, care este un răspuns la acest articol.

De la începuturile internetului, cererea pentru un design bun a continuat să crească vertiginos. De la Web 1.0 la Web 2.0 și dincolo de acesta, designerii au rămas cu ochii în patru pentru a defini tendințele și așteptările universului nostru online. Internetul este terenul de joacă al marilor designeri, iar afacerile online apreciază din ce în ce mai mult ceea ce se poate obține de pe urma unui aspect vizual bine executat. În ultimii doi ani, acest fapt a devenit coloana vertebrală a unei tendințe în creștere în marketingul online: infograficul.

Infograficele sunt reprezentări vizuale ale informațiilor, sau „data viz”, așa cum îi spun copiii cool în zilele noastre. Termenul „data viz” provine de la „data visualization”, care implică faptul că seturile de date vor fi afișate într-un mod unic care poate fi văzut, mai degrabă decât citit. Această vizualizare nu ar trebui să fie lăsată la latitudinea interpretării, ci ar trebui, în schimb, să fie concepută într-un mod care să ofere o concluzie universală pentru toți privitorii. În termenii cei mai simpli, infografiile nu sunt prea diferite de diagramele și graficele pe care programe precum Excel le scuipă de ani de zile.

Lecturi suplimentare pe SmashingMag:

• Exemple captivante de design infografic interactiv
• Resurse de vizualizare a datelor și infografice
• Imaginați-vă un grafic cu plăcintă călcând în picioare un infografic pentru totdeauna
• Distracție cu fizica în vizualizarea datelor

Desigur, la fel ca și Web 2.0 a schimbat 1.0, infografiile de astăzi sunt mult mai atrăgătoare pentru ochi decât simple diagrame circulare și grafice cu bare. Astăzi, infografiile compilează mai multe vizualizări de date diferite într-o singură bucată coerentă de „bomboane pentru ochi”. Acestea au evoluat odată cu tendințele de design, au primit câteva modificări creative, iar internetul se umple acum de informații interesante livrate în moduri captivante.

În timp ce unele tendințe de design vin și pleacă, infografiile sunt aici pentru a rămâne. Cu branduri precum USA Today, The New York Times și Google și chiar președintele Obama care le susțin, infografiile devin un instrument puternic de diseminare a unor cantități uriașe de informații către mase. Companiile mari și mici folosesc infografice pentru a-și construi mărcile, pentru a-și educa publicul și pentru a-și optimiza poziționarea pe motoarele de căutare prin construirea de link-uri. Acesta este motivul pentru care a învăța cum să proiectezi un infografic bun este o necesitate, iar evitarea capcanelor comune ale designului infografic ar putea însemna diferența dintre a obține un client important și a-l pierde cu totul.

Învățându-vă mintea în jurul Data Viz și a designului infografic

Desenarea unui infografic nu este la fel ca proiectarea unui site web, a unui pliant, a unei broșuri etc. Chiar și unii dintre cei mai buni designeri, cu portofolii care te-ar face să salivezi, nu pot executa un design infografic eficient. Crearea de infografice este o provocare și necesită o mentalitate care nu vine în mod natural la toată lumea. Dar această mentalitate poate fi dobândită prin practică și prin respectarea anumitor standarde, dintre care cel mai important este să respectați și să înțelegeți data viz. Iată câteva reguli simple de urmat atunci când vă înfășurați mintea în jurul unui data viz adecvat.

Show, Don’t Tell

O regulă a cinematografiei este să arăți, nu să spui. Același lucru este valabil și pentru designul infografic. Fundamentul oricărui infografic bun este data viz. În calitate de designer de infografice, puteți sau nu să determinați conceptul și să compilați toate cercetările pentru designul final, dar în orice caz sunteți responsabil pentru transformarea acelor informații într-un design vizual stimulativ, coerent, care spune o poveste și care nu ratează nicio ocazie de a vizualiza datele. Luați ca exemplu această porțiune dintr-un infografic despre Twitter realizat de ViralMS:

Ce este în neregulă cu acest infografic? Încalcă prima regulă încă de la început. Atunci când aveți ocazia de a afișa informații în mod vizual, profitați de ea. Aici, tweet-urile pe secundă ar fi putut cel puțin să fie afișate într-un grafic cu bare. Acest lucru ar fi permis cuiva să se uite rapid la această secțiune și să vadă ce se întâmplă; văzând diferitele înălțimi ale barelor, ochiul ar fi putut evalua rapid diferențele dintre tweet-urile pe secundă per eveniment fără a fi nevoit să citească nimic.

Dacă aveți probleme în a adera la această regulă, încercați să păstrați tot textul pe un singur strat al fișierului AI (cu excepția textului din interiorul diagramelor și graficelor). Din când în când, dezactivați stratul de text și vedeți dacă infograficul mai are sens. Dacă nu există niciun fel de vizibilitate a datelor sau dacă o grămadă de imagini lipsesc din context, înseamnă că faceți prea multe povestiri și nu destule prezentări.

Dacă clientul ar vrea un grafic Excel, nu ar avea nevoie de dumneavoastră

Poate suna dur, dar este adevărat. Dacă infografiile ar fi la fel de simple ca așezarea pe o pagină a unei grămezi de diagrame și grafice standard, atunci clienții nu ar avea nevoie să caute designeri grozavi. Există multe instrumente online care pot crea diagrame circulare colorate, grafice cu linii și grafice cu bare, așa că trebuie să duci lucrurile la următorul nivel pentru ca designul tău să iasă în evidență. Pornind de la datele de mai sus, care dintre cele două grafice de mai jos credeți că ar face un client mai fericit?

Dacă ați răspuns Graficul B, înseamnă că vă prindeți. Desigur, nu toate datele se pretează la grafice creative și unice. Graficul A ar putea funcționa foarte bine dacă restul infograficului împărtășește o estetică similară. Uneori trebuie doar să mușcați glonțul și să produceți un grafic tradițional cu bare sau o diagramă circulară; cu toate acestea, luați întotdeauna în considerare modalitățile de a-l îmbrăca, ca în exemplele de mai jos:

Tipografia nu ar trebui să fie o cârjă

Tipografia poate face sau distruge un design, dar nu ar trebui să fie soluția la o problemă de data viz. De cele mai multe ori, designerii încep un infografic cu multă energie și entuziasm, dar își pierd rapid avântul pe măsură ce continuă să coboare în pagină. Acest lucru duce adesea la decizii rapide și soluții proaste, cum ar fi utilizarea tipografiei pentru a arăta un număr mare în loc să îl vizualizeze într-un anumit fel. Iată un exemplu:

De fiecare dată când văd asta, îmi amintesc de campania publicitară „Unde este carnea de vită?” și mă gândesc: „Unde este vizibilitatea datelor?”. Deși Sketch Rockwell este unul dintre fonturile mele preferate din toate timpurile, acesta este un exemplu perfect de încredere prea mare în tipografie.

De fiecare dată când vi se oferă o cifră de cercetare pentru un infografic, întrebați-vă cum poate fi vizualizată. Procentele pot fi vizualizate întotdeauna cu diagrame circulare creative; valorile numerice dintr-un set pot fi transformate, de obicei, într-un grafic de bare unic; iar atunci când numerele nu se potrivesc pe o scară consistentă, s-ar putea să le puteți vizualiza într-o diagramă. Iată un alt mod în care ar fi putut fi vizualizate datele de mai sus:

Tipografia își are locul său

Toate acestea fiind spuse, tipografia are utilizările sale, care nu trebuie ignorate atunci când se creează un infografic. De cele mai multe ori, veți dori să vă concentrați energiile creative tipografice asupra titlurilor și titlurilor. Titlul infograficului este o ocazie perfectă pentru a folosi un font amuzant și atrăgător și pentru a-i da un tratament care să se potrivească temei sau subiectului. Asigură-te doar că titlul nu este atât de deranjant încât să ne îndepărteze de motivul pentru care ne uităm la infografic în primul rând. Adevărul este că unele subiecte de infografice sunt plictisitoare, dar designul corect al titlului poate atrage oamenii suficient de mult pentru a le parcurge.

În mod similar, titlurile ajută la fragmentarea unui infografic și fac ca datele să fie mai ușor de asimilat, dându-vă o altă șansă de a da drumul la steagul font-nerd.

Organizarea și povestea

Organizarea unui infografic într-un mod care să aibă sens și care să mențină interesul privitorului nu este întotdeauna ușoară, dar face parte din munca celor mai mulți designeri de infografice. De obicei, vi se vor da o mulțime de date și va trebui să creați o poveste vizuală din ele. Acest lucru poate fi o provocare la început, dar puteți urma câteva reguli generale pentru a face lucrurile mai ușoare.

Wireframing the Infographic

Wireframing-ul unui infografic vă permite să elaborați un storyboard și un layout pentru design. Este posibil să aveți o idee despre povestea pe care doriți să o spuneți, dar, pe măsură ce începeți să aranjați lucrurile, s-ar putea să vă loviți de un zid și să trebuiască să o luați de la capăt. Faptul că trebuie să reorganizați după ce ați realizat deja o mare parte din design este incredibil de frustrant. Evitați acest lucru prin configurarea poveștii de la început pentru a determina ce date să arătați și cum. Rezervați-vă o oră pentru a schița lucrurile și asigurați-vă că totul are sens. Acest lucru vă va ajuta, de asemenea, să vă asigurați că paleta de culori pe care o veți alege atrage atenția asupra punctelor importante și menține ochiul curgând în josul paginii.

Think Outside the Box

În timp ce realizați wireframe-ul infografic, veți identifica pauzele de secțiune care vă vor ajuta să spuneți povestea. Majoritatea infografiilor online au un flux vertical, în care fiecare secțiune are un titlu pentru a o distinge de ultima. Acest lucru devine rapid plictisitor. Organizarea datelor și secționarea informațiilor fără a vă baza în întregime pe titluri și pauze de culoare este o modalitate bună de a sparge monotonia.

De exemplu, în loc să optați pentru un aspect tipic pe o coloană, ați putea folosi două coloane în anumite părți. Ați putea, de asemenea, să rupeți secțiunile cu borduri, cu fundaluri de diferite forme sau să dați întregului design o temă de drum sau de potecă. Iată câteva machete ieșite din comun pentru a vă pune în mișcare creativitatea:

Spuneți o poveste

Toate poveștile bune au un început, un mijloc și un sfârșit. Infografiile merită același tratament. La începutul infograficului, introduceți problema sau teza. De acolo, susțineți-o cu date. În cele din urmă, încheiați infograficul cu o concluzie.

Vizualizați cârligul

Care infografic bun are un cârlig sau o concluzie principală care îl face pe privitor să spună „A-ha!” În calitate de designer, ar trebui să faceți din acest cârlig punctul central al designului, dacă este posibil. Plasarea cârligului fie în centrul sau chiar la sfârșitul infograficului este de obicei cea mai bună, astfel încât să capteze mai multă atenție. Oferiți celor mai importante informații cea mai mare greutate vizuală, astfel încât spectatorii să știe ce trebuie să rețină. Iată câteva exemple de cârlige bine vizualizate:

Curățarea lucrurilor cu ajutorul culorilor

Diferența pe care o poate face o paletă de culori este uimitoare, mai ales în lumea infografiilor. Paleta potrivită poate ajuta la organizarea unui infografic, la evanghelizarea brandului, la consolidarea subiectului și multe altele. Paleta greșită poate transforma un subiect grozav într-o monstruozitate, poate dăuna imaginii brandului și poate transmite un mesaj greșit. Iată câteva sfaturi de care trebuie să țineți cont atunci când alegeți culorile pentru infograficul dumneavoastră.

Fă-o universală

În designul web, este întotdeauna important să alegeți o paletă care să se potrivească cu tema site-ului și care să fie suficient de neutră pentru un grup divers de vizitatori. Deoarece infografiile sunt partajate în principal online, alegerea paletei potrivite pentru o serie de vizitatori este la fel de importantă. De asemenea, trebuie să țineți cont de ceea ce arată bine online.

De exemplu, culorile închise dominante și neonul nu se traduc de obicei bine pe infografice; neonul pe negru poate fi greu de citit, iar dacă există o mulțime de date, asimilarea tuturor va fi o provocare. De asemenea, evitați albul ca fundal ori de câte ori este posibil. Infografiile sunt adesea partajate pe mai multe site-uri web și bloguri, dintre care majoritatea au fundaluri albe. Dacă fundalul infograficului dvs. este, de asemenea, alb, atunci descifrarea locului unde începe și unde se termină va fi dificilă.

O paletă de trei culori este ușoară pentru ochi

Cu toate datele care intră într-un infografic, asigurați-vă că ochiul cititorului curge ușor în josul paginii; paleta de culori greșită poate fi o mare barieră în acest sens. Alegeți o paletă care nu atacă simțurile. Și luați în considerare posibilitatea de a face acest lucru înainte de a începe proiectarea, deoarece vă va ajuta să determinați cum să vizualizați diferitele elemente.

Dacă alegerea unei palete de culori este dificilă pentru dumneavoastră, respectați regula de trei. Alegeți trei culori primare. Dintre cele trei, una ar trebui să fie culoarea de fundal (de obicei cea mai deschisă dintre cele trei), iar celelalte două ar trebui să despartă secțiunile. Dacă trebuie să adăugați alte culori, folosiți nuanțe ale celor trei culori principale. Acest lucru va menține paleta coerentă și liniștitoare, mai degrabă decât stridentă.

Utilizați instrumentele pe care le aveți la dispoziție

Când alegeți culorile, nu trebuie să reinventați roata. Există o serie de site-uri web excelente care vă vor ajuta să alegeți paleta potrivită pentru infograficul dvs. Kuler de la Adobe oferă teme noi și o bază de date în care se pot face căutări, precum și un instrument simplu pentru a ajusta paleta care vă interesează. O problemă cu Kuler este că toate paletele au cinci culori, iar culorile sunt uneori din familii complet diferite, mai degrabă decât nuanțe ale câtorva culori primare, astfel încât găsirea paletei potrivite poate fi ca și cum ai căuta un ac în carul cu fân.

Un alt instrument de selectare a culorilor este COLOURlovers. Această bază de date este mai ușor de căutat: împarte paletele în diferite teme și poate fi sortată în funcție de favorite. În timp ce cele mai multe dintre palete constau, de asemenea, din cinci culori, culorilor nu li se acordă întotdeauna o pondere egală; în schimb, instrumentul sugerează care ar trebui să fie dominante. Iată câteva palete bune și rele pentru infografice:

Gânduri finale

În timp ce aceste standarde sunt importante de luat în considerare pentru cele mai multe modele de infografice, uneori apare un infografic care încalcă toate aceste reguli și totuși are un succes imens. În cele din urmă, clienților le plac „bomboanele pentru ochi” și desenele care „explodează”! Deși acești termeni sunt subiectivi (și enervanți pentru majoritatea designerilor), cu toții știm să recunoaștem un design de infografic grozav atunci când vedem unul, iar clienții dvs. o fac, de asemenea. Folosiți aceste reguli pentru a vă ghida pe tărâmul infografic, dar creați-vă propriile tehnici și standarde după ce ați acumulat ceva experiență.

(al)