Share
Een paar weken geleden heb ik een infographic samengesteld om enkele feiten en cijfers over de Remote Staff van Envato te benadrukken. Laten we eens kijken naar enkele van de besluitvorming, workflow en technieken die zijn gegaan om het te maken.
Ik heb onlangs stokjes opgestoken en ben van Valencia in Spanje naar Bordeaux in Frankrijk verhuisd - de luxe van vrijheid die op afstand werkt. Omdat ik ergens anders was, vroeg ik me af wie mijn dichtstbijzijnde Envato-collega was, waardoor ik me afvroeg wat het personeel op afstand in het algemeen deed, waardoor ik me afvroeg: wie de verste is van alle Envato-medewerkers op afstand?
Bekijk de laatste infographic over Envato Notes!
Ik hoef niet te wijzen op de oorsprong van het woord Infographic. Maar ik zal. Het is een samensmelting van informatie en grafisch, vrij letterlijk informatie grafisch weergegeven. Je hoort misschien ook de term data visualisatie, wat opnieuw beschrijft waar we hier naar kijken.
Infographics streeft ernaar gegevens, statistieken, feiten, fragmenten van kennis te verzamelen en deze visueel te communiceren. Wanneer dit goed wordt gedaan, presenteert infographics een idee duidelijk en effectief, wat anders niet zou worden bereikt door de gegevens in de onbewerkte staat (dat wil zeggen: een hoop getallen)..
Bima Arafah, in zijn artikel Huge Infographics Design Resources: Overview, Principles, Tips and Examples, identificeert drie stadia van het infografiekader, drie vereiste elementen voor het bereiken van infographic glorie:
Deze drie fasen gaan over in verdere subsecties, maar door ze op hun beurt weer aan te pakken, zullen we ons meesterwerk op een logische manier formuleren.
Laten we kijken naar het ontwerpen van een infographic, met behulp van de Envato Remote Staff-afbeelding als referentie.
Eerst en vooral moet een infographic een reden hebben om te bestaan. Er moet een vraag zijn die je probeert te beantwoorden, een onbekend feit dat je probeert te benadrukken, een overtuigend argument dat je probeert over te brengen. In mijn geval wilde ik eenvoudig het verste Envato-medewerker. Het wijzen op deze persoon zou de essentiële rol van mijn infographic kunnen zijn.
Zonder gegevens kunnen we onze vraag niet beantwoorden, we hebben geen boodschap om te communiceren, dus ga er een paar halen. Bij het verzamelen van gegevens van externe medewerkers had ik wat hulp nodig van mijn teamgenoten bij Envato. Gelukkig zijn ze een nuttig stel, dus het sturen van een of twee onpersoonlijke batch-e-mails was alles wat ik nodig had om de bal aan het rollen te krijgen. Adam en Amanda sprongen allebei meteen in, en zetten een Google-kaart op waarop folk hun locaties en details kon toevoegen. Ik moest gewoon achterover leunen en kijken hoe mijn schema ontvouwde.
Het was eigenlijk heel interessant om precies te zien waar elk personeelslid leeft in relatie tot de rest. Dientengevolge wilde iedereen er graag in duiken en een bijdrage leveren.
Toen ik eenmaal veel info had (er zijn nog steeds een groot aantal recensenten en ondersteunend personeel die de memo hebben gemist, maar ik kon niet iedereen individueel achtervolgen), gebruikte ik de handige vectortool van Google Maps om lijnen tussen de markeringen te tekenen, in relatie tot elkaar en ook het hoofdkwartier in Melbourne.
Welnu, dit is het Vectortuts+.
Vervolgens maakte ik een spreadsheet met alle cijfers die ik had verzameld (waarde van 33 leden). Dit was al het bewijs dat ik nodig had dat een infographic nodig was!
Het was niet bepaald eenvoudig om vast te stellen wat er aan de hand was, maar ik kon in ieder geval de kolommen bestellen en snel een rangorde bepalen. Ik was behoorlijk verrast om dat te vinden ik was verder weg van Melbourne dan wie dan ook! Bekeken op een flatscreen lijkt dit zeker niet het geval te zijn, maar de vectoren van Google nemen listig de kromming van de aarde in aanmerking. Niet alleen een hoedenrek, mijn vriend.
OK, dus we hebben de eerste behandeld in onze drie fasen. Nadat ik mijn feiten en cijfers had afgerond, was het duidelijk dat het informatie types waren ruimtelijk en kwantitatief. Ik zou dan een weloverwogen beslissing kunnen nemen en fase twee kunnen bepalen, mijn infographic apparaat. Ik zou kaarten en grafieken willen weergeven om mijn gegevens te communiceren, dus laten we nu eens kijken naar het verfijnen van die apparaatopties.
Het verzamelen van alle mogelijke informatie voordat je de graphics in overweging neemt, zal je enorm helpen. Uw doel is om zo effectief mogelijk te communiceren over de impact van uw gegevens. Als u nog niet weet hoe groot uw aantallen zullen zijn, kunt u de gevolgen van wat u weergeeft niet goed beoordelen.
Hoe u uw grafieken ontwerpt, is een open discussie, maar er zijn richtlijnen met betrekking tot het type grafiek dat u gebruikt om uw gegevens optimaal weer te geven. Er zijn 4 belangrijkste herkenbare grafiektypen:
Net zoals ik dacht! Dassen hebben de neiging langer te worden naarmate ze zwaarder worden.
Waar was ik? ? Ah ja. Als we kijken naar onze afstanden van Melbourne, is de duidelijkste manier om de informatie weer te geven op individuele basis. Vooruitstrevend kunnen we aannemen dat een staafdiagram de beste manier is om te gaan. Wie het verst leeft, heeft de langste bar, wie het dichtst bij is, heeft de kortste.
Het gebruik van een staafdiagram klinkt echter niet erg inspirerend, nietwaar? Staafdiagrammen doen me denken aan het staan aan de kant van een weg die een verkeerscensus voor school uitvoert. De schoonheid van het ontwerpen van een infographic is de vrijheid om te spelen met de balans tussen vorm en functie. We kunnen niet toestaan dat ons ontwerpwerk de boodschap in de weg zit, maar we kunnen zeker een beetje flamboyance gebruiken.
De afbeelding hierboven toont een staafdiagram. Het vertegenwoordigt de informatie perfect; elk individu en zijn afstand tot alles wat we meten. Het is niet enorm aantrekkelijk en, problematischer, zou het enorm zijn als we 33 mensen zouden plotten. Het zou dan eigenlijk behoorlijk onpraktisch zijn, omdat het vergelijken van de persoon uiterst rechts met de meest linkse persoon steeds moeilijker zou worden naarmate we meer mensen toevoegen. Laten we dingen vereenvoudigen.
Door het hele perceel in één balk te condenseren (hoewel het nog steeds een staafdiagram is), hebben we verschillende dingen bereikt.
Laten we gebruik maken van onze paginabreedte en dingen verder vereenvoudigen.
Onze laatste balk maakt het hele effect zo eenvoudig als maar kan, waarbij de aandacht van de kijker wordt gericht op wat belangrijk is: de gegevens. We hoeven niet elk individu te identificeren, maar je kunt duidelijk de grootste afstand, de kortste afstand en het bereik en de verdeling van de afstanden ertussen onderscheiden. Missie volbracht!
We zijn gericht op het communiceren van onze boodschap in een oogwenk. Het is onwaarschijnlijk dat onze lezers de gegevens kritisch zullen bekijken, dus we moeten ervoor zorgen dat we de dingen niet onevenredig presenteren. We zouden nu niet misleidend willen zijn, of niet? ?
Ik kwam de volgende situatie tegen in mijn infographic; twee grafieken, die alle personeelsleden en afstanden van een of andere soort vertegenwoordigen.
Niet erg duidelijk, dus natuurlijk zou ik het daar niet laten. De bovenste grafiek geeft de afstand weer die elk personeelslid in hemelsnaam van Melbourne is. De onderste kaart illustreert de afstand die elke medewerker heeft van zijn of haar dichtstbijzijnde andere medewerker.
Wat in elke grafiek duidelijk is, is welke van de markeringen de grootste afstand inneemt. De ruwe verdeling is ook te ontcijferen, maar de werkelijk afstanden zijn niet duidelijk. We moeten ze labelen.
Beter. Maar we vallen nog steeds in de val. We hebben balken met een uniforme breedte gebruikt, omdat we ontwerpers zijn, en we voelden dat ze onze esthetiek beter op die manier pasten. Hoewel we de afstanden op hen hebben gelabeld, kunnen ze nog steeds verward worden als exact dezelfde lengte, visueel en symbolisch. We moeten ervoor zorgen dat de lezer het cruciale schaalverschil begrijpt, anders stellen we de gegevens verkeerd voor.
Laten we een extra aanwijzing toevoegen.
Nog steeds beter. Met onze stippellijnen hebben we gesuggereerd dat er meer meeteenheden in de bovenste grafiek staan. Er is geen goede of slechte manier om deze details te overwinnen, maar houd altijd in gedachten hoe je elk stuk gegevens presenteert familielid aan de rest.
Het is tijd om te beslissen hoe deze infographic er uit gaat zien. Twee belangrijke factoren speelden een rol bij mijn stylingbeslissingen: het was gericht op het plaatsen op Notes, de Envato Community Blog, en het richt zich op kaarten.
Het Notes-blog heeft een donkere, getextureerde kop. Beslissing een voor gezorgd! Een donkere, subtiel lawaaierige achtergrond zou perfect zijn voor het weergeven van gegevens.
Het formaat van mijn afbeelding zou ook worden bepaald door het Notes-blog; berichten voorzien van afbeeldingen die niet breder zijn dan 660 px, dus als ik de afbeelding op volledige schaal zou willen weergeven, zou dat mijn limiet zijn. Lange, smalle infographics zijn niet ongewoon, en ze leiden in elk geval logischerwijs de ogen door de gegevens. We zijn bijna gericht op het vertellen van een verhaal - net zoals bij een stripverhaal we controle willen over het geziene en in welke volgorde. Een langgerekte afbeelding zou me in staat stellen om een afsluitend 'iets' helemaal onderaan te plaatsen, en het verhaal mooi in te pakken.
De reden dat ik aan deze infographic begon, was om erachter te komen welk personeelslid het meest op afstand leefde in relatie tot de anderen. Dat zou mijn conclusie zijn en alle andere gegevens zouden de aandacht op dat stuk informatie moeten vestigen.
Tot besluit drie. Kaarten hebben massa's visuele elementen die helemaal van hen zijn; legendes, schalen, contouren, om er maar een paar te noemen. Ik werkte met Google Maps om de gegevens te verzamelen, dus kaartmarkeringen hebben een grote rol gespeeld. (Ik wilde eigenlijk een informatieve paragraaf geven over de oorsprong van de Google-kaartmarkering, maar ik kan er geen informatie over vinden! Als iemand fatsoenlijke bronnen heeft die het oorspronkelijke ontwerpproces uitleggen, laat dan alstublieft links in de reacties achter! )
De kaartmarkeringen van Google zijn een voorbeeld van ontwerpschittering. Ze zijn eenvoudig, direct herkenbaar, veelzijdig (met veranderlijke kleuren en inhoud) en vervullen een cruciale functie perfect; ze wijzen op een precieze locatie en bieden een groot klikoppervlak voor gebruikers.
Google Map Marker van [Mooi], op Flickr.
Ik besloot dat ze perfect zouden zijn voor decoratieve doeleinden en (uiteraard) voor het identificeren van elk personeelslid. Ze zouden de perfecte 'gegevensmetafoor' zijn; een manier om mijn onderwerp te illustreren. Ik heb een kleine verzameling getekend (die u kunt vinden in de brondownload).
Het resultaat was een donkere, lawaaierige achtergrond met een kleurrijk bereik van tonen dankzij de markeringen. Een ideaal startpunt voor de beelden.
Ik heb een reeks statistieken om te delen; persoonlijke gegevens van personeelsleden, afstand van elke persoon (in vogelvlucht) tot H.Q. in Melbourne, het relatieve aantal mannelijke en vrouwelijke personeelsleden, tijdzones en, tot slot, wie het meest externe lid van het personeel is.
Elke sectie had een duidelijke segregatie van de anderen nodig, maar bleef duidelijk verbonden. Ik zou gemeenschappelijke elementen binnen elk element gebruiken (titel, korte beschrijving, grafische afbeelding, extra statistieken), maar ik zou ze allemaal anders kleuren. De kleuren van mijn kaartmarkeringen waren perfect voor het scheiden van elke sectie, dus ik zou erop vertrouwen voor het palet.
Ik had een kaart nodig waarop ik mijn markeringen kon plaatsen. Een beetje googlen leidde me naar http://english.freemap.jp waar ik een perfecte vectorkaart van de wereld kon downloaden.
Het was duidelijk dat ik de hele kaart niet in al zijn glorieuze details nodig had, maar het werd perfect gepresenteerd in lagen die ik kon verwijderen. Gewapend met de pure landmassa contouren, geplakt in mijn document met 10% transparantie, was ik klaar.
Ten slotte moest ik rekening houden met visuele extra's; details die ik in de hele afbeelding zou kunnen dragen voor extra decoratie en die alles bij elkaar zouden houden. Gestippelde lijnen en pijlen! De betrouwbare oude kameraden van de infographic-ontwerper.
Een stippellijn hier?
? een andere hier?
? een daar?
(Terwijl we naar de klok kijken, is het de moeite waard te vermelden dat de cirkelvormige afbeelding de horizontale en verticale aard van de hele afbeelding mooi heeft gebroken.)
? en een laatste hier!
Niet alleen verbinden de lijnen visueel alle secties, maar zij richten het oog van de lezer en geven de indruk van energie. Als uw infographic er niet voldoende infografisch uitziet, plakt u er stippellijnen in.
OK, we zijn aan het einde van de regel gekomen. Het is tijd om ervoor te zorgen dat u naar uw bronnen hebt verwezen (na alle tijd die u besteed hebt aan het uiterlijk van de dingen, hebben mensen behoefte aan zekerheid dat u uw gegevens niet zomaar uit de lucht hebt gehaald). En je bent klaar!
Ik hoop dat het onderzoeken van deze workflow je heeft geïnspireerd om je eigen infographic aan te pakken, het is erg leuk met de juiste gegevens!
Voordat ik het afrond, zijn hier een paar technische punten die naar voren kwamen tijdens het maken van de Envato Remote Staff-infographic. Misschien vindt u ze nuttig.
Bij een paar gelegenheden merkte ik dat ik een waas van kaartmarkeringen zag - ik kon niet gemakkelijk zien hoeveel ik op mijn kaarten had geplaatst. Probeer de onderstaande markeringen te tellen:
Zie je mijn punt? Zorg dat Illustrator het werk voor u doet om ervoor te zorgen dat u de juiste hoeveelheid objecten in dit soort situaties hebt. Selecteer alle objecten die u wilt tellen en ga vervolgens naar Venster> Documentinfo, schakel "Alleen selectie" en "Objecten" in.
Bingo! In het venster Documentinfo kunt u zien dat ik 33 symboolinstanties heb geselecteerd. Precies wat ik wilde.
Een beetje ruis toevoegen aan de achtergrond verzachtte de zaken en bracht de afbeelding aangenaam in lijn met het Envato Notes-blog. Realistisch gezien zijn er twee benaderingen om dit te doen.
Het maken van ruistextuur in Illustrator is helemaal niet moeilijk, maar als je Google het probleem opgeeft, lijken veel mensen zich niet bewust van hoe het werkt. Het is gewoon een kwestie van het aanbrengen van een korrelstructuur op het uiterlijk van je achtergrondobject. We gaan een beetje met het idee spelen en de textuur toepassen op een transparant object bovenstaande onze achtergrondkleur.
We beginnen met ons vlak gekleurde achtergrondobject:
Dan plaatsen we een witte rechthoek erboven. Aan die rechthoek passen we een filter toe door naar Effect> Textuur> Korrel te gaan?
De opties die ik gebruikte waren 10% intensiteit, 50% contrast en "gestippeld" als het graantype. Speel hier rond - er zijn heel veel effecten die je kunt bereiken. Dit is het resultaat:
Geef het object een transparantie van meer dan 20% en het zou min of meer moeten zorgen voor wat u zoekt. U kunt het effect verder verzachten door een gaussiaanse vervaging aan het object toe te voegen. Dit is wat Illustrator bedacht: de gecombineerde effecten zijn zichtbaar in het deelvenster Uiterlijk:
Het is subtiel, daar ben ik het mee eens.
Dus, klus geklaard.
Helaas is er een probleem met het op deze manier benaderen van de ruisuitdaging: bestandsgrootte en CPU. Door het achtergrondobject een beetje ruis te geven heb ik deze bestandsgrootte vergroot van 5Mb naar 45Mb - en de prestaties hebben echt geleden.
Het alternatief is het maken van een bitmap in Photoshop. Dus als je klaar bent, vul je de achtergrond van een nieuw document met een geschikte kleur en voeg je wat ruis toe door Filter> Ruis> Ruis toevoegen te gebruiken. Sla op schermresolutie op en gooi het bestand naar Illustrator. Gemakkelijk.
Een beetje geluid voegt een warm, knuffelig gevoel toe aan de meeste vlakke gebieden.
Dus daar ga je - twee manieren om ruis toe te voegen. Het is helemaal aan jou hoe je het aanpakt.
De kans is groot dat uw infographic herhaalde visuele elementen gebruikt, maar kopieer en plak dingen niet overal, gebruik symbolen.
In mijn geval heb ik kaartmarkeringen verspreid over het tekengebied. We kijken naar honderden markeringen, maar het zijn herhaalde voorbeelden van slechts zes symbolen. Laten we snel de symbolen maken, dan bespreken we de voordelen van deze aanpak.
Begin met je complexe object.
Sleep het naar uw paneel Symbolen (Windows> Symbolen), wijs er een naam aan toe en druk op OK.
Jij bent de trotse bezitter van een symbool! Nu je het onder de knie hebt, maak er zoveel als je wilt; Ik had een reeks kleuren nodig, dus bereidde ik zeven markeringen voor.
Nadat u een verzameling symbolen hebt gemaakt, is het misschien handig om ze als een bibliotheek op te slaan voor toekomstig gebruik. Klik in het deelvenster Symbool met uw verzameling op het menu "Symboolbibliotheken" en selecteer "Symbolen opslaan?". U wordt gevraagd om de bibliotheek op te slaan als een .ai-bestand op uw systeem (gebruik een geschikte bestandsnaam, zodat u het zult herkennen).
Eenmaal voltooid, is het laden van uw bibliotheek in een toekomstig document net zo eenvoudig als het openen van het paneel Symbolen, klikken op het menu "Symboolbibliotheken", omlaag scrollen naar "Door gebruiker gedefinieerd" en uw bibliotheek selecteren.
Als u wilt dat een bibliotheek automatisch wordt geopend wanneer u Illustrator start, vinkt u "Persistent" aan in het deelvenstermenu van die bibliotheek.
Als u symbolen in uw document wilt gebruiken, sleept u ze rechtstreeks vanuit het deelvenster Symbolen of selecteert u er een en klikt u op "Plaats symboolinstantie". Je kunt zoveel plaatsen als je wilt?
Er zijn drie duidelijke voordelen aan het gebruik van symbolen. Laten we ze eens bekijken.
Misschien heb je al je markeringen geplaatst, maar toen besefte je dat je de manier moest veranderen waarop ze eruit zien. U wilt ze niet allemaal handmatig vervangen, en dat is waar het eerste voordeel van het gebruik van symbolen bij komt kijken. Dubbelklik op een symbool (op uw tekengebied of in het deelvenster Symbolen) en u gaat naar de isolatiemodus. Met dat symbool geïsoleerd, kun je weg bewerken.
Isolatiemodus
Alle wijzigingen die u aanbrengt, zijn van invloed elk instantie van dat symbool in uw document.
Google zou dit zeker moeten doen.
Dit is met name handig in ons geval, omdat we markeringen op specifieke plaatsen hebben gepositioneerd; we willen niet dat ze onnodig bewegen. We hebben een stapel groene markeringen, maar we willen dat een paar van hen in plaats daarvan rood zijn. Selecteer de betreffende markeringen en zorg dat de bedieningsbalk (Venster> Controle) zichtbaar is. Je ziet een klein drop-down paneel met de naam "Vervangen" - daarin vind je alle symbolen die zich momenteel in het paneel Symbolen bevinden. Klik op de rode markering en de geselecteerde symboolinstanties worden omgewisseld.
Misschien een voor de hand liggend, maar als het minimaliseren van de bestandsgrootte belangrijk voor u is, dan hebben symbolen uw rug. In het onderstaande voorbeeld heb ik twee bestanden opgeslagen, elk met 700 markeringen op een tekengebied. De ene is gemaakt met instanties van symbolen, de andere met complexe objecten - het verschil is vrij duidelijk?
De laatste infographic (hieronder weergegeven) is oorspronkelijk gepost op Envato Notes!
Dat is het! Bedankt voor het lezen en deel alle verdere tips en adviezen in de opmerkingen!
Accentsconagua