Mikola Bence

2015 05 11

Miért nem szeretem a 3D oszlopdiagramokat?

mbence infografika esettanulmány, infografika, Mikola Bence, oszlopdiagram

Miért nem szeretem a 3D oszlopdiagramokat?

Persze biztos van jó pár eset, amikor indokolt az oszlopdiagramok 3d dizájnja – elsősorban, ha illusztratív jelleggel jelenik meg az ábra és kevésbé fontos a tartalom – de alapvetően hatalmas zsákutcának tartom a térbeli oszlopokat. Múlt héten érkezett forrásként az alábbi diagram (az 500 eurós bruttó fizetésre rakodó terheket mutatja)

Külön posztot megér, amikor halmozzuk az y-tengely mértékegységeit, de ezt most tegyük félre, nézzük csak az oszlopokat. A fenti ábra alapján kellett elkészítenem a saját verziómat, nem gond, rutinfeladat. Amíg el nem kezdem 🙁 Nézzük meg a felső ábra első oszlopát. Albániában az 500 eurós fizetés mennyibe kerül a munkáltatónak? Ránézek: kb. 620 euró. Ja nem, a 600-as érték hátranyúlik térben és az oszlop végig alatta marad, akkor kb. 590? Melyik részét kell az oszlopnak leolvasni? A frontális nézetet? Esetleg a térben leghátrébb nyúló részt? Szlovákia 700, vagy 680 euró? Az oszlopok alja sincs rendben, hol lehet a zéró érték?

A szakújságíróval egyeztetve kibogoztuk az ábrát és készült belőle ez:

Nem sokkal egyértelműbb, tisztább és érthetőbb? De 🙂

2014 11 10

Így készült – A szarajevói merénylet grafikája

mbence infografika esettanulmány, infografika, Máté István, Mikola Bence, Szarajevó

Így készült – A szarajevói merénylet grafikája

Érdekes munka volt, ígértem, hogy pár pontba sűrítve megosztom, hogyan készült, lássuk!

A feladat: egy oldalas infografika készítése a Képeslap számára a szarajevói merényletről – egyébként teljesen szabad kezet kaptunk a szerkesztőtől.

Első körben felfrissítettem a gimis emlékeket, rákerestem a merényletre és elolvastam pár írást (http://hu.wikipedia.org/wiki/Szarajev%C3%B3i_mer%C3%A9nylet, http://en.wikipedia.org/wiki/Assassination_of_Archduke_Franz_Ferdinand_of_Austria) és megnéztem, hogy milyen grafikák készültek eddig az eseményről. Korrekt infografikát nem találtam, ami egyrészt jó, mert törhetjük az utat, másrészt rossz, mert nagy segítség, ha a kollégák már megszűrik az információt.

Nem gondoltam, hogy problémás lesz rekonstruálni a történetet, hiszen ismert, nagy horderejű és nemzetközi eseményről van szó, de csalódnom kellett. Tényleg nagyon sok helyen fellelhető ugyanaz a történet nagy vonalakban, de ha pontos, apró részleteket nézzük, akkor korántsem rózsás a helyzet. Előzetesen nekem csak Gavrilo Princip neve volt meg az emlékeimben, rácsodálkoztam, hogy valójában ez egy sokszereplős, nagyszabású, olykor komikusan alakuló merénylet volt.

Pár órás adatgyűjtés után felvázoltam egy lehetséges layout-ot (gyakorlatilag ez valósult meg). A felület felső részén egy térképen mesélnénk el a sztorit. Ki, mikor, hol, mit csinált. Az alsó részen pedig megjelenítenénk a drámai pillanatot, amikor halálos lövés éri a hercegi párt. A 3D-s ábra szerepe kettős, egyrészt élettel tölti meg a grafikát a szárazabb térkép ellenpontjaként, másrészt segítségével közelebb hozhatjuk az olvasóhoz a kort (autó, egyenruhák, ruhák megjelenítése).

Az első vázlat

Elkezdtem összerakni a térképet, Máté István kollégám pedig nekilátott, hogy lemodellezze az automobilt és a többi szereplőt. A térképnél problémát jelentett, hogy nem találtam egységes forrást arról, hogy egész pontosan, ki, mikor, hol állt és miként vett részt a merényletben. A Youtube most tele van Ferenc Ferdinándos videókkal, melyek a 100. évfordulóra készültek. Június elején ezek még nem voltak elérhetők. Fent volt viszont egy dokumentumfilm, amiben színészekkel újrajátszották a merényletet (nem találom most a linkjét) – ebből sok hasznos infót ki lehetett szűrni. Végül a Princip bírósági tárgyalásakor készített hivatalos térkép bizonyult a leghasznosabb segítségnek, melyet Sebestyén Imre fordított le nekünk szerbhorvátról magyarra.

Így készült – A szarajevói merénylet grafikája

István szépen haladt a modellel, igazából itt is csupán a szereplők pontos elhelyezése jelentett egy kis gondot. A merényletről fénykép nem készült. Korabeli grafikákon viszont megörökítették a halálos pillanatot.

A merénylő jó helyen, Ferenc Ferdinánd a felesége oldalán

Princip az autó másik oldalánál tüzelt

A hivatalos térkép információi és a merénylet napján készült fényképek alapján végül mindenki a helyére került, hisszük, hogy a valóságnak megfelelően.

A bal oldali elrendezésben szépen látszik Princip, először ezt akartuk használni. Aztán eszünkbe jutott, hogy a merénylő jobbkezes volt, úgyhogy inkább a jobb oldali módon léphetett az autóhoz...

A végleges grafika

A térkép és a 3D modell felhasználásával István készített egy színes, online verziót és Bárány Krisztián videójához szépen animált inzerteket. A grafikát és a rövid videót itt lehet megnézni.

2014 08 13

Robin Williams emlékére

mbence infografika infografika, Mikola Bence, Robin Williams

A váratlan halálhír után, tegnap készítettünk egy grafikát a színész életpályájáról. A főszereplésével készült filmek adatait vizsgálva szépen kirajzolódik a kilencvenes évek sikeridőszaka és az elmúlt évtized sikertelensége.

Az adatokat az Imdb-ről vettem, pár helyen kellett kiegészíteni, ekkor a wikipédián fent lévő számokat használtam. A filmek bevételénél sajnos nem volt egységes nemzetközi adat, így csak a belföldi (USA) adatokat vettem bele. A filmek megítéléséhez szintén az Imdb értékelési rendszerét használtam.

Itt a nekrológ, amibe végül bekerült.

2014 03 19

A kézisajtó működése

mbence infografika infografika, Mikola Bence

Kézzel nyomott Nemzeti Dal

Nagyon szeretném egyszer felrajzolni az 1848-49-es szabadságharc csapatmozgásait egy Minard féle térképre. Ehhez kellene pár hónap kutatómunka, úgyhogy egy jó darabig még álom marad ez a vállalkozás. Addig is kellett valami klassz dolgot rajzolnunk a forradalmi események kapcsán a héten még kapható Képeslapba.

Tóth Szabolcs Töhötöm szerkesztőnk ötlete volt, hogy vizsgáljuk meg a Landerer nyomda gépeit. Rövid nyomozás után kiderült, hogy három múzeumban is található a történelmi nyomdagépekből. Ráadásul ezek közül kettő működőképes, olyannyira, hogy minden március idusán leporolják a gépeket és bárki nyomtathat rajtuk egy példányt a Nemzeti Dalból.

A grafika koncepciója hamar megszületett. Egy nagy fotón bemutatjuk a szerkezet fontosabb részeit, mellette kis fázisrajzokon végigkövetjük a nyomtatás folyamatát. A vázlatom erről annyira vázlatos, hogy inkább nem osztom meg veletek. Jöjjön inkább a kész grafika:

A készítéskor felvettük a kapcsolatot a Kiscelli múzeummal, ahol tárt karokkal fogadtak minket. Béres Attila fotós kollégával mentünk ki a helyszínre, ahol Vörös János segítette a munkánkat. János több mint teremőr. Elmondása szerint huszonegy éve dolgozik a múzeumban és olyan készségesen a fásultság legkisebb jele nélkül meséli újra és újra a kiállított tárgyak történetét, mintha csak a múlt héten kezdett volna.

Attila gyorsan elkészített pár képet magáról a sajtóról, majd megkértük Jánost, hogy nyomtasson ki egy oldalt a géppel. A folyamatot szintén végig fotóztuk. Ezek a képek segítették aztán a fázisrajzok elkészítését.

Kicsit csalnunk kellett. Igazából az egész folyamatot a másik oldalról, tehát a fényképezőgépnek háttal kellett volna bemutatni és a falnak vetett háttal fotózni végig, de ott olyan szűk volt a hely, hogy nem fértünk el rendesen. Így történt, hogy a harmadik fázisnál én ragadtam meg a tekerőkart és juttattam a klisét a nyomólap alá 🙂

A grafikába bekerült még egy kis térkép március 15. főbb helyszíneiről, ezt Balog Éva készítette. A bevezető kis szöveget pedig mint ahogy a Gagarinos grafikánál, itt is Tóth Szabolcs Töhötöm szerkesztőnk tette hozzá az ábrához.

2014 02 03

Izometrikus Macintoshok és Ipadek

mbence infografika Dancsák András, diagram, esettanulmány, infografika, Magyar Nemzet, Mikola Bence

Volt már szó az izometrikus megjelenítési forma előnyeiről amikor Dancsák András vendégposztjában bemutatta a módszer lényegét. Eddig nem sok grafikában használtam izometrikus ábrákat, de mindig elismerően bólintottam, ha találkoztam valahol velük. Például pár éve, amikor az Európa-bajnokság stadionjairól készítettünk egy sorozatot, András rajzolt egy ilyen kis kiegészítő ábrasort. A teljes grafika is nagyon jó lett (itt látható), de a poznani grafikában nekem ez volt a kedvenc részem:

Azt hiszem azóta vártam az alkalmat, hogy ilyen ábrákat rajzolhassak, amióta ezen az anyagon dolgoztunk. Az alkalom jelentem megjött, de a túl sok örömöt nem hozott magával (legalábbis kezdetben).

Múlt héten volt az első Macintosh gép piacra dobásának harmincadik évfordulója. Ennek apropóján kértek a Magyar Nemzet Magazinba egy ezzel kapcsolatos infografikát. Másik régi tervem volt, hogy oldalakon át folyassak egy vonaldiagramot. Most lehetőség volt mindkét vágyam megvalósítására. A grafika alapja az Apple árfolyama volt. Szerencsére évtizedeken át nem sok minden történt vele, így szépen meghúzta magát az oldal alján. A kétezres években aztán nekilódult, hogy szépne mellé lehessen szedni a szöveget. Első lépésként felrajzoltam az oldaltervre, hogy nézne ki a grafika. Így:

Oldalpárt terveztünk, de nem középsőt, így az árfolyam görbéjét meg kellett szakítani a felénél. A tőzsdei adatsor egyúttal egy idővonal, amin jól elhelyezhetők az Apple fontosabb termékei. Ott alul azok a kis firkált téglalapok. A hipotézisem az volt, hogy az új fejlesztések sikere szépen követhető lesz az árfolyam változásán. Ez nem igazolódott be, gyakorlatilag az elmúlt évtizedig alig van mozgás a görbén. Biztos ennek is van érdekes magyarázata, de nézzük inkább a grafikákat.

Nem szerettem volna fényképeket használni az Apple termékek bemutatásakor, mert a rajzos megoldások mindig adnak valami többletet az ábrának. A kérdés csak az volt, hogy milyen stílusban dolgozzunk. Az újság fekete fehér, napilapos papírra nyomva. Ilyen kis méretben és nyomdatechnikával 3D-s modellek nem mutattak volna jól. Az izometrikus, vonalas ábrák viszont jól érvényesülnek. Itt egy részlet a végleges grafikából.

Nem volt bevált módszerem így András tippjein felbuzdulva leszedtem pár referencia képet és elkezdtem kapásból vektorosan rajzolni az első Macintosht. Annyira jó lett, hogy ki se merem tenni ide 🙂

Látszott, hogy ebből nem lesz használható anyag, kellett valami segédlet, hogy ne szálljak el az arányokkal, formákkal. Találtam a neten egy iso grid alapot, amit kinyomtattam és ceruzával elkezdtem vázlatolni rá. Nagyon sokat segített a grid háló. A referencia fotókat szem előtt tartva mankót készítettem magamnak a vektorizáláshoz. Beszkennelve így nézett ki:

Szkennelés után bepakoltam Illustratorba és elkezdtem átrajzolni. Sok apró részletet ekkor kellett kitalálni, de a gépek tömege biztosan fel lett rakva, plusz ekkor is a háttérben volt még az iso grid így nem volt túl nehéz feladat. A vonalas rajz elkészülte után minden felületet kitöltöttem fehérrel, rendbe tettem az alá-fölé rendeltségeket és máris mehetett a helyére.

A végleges oldalpár pedig ilyen lett:

Mikola Bence

Miért nem szeretem a 3D oszlopdiagramokat?

Miért nem szeretem a 3D oszlopdiagramokat?

Így készült – A szarajevói merénylet grafikája

Így készült – A szarajevói merénylet grafikája

Az első vázlat

A merénylő jó helyen, Ferenc Ferdinánd a felesége oldalán

Princip az autó másik oldalánál tüzelt

A bal oldali elrendezésben szépen látszik Princip, először ezt akartuk használni. Aztán eszünkbe jutott, hogy a merénylő jobbkezes volt, úgyhogy inkább a jobb oldali módon léphetett az autóhoz...

A végleges grafika

Robin Williams emlékére

A kézisajtó működése

Kézzel nyomott Nemzeti Dal

Izometrikus Macintoshok és Ipadek

Magyar Nemzet Magazin 2013. 01. 25.