Share
Acum câteva săptămâni am tras un infographic pentru a evidenția câteva fapte și cifre privind personalul de la distanță al Envato. Să aruncăm o privire asupra unora dintre luarea deciziilor, a fluxului de lucru și a tehnicilor care au dus la realizarea acesteia.
Recent am înălțat bastoane și m-am mutat din Valencia în Spania, în Bordeaux, în Franța - luxul libertății care funcționează de la distanță. Fiind în altă parte, m-am întrebat cine a fost cel mai apropiat coleg Envato, ceea ce ma făcut să mă întreb de personalul îndepărtat, în general, ceea ce ma întrebat: cine este cel mai îndepărtat dintre toți angajații aflați la distanță de la Envato?
Verificați infografia finală pe notele Envato!
Nu ar trebui să subliniez originile cuvântului Infographic. Dar voi. Este o amalgamare informație și grafic, destul de literal informația reprezentată grafic. S-ar putea să auziți și acest termen vizualizarea datelor, care descrie din nou ceea ce privim aici.
Infographics urmăresc să ia date, statistici, fapte, fragmente de cunoștințe și să le comunice vizual. În acest fel, atunci când sunt executate corect, infografiile prezintă o idee clară și eficientă, ceea ce altfel nu ar putea fi obținut de datele în stare brută (adică: o grămadă de numere).
Bima Arafah, în articolul său Resurse de design extrem de infografic: Privire de ansamblu, principii, sfaturi și exemple, identifică trei etape în cadrul infographics, trei elemente necesare pentru realizarea gloriei infografice:
Aceste trei etape se descompun în subsecțiuni ulterioare, dar prin abordarea lor vom transforma capodopera într-o manieră logică.
Să ne uităm la proiectarea unui infographic, folosind graficul Envato Remote Staff ca referință.
În primul rând, un infographic trebuie să aibă un motiv pentru a fi. Trebuie să aveți o întrebare pe care încercați să o răspundeți, un fapt puțin cunoscut pe care încercați să-l evidențiați, un argument convingător pe care încercați să îl depășiți. În cazul meu, am vrut pur și simplu să identific îndepărtate Membru al personalului Envato. Identificarea acestui individ ar fi rolul esențial al infografului meu.
Fără date, nu putem răspunde la întrebarea noastră, nu avem niciun mesaj pentru a comunica, așa că du-te și a lua niște. În colectarea datelor despre personalul de la distanță aveam nevoie de un pic de cooperare de la coechipierii mei de la Envato. Din fericire, ele sunt o mulțime de ajutor, așadar trimiterea a câte unul sau două e-mailuri eșantionate impersonale era tot ce aveam nevoie pentru a face rostogolirea mingii. Adam și Amanda s-au apucat imediat, înființând o hartă Google, în care populația își putea adăuga locațiile și detaliile. Trebuia să stau în spate și să privesc programul meu.
De fapt, a fost foarte interesant să vedem exact unde locuiește fiecare membru al personalului în raport cu restul. Drept urmare, toată lumea era dornică să se scufunde și să contribuie.
Odată ce am avut o încărcătură de informații (încă există un număr mare de recenzori și personal de suport care au ratat memo-ul, dar nu am putut să-i urmăresc pe fiecare în parte), am folosit instrumentul vector Google Maps util pentru a desena linii între markeri, în relație cu celelalte și, de asemenea, cu sediul central în Melbourne.
Ei bine, asta este Vectortuts+.
Apoi am pregătit o foaie de calcul cu toate figurile pe care le-am colectat (33 de membri). Făcând acest lucru a fost tocmai dovada că am avut nevoie de un infograf!
Nu este foarte ușor să subliniez ce se întâmpla, dar cel puțin aș putea ordona coloanele și să pot stabili rapid clasamentele. Am fost destul de surprins să aflu asta eu era mai departe de Melbourne decât oricine altcineva! Văzute pe un ecran plat, cu siguranță nu pare să fie cazul, dar vectorii Google țin cont de curbură pe pământ. Nu este doar un suport pentru pălării, prietene.
OK, așa că am tratat primele trei etape. După ce mi-am rotunjit faptele și cifrele, era clar că tipuri de informații au fost spațioase și cantitative. Aș putea apoi să iau o decizie în cunoștință de cauză și să determin stadiul doi, a mea dispozitivul infografic. M-aș uita la afișarea hărților și a graficelor pentru a comunica datele mele, așa că acum să ne uităm la îngustarea opțiunilor dispozitivului.
Colectarea tuturor informațiilor posibile înainte de a lua în considerare și grafica vă va ajuta foarte mult. Scopul dvs. este de a comunica cât mai eficient impactul datelor dvs. Dacă nu știți încă cât de mari vor fi numerele dvs., nu puteți judeca în mod corespunzător consecințele pe care le afișați.
Modul în care proiectați graficele dvs. este o discuție deschisă, dar există linii directoare cu privire la tipul de grafic utilizat pentru afișarea optimă a datelor. Există 4 tipuri principale de grafice recunoscute:
La fel cum am crezut! Badgers au tendința de a obține mai mult pe măsură ce devin mai grele.
Unde am fost? ? Ah, da. Dacă ne uităm la distanțele noastre de la Melbourne, cea mai clară cale de a afișa informațiile este pe bază individuală. Trăind la chase, putem presupune că o diagramă de bare este cea mai bună cale de a merge. Oricine trăiește cel mai departe va avea cel mai lung bar, cel mai apropiat va avea cel mai scurt.
Folosind o diagramă de bare nu sună foarte inspirat, nu-i așa? Diagramele de bare mă fac să mă gândesc să stau în fața unui drum care efectuează un recensământ de circulație pentru școală. Frumusețea proiectării unui infographic este libertatea de a juca cu echilibrul dintre formă și funcție. Nu putem permite ca lucrarea noastră de proiectare să încetinească mesajul, dar cu siguranță putem folosi puțină flamboyance.
Imaginea de mai sus arată o diagramă de bare. Reprezintă perfect informațiile; fiecare individ și distanța față de ceea ce măsuram. Nu este extrem de atractivă și, mai problematic, ar fi enorm dacă am fi complotat 33 de persoane. De fapt, atunci ar fi destul de nepractic, deoarece compararea persoanei de la extrema dreaptă cu persoana de pe extrema stângă ar deveni din ce în ce mai dificilă cu cât mai mulți oameni am adăugat. Să simplificăm lucrurile.
Prin condensarea întregului lot într-un bar (deși este încă o diagramă de bare) am realizat mai multe lucruri.
Să folosim lățimea paginii noastre și să simpliim lucrurile în continuare.
Bara noastră finală face întregul efect la fel de simplu ca și cum ar putea fi, concentrându-se privitorul asupra a ceea ce este important: datele. Nu este nevoie să identificăm fiecare individ, dar puteți face clar distanța cea mai mare, distanța cea mai scurtă și intervalul și distanța dintre distanțe. Misiune indeplinita!
Obiectivul nostru este să comunicăm mesajul nostru în clipi. Nu este probabil ca cititorii noștri să examineze datele, așa că trebuie să ne asigurăm că nu prezentăm lucrurile în mod disproporționat. Nu vrem să fim înșelătoare acum, nu-i așa?? ?
Am dat peste următoarea situație din infografia mea; două diagrame, ambele reprezentând toți membrii personalului și distanțe de un fel.
Nu foarte clar, așa că nu aș lăsa acolo. Diagrama de top reprezintă distanța dintre fiecare membru al personalului din Melbourne, după ce zboară. Diagrama de jos ilustrează distanța dintre fiecare membru al personalului de la cel mai apropiat alt membru al personalului său.
Ce este clar în fiecare diagramă este care dintre markere are cea mai mare distanță. Distribuția brută este, de asemenea, descifrată, dar real distanțele nu sunt clare. Trebuie să le etichetăm.
Mai bine. Deși, încă mai cădem într-o capcană. Am folosit bare de lățime uniformă pentru că, bine, suntem designeri și am simțit că ne-au montat mai bine esteticul în felul acesta. Chiar dacă am etichetat distanțele pe ele, ar putea fi totuși confundate ca fiind exact la aceeași lungime, vizual și simbolic. Trebuie să ne asigurăm că cititorul înțelege diferența esențială a scării, în caz contrar prezentăm datele greșite.
Să adăugăm un indiciu suplimentar.
Mai bine încă. Cu liniile noastre punctate am sugerat că există mai multe unități de măsură în graficul superior. Nu există nici o modalitate corectă sau greșită de depășire a acestor detalii, dar întotdeauna să aveți în vedere modul în care prezentați fiecare bucată de date rudă la restul.
A sosit momentul să decidem cum va arăta acest infographic. Doi factori principali au jucat un rol în deciziile mele de stil: scopul său a fost să fie postat pe Note, blogul comunității Envato și se concentrează pe hărți.
Blogul Notes are un antet întunecat, texturat. Decizia o îngrijea! Un fundal întunecat, subtil, zgomot ar fi perfect pentru afișarea datelor.
Formatul graficului meu ar fi, de asemenea, dictat de blogul Notes; posturile nu au imagini mai largi decât 660 de pixeli, deci, dacă aș fi dorit graficul afișat la scară completă, aceasta ar fi limita mea. Infografiile lungi, înguste nu sunt neobișnuite și conduc ochiul logic prin intermediul datelor în orice caz. Aproape că ne propunem să povestim o poveste - la fel ca și în cazul unei benzi desenate, dorim să avem control asupra a ceea ce sa văzut și în ce ordine. Un grafic alungit mi-ar permite să pun un "ceva" concluziv în partea de jos, împachetând povestea frumos.
Întregul motiv pentru a mă îmbarca pe acest infographic a fost să aflu care membru al personalului a trăit cel mai îndepărtat în raport cu ceilalți. Aceasta ar fi concluzia mea și toate celelalte date ar duce ochiul la acea informație.
La decizia a treia. Hărțile au mase de elemente vizuale, toate propriile lor; legende, scări, contururi, pentru a numi câteva. Lucram cu Google Maps pentru a compila datele, deci markerii de hartă au jucat un rol important. (De fapt am vrut să furnizez un paragraf informativ despre originea marcajului Google, dar nu pot să găsesc nici o informație despre asta!) Dacă cineva are resurse decente pentru a explica procesul inițial de design, vă rugăm să lăsați link-urile în comentarii! )
Marcatorii de hărți Google reprezintă un exemplu de strălucire a designului. Ele sunt simple, ușor de recunoscut, versatile (având culori și conținut modificabile) și efectuează perfect o funcție crucială; ei pun în evidență o locație precisă oferind în același timp o zonă de clic mare pentru utilizatori.
Google Map Marker de către [Mooi], pe Flickr.
Am decis că vor fi perfecți în scopuri decorative și (evident) pentru a identifica fiecare membru al personalului. Ei ar fi perfecta "metaforă de date"; o modalitate de a ilustra subiectul meu. Am desenat o mică colecție (pe care o veți găsi în descărcarea sursei).
Rezultatul a fost un fundal întunecat, zgomotos, cu o gamă de tonuri colorate grație markerilor. Un punct de plecare ideal pentru vizuale.
Am o serie de statistici pe care să le împărtășesc; datele personale ale membrilor personalului, distanța fiecărei persoane (ca zborul de zbor) către H.Q. în Melbourne, numărul relativ de membri ai personalului de sex masculin și de sex feminin, fusurile orare și, în sfârșit, cine este cel mai îndepărtat membru al personalului.
Fiecare secțiune necesită o separare clară de celelalte, rămânând însă în mod clar legată. Aș folosi elemente comune în fiecare dintre ele (titlu, scurtă descriere, grafică, statistici suplimentare), dar aș fi colorat fiecare în mod diferit. Culorile marcatorilor mei de hartă au fost perfecte pentru a separa fiecare secțiune, așa că m-aș baza pe ele pentru paletă.
Aveam nevoie de o hartă pe care să-mi plasez markerii. Un pic de googling ma condus la http://english.freemap.jp unde am putut sa descarc o hartă vectorială perfectă a lumii.
În mod clar, nu aveam nevoie de întreaga hartă în toate detaliile ei glorioase, dar era prezentată perfect în straturi pe care le puteam îndepărta. Înarmat cu contururile de masă pământă pură, lipită în documentul meu cu transparență de 10%, am terminat.
În cele din urmă, trebuia să mă gândesc la extrasul vizual; detaliile pe care le-am putut purta în întreaga grafică pentru decorarea adăugată și care ar lega totul împreună. Dungi și săgeți sparte! Prietenii vechi de încredere ai designerului infografic.
O linie punctată aici?
? altul aici?
? unul acolo?
(În timp ce privim ceasul, merită menționat faptul că imaginea circulară a distrus frumos natura orizontală și verticală a întregului grafic.)
? și una finală aici!
Nu numai că liniile leagă vizual toate secțiunile, dar direcționează ochiul cititorului și dau impresia de energie. În cazul în care infografiul dvs. nu arata destul de infografic, lipiți niște linii punctate acolo.
Bine, am ajuns la capătul liniei. Este timpul să vă asigurați că ați făcut referire la sursele dvs. (după tot timpul petrecut făcând lucrurile să arate destul, oamenii trebuie să fie siguri că nu ați scos datele dvs. din aer subțiri). Și ați terminat!
Sper că examinarea acestui flux de lucru v-a inspirat să vă abordați propriile informații infografice, este foarte distractiv cu datele potrivite!
Înainte de a încheia lucrurile, iată câteva puncte tehnice care au apărut în timpul realizării infografice a personalului de la distanță Envato. Le puteți găsi utile.
În câteva ocazii m-am trezit uitându-mă la o nebunie de marcatori de hartă - nu am putut spune cu ușurință câți am plasat pe graficele mele. Încercați să numărați marcatorii de mai jos:
Vedeți punctul meu de vedere? Pentru a vă asigura că aveți o cantitate corectă de obiecte în astfel de situații, lăsați Illustrator să lucreze pentru dvs. Selectați toate obiectele pe care doriți să le numărați, apoi mergeți la Fereastra> Informații despre document, bifați "Numai selecție" și "Obiecte".
Bingo! Din fereastra Document Info puteți vedea că am selectat 33 de simboluri. Doar ce vroiam.
Adăugând un pic de zgomot în fundal a înmuiat lucrurile și a adus graficul plăcut în linie cu blog-ul Envato Notes. În mod realist, există două abordări pentru a face acest lucru.
Crearea texturii de zgomot în Illustrator nu este deloc dificilă, dar dacă aveți problema Google, mulți oameni par să nu știe cum se face. Este pur și simplu o problemă de a aplica o textură de cereale la aspectul obiectului de fundal. Vom juca cu ideea ușor și vom aplica textură unui obiect transparent de mai sus culoarea de fundal.
Începem cu obiectul de fundal plat color:
Apoi plasăm un dreptunghi alb deasupra ei. La acest dreptunghi se aplică un filtru prin trecerea Efect> Textură> Cereale?
Opțiunile pe care le-am folosit au fost de 10% intensitate, contrast de 50% și "scobit" ca tip de boabe. Redați-vă aici - există multe efecte pe care le puteți obține. Acesta este rezultatul:
Dați obiectului o transparență înmulțită de 20% și ar trebui să creeze mai mult sau mai puțin ceea ce urmează. Puteți continua să atenuați efectul prin adăugarea unui obiect gaussian neclare. Iată ce a apărut Illustrator - efectele combinate sunt vizibile în panoul Aspect:
E subtil, o să fiu de acord.
Deci, treaba.
Din păcate, există o problemă cu abordarea provocării cu zgomot în acest fel: dimensiunea fișierului și CPU. Prin acordarea obiectului de fundal un pic de zgomot am crescut această dimensiune a fișierului de la 5Mb la 45Mb - și performanța a suferit cu adevărat.
Alternativa face un bitmap în Photoshop. Deci, plecați, completați fundalul unui document nou cu o culoare adecvată și adăugați un zgomot prin accesarea Filtrare> Zgomot> Adăugare zgomot. Salvați la rezoluția ecranului și aruncați fișierul în Illustrator. Uşor.
Un pic de zgomot adaugă un sentiment cald, drăguț la cele mai multe zone plate.
Așa că mergeți - două abordări pentru a adăuga zgomot. Depinde în întregime de dvs. în ce mod îl rezolviți.
Probabilitatea este că infograficul dvs. va folosi elemente vizuale repetate, dar nu doar copiați și lipiți lucrurile peste tot, utilizați simboluri.
În cazul meu am marcaje de hartă punctate în jurul tabloului de bord. Ne uităm la sute de marcatori, dar sunt repetate instanțe de doar 6 simboluri. Să facem repede simbolurile, atunci vom discuta avantajele acestei abordări.
Începeți cu obiectul dvs. complex.
Trageți-l în panoul dvs. Simboluri (Windows> Simboluri), atribuiți-i un nume și apăsați OK.
Ești proprietarul mândru al unui simbol! Acum, că aveți atârnat de ea, faceți cât doriți; Aveam nevoie de o gamă de culori, pregătite astfel de șapte markeri.
Odată ce ați construit o colecție de simboluri, vă recomandăm să le salvați ca o bibliotecă pentru utilizare ulterioară. Cu panoul Simbol care afișează colecția dvs., faceți clic pe meniul "Biblioteci de simboluri" și selectați "Salvați simbolurile?". Veți fi solicitat să salvați biblioteca ca fișier .ai în sistemul dvs. (utilizați un nume de fișier adecvat, astfel încât să îl recunoașteți).
După ce ați terminat, încărcarea bibliotecii în orice document viitor este la fel de simplă ca și deschiderea panoului Simboluri, făcând clic pe meniul "Biblioteci de simboluri", derulând în jos la "User Defined" și selectând biblioteca.
Pentru a avea o bibliotecă deschisă automat când porniți Illustrator, bifați "Persistent" din meniul panoului bibliotecii.
Pentru a folosi simbolurile în document, trageți-le direct din panoul Simboluri sau selectați unul și faceți clic pe "Place Simbol Instance". Puteți plasa cât doriți?
Există trei avantaje distincte în utilizarea simbolurilor, să le aruncăm o privire.
Poate că v-ați plasat toate marcatorii, dar apoi ați realizat că trebuie să schimbați modul în care arată. Nu doriți să înlocuiți fiecare manual, și aici vine primul beneficiu al utilizării simbolurilor. Faceți dublu clic pe un simbol (fie în tabloul de bord sau în panoul Simboluri) și veți intra în modul de izolare. Cu acel simbol izolat, puteți să îl modificați.
Modul de izolare
Orice modificări pe care le faceți vor afecta fiecare exemplu al acestui simbol în documentul dvs..
Google ar trebui să facă acest lucru cu siguranță.
Acest lucru este foarte util în cazul nostru, deoarece am poziționat markeri în anumite locuri; nu vrem să se mute în mod inutil. Avem o grămadă de markeri verzi, dar vrem ca unii dintre ei să fie roșii în schimb. Selectați marcajele în cauză și asigurați-vă că bara de control (Fereastră> Control) este vizibilă. Veți vedea un mic panou drop-down denumit "Înlocuire" - în el veți găsi toate simbolurile aflate în prezent în panoul Simboluri. Faceți clic pe marcajul roșu și pe exemplele de simbol selectate vor fi schimbate.
Poate că este unul evident, dar dacă minimizarea dimensiunii fișierului este importantă pentru tine, atunci simbolurile au spatele. În exemplul de mai jos am salvat două fișiere, fiecare cu 700 de marcatori pe tabloul de bord. Unul a fost făcut cu exemple de simboluri, celălalt cu obiecte complexe - diferența este destul de clară?
Ultima imagine infografică (prezentată mai jos) postată inițial pe Envato Notes!
Asta e! Vă mulțumim pentru citire și vă rugăm să împărtășiți orice sfaturi și sfaturi suplimentare în comentariile!
Accentsconagua