Barion Pixel
Segédlet

Hogyan készíts infografikát?

2021. augusztus 20. | Bognár Péter

# # # # # #

Az internet egyik kedvenc tartalomtípusa az infografika, ami nem is csoda, hiszen a szemnek kellemes, könnyen befogadható módon magyaráz el valami olyan témát a közönségnek, ami természetesen nagyon érdekel mindenkit – és bárki bármit állít, mindenki szeret jól értesültnek látszani, új dolgokat tanulni pedig szexi. A műfaj másik neve az adatvizualizáció, hiszen a kompozíciókban adatokat jelenítünk meg vizuálisan, azonnal, de legalábbis nagyon kis energiabefektetéssel megérthető módon. Az infografikáknak még egy hatalmas előnye van – rettentő jól oszthatóak a különböző közösségi platformokon. Egy kurrens, vagy éppen meglepő témában összerakott, jól megtervezett infografikának hatalmas esélye van arra, hogy sokan megosszák a különböző falaikon, ami ügyes taktikázással hatalmasat dobhat az oldalad látogatottságán – ez pedig cserébe a keresőoptimalizáció (SEO) területén tolhatja érzékelhetően feljebb a pozíciódat. (A cikk végén erre is kicsit részletesebben kitérünk majd.) 

A kérdés tehát, hogy hogyan juthatsz te is egy ilyen csodás grafikához? A válasz egyszerű: csinálni kell egyet. 😉 A probléma persze ott kezdődik, hogy az ember minél többet gondolkozik rajta, annál bonyolultabbnak és összetettebbnek tűnik a feladat, ezért bátorításképpen megpróbálok néhány hasznos támpontot és tanácsot adni. 

Válassz témát!

Ha a töprengés attól a kérdéstől indul, hogy “de mi a fenét jelenítsek meg?” (gombhoz a kabátot, ahogy mondani szokták), akkor a cikkíráshoz hasonló módon, meg kell találnod azt a témát, ami:

  • passzol az oldalad témájához, lehetőleg egy vagy több fontos kulcsszót lefed,
  • értelemszerűen valami számokban kifejezhető, fontos, hogy rendelkezésre álljon részletesebb, a kérdést több szempontból is bemutató statisztika (egy vagy két számból nehezen lesz grafika),
  • az sem árt, ha a téma, vagy a bemutatott számok meglepőek (akár sokkolóak is lehetnek), avagy valami olyan témára mutatnak rá, ami sokakat foglalkoztat, vagy sokakat felderít. (Az emberi tudásvágy nem a Nemzeti Alaptanterv – a könnyed, vicces témák talán még kapósabbak is a komoly, nevelő célzatúaknál.)

Ha véletlenül organikusan jött a lehetőség, és rájöttél hogy egy izgis témát nagyon szépen fel lehetne így dolgozni, vagy esetleg a megbízótól/ügyféltől kapod készen az adatokat, akkor hajrá, jöhet a kreatív rész. Ha viszont nem, akkor nincs pardon, a következő lépés a:

Kutatás

Járd körül a témát alaposan! A Google a barátod, de a Bing, Ecosia és társaik is hozhatnak eredményeket 😄. Ha nem specifikusan magyar témáról van szó, mindenképpen a nemzetközi, lehetőleg angol nyelvű oldalakon kezdd a keresést. Ez nem sznobizmus, egyszerűen mivel ez a modern lingua franca, angolul biztosan megírnak minden témát, és a legtöbbször a magyar nyelven írt cikkek is már ugyanannak a 2-3 eredeti angolnak a feldolgozásai lesznek. (Ha véletlenül más országokból származó témáról van szó, érdemes lehet – akár fordító szoftver segítségével – megvizsgálni az elsődleges anyagokat, és ennek fényében nézni meg az angol és magyar cikkeket.) 

Fontos lehet még, hogy próbálj eljutni a forrásig – az, hogy valaki egy témával elöl van a böngészőben, nem feltétlenül jelenti azt, hogy ő írta meg legelőször vagy a legalaposabban, csak azt, hogy jó a SEO-ja. Rövid szemlézés után már lehet látni, ki az, akire mindenki hivatkozik, oda kell neked is menni. A forrásaidat illik megjelölni: vagy a grafikák mellett utalni rá, kitől származnak az adatok, vagy – ami komolyabban vehető fényben tűntet fel, – a kép alján, apró betűvel, névvel és linkkel együtt tedd be a fontos cikkeket. Nem baj, ha több is van, ez csak a hitelességedet fogja alátámasztani.

MI a teendő, ha kutatás közben már létező, hasonló infografikákkal találkozol? Ne keseredj el, az internet nagy, rengeteg olyan téma van, amit már egy tucatnyian megrajzoltak. A múltkoti, az internet karbonlábnyomáról írt cikkem kapcsán is egy szekárderéknyival találkoztam, íme néhány példa:

Ebben a helyzetben használd fel nyersanyagként a mások grafikáit is: nézd meg, hogyan dolgozták fel ugyanazokat a számokat (esetleg találtak-e másokat), és gondolkozz el rajta, hogyan lehetne másképp, frissebben megoldani ugyanezt – az ilyen kötöttségek a legtöbbször éppen, hogy inspirálóan hatnak a kreatív munkában. 

Tervezd meg!

Ha már összejött a tudás, a következő kérdés, hogy hogyan tálalod. Az infografika lényege, hogy elmeséli az adatokat – a grafikának kontextusba kell helyeznie a számokat, meg kell teremteni a megfelelő hangulatot (optimista – pesszimista, bizakodó vagy vészcsengőt nyomogató, stb.), és a számokat első pillantásra érezhetőve kell tennie – rögtön tudnunk kell, hogy ez most sok vagy kevés

Mindemellett persze egy egységes design-koncepcióra is szükség van, hogy karakteres, áttekinthető stílusa legyen az egész alkotásnak. Néhány alapelv:

  • Rendezd valamilyen hierarchiába az adatokat: mi a legfontosabb, mi következik miből? A legfontosabb adatokat az elején akarod elmondani és utána a részleteket, vagy éppen a végére kerül egy csattanó?
  • Gondosan válaszd meg az alapvető színpalettát. Néhány főszín határozza meg az egész grafika karakterét, hogy megőrizd az egységes megjelenést.
  • Döntsd el, hogyan jelenítsd meg a számokat, mi a legmegfelelőbb, legcélravezetőbb vizualizáció. Ha egymással ütköztetett adatokat mutatsz be, hasznosak lehetenek a grafikonok, diagramok. Ha valaminek a történetét vagy fejlődését mutatnád be, adja magát az időegyenes jellegű megjelenítés, ha pedig egy témával kapcsolatos különböző, de egymással össze nem függő adatokat mutatsz be, jól használható a piktogramos megközelítés.
  • Gondold át, nem adsz-e valamilyen általános grafikus keretet a témához: a háttér egyszerűen egy színes/színátmenetes téglalap lesz, vagy illusztrációként grafikai elemekkel, figurákkal erősíti a témát?

Ha néhány alapvető döntést meghoztál, vázlatkészítés közben érdemes még egyszer végigmenni az összegyűjtött adatokon, és átgondolni, hogy egyrészt van-e olyan közöttük, ami kihagyható, azaz csak a sűrítést szolgálná, másfelől van-e olyan rész, ami esetleg túl kevés adatot kapott, és érezhetően lyukassá tenné a designt. 

Az infografika általában alapkiszerelésben függőleges tájolású – úgy tervezd meg, hogy mobiltelefonon gördítve is érthető és élvezhető legyen. Vízszintes tájolású infografika inkább interaktív formában, hosszan scrollozó oldalakon fordul elő, itt ugyanis mostanában divatos lett a gördítés irányának eltérítése (persze ezt valakinek le is kell kódolni). Kiindulásnak érdemes egy 800×2000 pixeles téglalapot megjelölni, aztán kiderül, mennyire bírod kitölteni tartalommal.

(Itt egy kis kitérő erejéig megemlíteném, hogy az infografika nagyon közeli rokona a scrollytelling honlapoknak és a microsite-oknak. Nagyon sok esetben mind a két oldaltípus az infografikák eszköztárával adja elő a történetét, mondanivalóját – csak éppen interaktív, animált formában. Természetesen az infografikálban használt, érzékletes adatmegjelenítést bárhol használhatjuk, ahol számok kerülnek elő, pl. Landing Page-eken, vagy a “Rólunk” oldalakon is.)

Grafika

A legszebb az. ha rendes kreatívként te magad készíted el az egész kompozíciót az utolsó pixelig vagy vektorig. Az Adobe Illustrator természetesen ebben is a segítségedre lehet. Lehetséges, hogy nálad még eddig nem került elő a napi használatban, de a program rendelkezik egy gyári grafikon-eszközzel, amivel az adatok birtokában elég gyorsan összerakhatsz egy, azokat pontosan megjelenítő diagramot – amit azután persze még alaposan fel érdemes pimpelni és összhangba hozni az általános designoddal.  Nézzük meg kicsit közelebbről!

Az eszköz Column Graph Tool névre hallgat, és rögtön kilencféle diagram közül választhatjuk ki az igényeinknek megfelelőt. Ha megvan a jelöltünk, nincs más dolgunk, mint kijelölni azt a területet, ahol az ábrát látni akarjuk. Ezután felugrik egy kisméretű Excel-táblára emlékeztető ablak, itt begépelhetjük a számainkat, vagy megpróbálhatunk egy kész excel-táblából egyszerűen copy-paste segítségével bemásolni egy teljes táblát. 

Miután kipipáltad és bezártad az adatbevivő táblázatot, egy nem túl szép, de az adatokat precízen megjelenítő grafikont fogsz kapni. Ha az oszlopaidnak nevet is adtál, az ábra szélén egy jelmagyarázat is automatikusan feltűnik a cimkéiddel. A vízszintes sorokat is el lehet nevezni, természetesen ez is beépül a grafikonba. Ha a cimkéid neve számokból állna (pl. évszámok), tedd őket idézőjelbe, hogy ne zavarják össze a programot. Ha utólag igazítani szeretnél még rajta, a jobb gombbal előhozhatod a Type vagy Data menüpontokat, ahol a grafikon típusát vagy a bevitt értékeket változtathatod meg. 

Valamilyen okból az összes grafikon alapkiszerelésben szürkeárnyalatos, de ennek nem muszáj így maradnia. Egyfelől az Illustrator beépített palettaváltó eszközeivel is messzire lehet jutni (Edit > Edit Colors > Recolor Artwork), de nincs jobb mulatság, mint elkezdeni kiszínezni és kreatív megoldásokkal feldobni egy ilyen egyszerű sablont.  A Yes, I’m a Designer csatorna videója szépen végigvezet egy ilyen folyamaton – ahogy mondani szokás, szinte rá sem ismerni a végeredményre!

Ha viszont tovább mennél, és kicsit eredetibb grafikonokat szeretnél használni, mondjuk pénzérme-oszlopokkal szeretnéd megjeleníteni a grafikonodban a kiadott összegeket, ez is könnyen elérhető. Ha van egy kész, összecsoportosított objektumod az Illustratorban, azt az Object > Graph > Design menüpontban grafikon-sablonná alakíthatod, és a kész grafikonban jobb gombbal a Column opció alatt ezt megadhatod az oszlop helyére beugró grafikának. Számos opció áll a rendelkezésre, hogyan változzanak a képek az oszlopok növekedésével: nyúlhatnak, ismétlődhetnek, hízhatnak is. Susanne Arens videója elég jól bemutatja a különböző lehetőségeket.

Nyilvánvaló, hogy a kézműves munkával készült infografikákban lesz a legtöbb lélek, de van, amikor egyszerűen nincs idő ennyit pepecselni – vészhelyzet esetén természetesen mindig ott van a Canva, mint a kalapból előránthatott nyuszi. Az infografikák készítése a szerkesztő relatíve újabb képességei közé tartozik, de a kor szellemét követve a fejlesztők jó érzékkel felismerték, hogy mekkora igény mutatkozik rá, és ennek megfelelő hangsúllyal is kezelik. Darren Meredith videója alaposan körüljárja a témát, a folytatásában pedig az idei újabb elemekre is kitér. 

SEO trükkök

Ahogy írtam, a SEO kazántankönyvek ma már a leghasznosabb tartalomtípusok között emlegetik az infografikákat – egy ügyesen elhelyezett, jó kis rajzzal igazi klikközönt lehet elindítani. Végezetül adok tehát pár javaslatot arra, hogyan érdemes tálalni ezt a csodafegyvert.

  • Ügyelj rá, hogy a feltöltött grafikát megfelelően add elő a keresőknek! Ne feledkezz meg egy érthető, leíró fájlnévről, és megfelelő alt-textről sem, hogy az arra szaglászó robot tudja, mivel áll szemben. 
  • Körítsd megfelelő tartalommal! Nem elég egy képet csak úgy kitenni az oldaladra, rövid szöveget is kell mellé keríteni, és természetesen megfelelő, kulcsszavakban gazdag címet vagy címeket (sokan az “infografika” szót is beleveszik a címbe). Emellett ne feledkezz meg a meta-leírásról és a SEO-barát, tehát érthető szavakból álló, nem túl hosszú URL-ről sem! 
  • Tartsd szemmel a kész képed fel-avagy letöltési méretét is! Bármilyen szuperül raktál mindent össze, lehet, hogy éppen a nagy fájlméret miatt fog az algoritmus lepontozni. Ha vertikálisan több részre lehet bontani a képet, még a Lazy Loading is a segítségedre lehet a gyorsításban. 
  • Tegyél meg mindent a megoszthatóságért: nem árt, ha vannak social media gombok az oldaladon, és ezek persze az adott cikkre, és nem a nyitólapra mutatnak. 
  • Ne felejtsd el vízjellel avagy aláírással ellátni a grafikát, hogy ha önálló életre kel és elkezdik ész nélkül ide-oda másolni a népek, akkor is vigye magával a honlapod hírét hetedhét határba!

Címkép: Adioma.com

Iratkozz fel 7 napos ingyenes, alapozó webdesign kurzusunkra!

Kipróbálom
Iratkozz fel YouTube csatornákra!

blog

Segédlet Mi az a linkbait?

Mi az a linkbait?

2021. augusztus 30.

Nem clickbait, arról pedig már biztosan hallottál. A linkbait is egyike a webdesign napjainkban kikerülhetetlen édes(?) testvére, a SEO szakzsargonjában nyüzsgő kifejezéseknek. Mint minden valódi terminus technicus, ez is valami valójában közismert, nem túl bonyolult fogalmat ír le, de a saját speciális szemszögéből tálalva, és annak a tükrében értelmezve. Ez magyarán azt jelenti, hogy a […]

Tovább a cikkre