Grafikusok vs. Sitebuilderek!

ekkor: 2013-05-11 · Kategória: Képszerkesztés Szakosan

Grafikus szemszögből!

Azért hozom fel a témát, mert grafikusként sokszor kell sitebuilderekkel dolgoznom. Akik kevésbé jártasak a témakörben, azoknak alább található egy kis magyarázat, hogy mit is csinálnak ezek az emberek pontosan, és miért kell nagyfokú összhangnak lenni a munkájuk során. Természetesen a “kollégák” ugorját át ezt a részt, senkit nem szeretnék untatni.

A cikkben arról lesz szó, hogy milyen egy idilli grafikus – sitebuilder (és programozó) kapcsolat. Mivel az én nézőpontom inkább a Grafikák világából közelíti meg a kérdést, ezért nyugodtan szóljatok hozzá a témához, biztosan sok dolgot meg lehet még említeni majd a cikk kapcsán. Első sorban a leendő ügyfelek nézőpontjából írtam meg a cikket, tehát próbálok közérthető maradni, hogy ők is megtudják mik a sarkalatos pontok a projektek során, hiszen Ők fizetik ki minden résztvevő munkáját.

Grafikusok munkája
A grafikusok, más néven Designerek készítik el azt a látványtervet, amit az ügyfél “megálmodott”. A grafikán túlmutatva azonban az ő kezében összegződik az elrendezés, és a meglévő funkciók ergonomikus kialakítása is. Manapság rácsokban (gridekben) gondolkodva kell kialakítani a lehető legaprólékosabban az összes olyan elemet, amit majd láthatunk a lapon, de olyan formában, hogy az minden szempontból megvalósítható legyen és a későbbi munkafolyamatok zökkenőmentesen történhessenek. 
Sitebuilderek munkája
A sitebuilder a grafikus által készített (általában PSD) látványterv alapján pixelpontosan elkészíti az oldalt a megfelelő nyelven (HTML, CSS, PHP, vagy manapság már PHP CMS templatek formájában). Neki kell odafigyelnie az optimális fájlméretekre, és az ő feladata az, hogy a grafikai elemeket milyen formában jeleníti meg. Ezen felül a kódnak hibamentesnek és szabványosnak kell lennie.
Programozók munkája
 Ha szükséges és a projekt bonyolultsága megkívánja, akkor egy programozót is be szoktak vonni a feladatokba. Az ő feladata a mögöttes “motor” megalkotása, ami majd a “motorháztető” alatt (sitebuilder által épített design) zakatol. A feladatköre sokrétű, a szerver optimális kihasználtságától kezdve teljesen egyedi funkciókat kiépíteni az adott nyelvek segítségével az ő feladata.

Nagyobb átgondoltság egyenlő kevesebb fejfájás

A munka menete ideális esetben

A munkafolyamat általában a következő: az ügyfél szeretne egy szép weblapot, talán vannak is elképzelései ezt illetően és szeretné profi módon, a lehető legtöbb részlet megtervezésével egy weboldal elkészíttetésébe fogni. Megbíz egy grafikust, aki egy “látványtervet készít”, ami többféleképpen történhet: akár papíron, skicc formájában, de lehet akár pixelpontos drótváz, összeollózott PS munka. Egy a lényeg: ha az ügyfél elégedett, akkor megkezdődhet a PSD készítése a sitebuilder részére. Azért szeretem ezt a fajta munkamenetet, mert azért egy igényesen összeállított PSD nem a két-perces munka kategóriába tartozik és így kevesebb az esély, hogy “mellélövünk”. Amint elkezdődik a valós grafikai munkálat, el kell döntenünk, hogy a kérések alapján használunk-e grideket, responsive layoutot, hány aloldalt készítünk és mit szeretnénk jobban megmutatni az ügyfél részére. Ha megvan a teljesen kidolgozott főoldal, akkor már ebben a stádiumban érdemes továbbadni a PSD-t a Sitebuildernek. Ideális esetben a kommunikáció folyamatos a felek között. Így valamilyen szinten párhuzamosan történhet az oldal készítése. Ha programozó is be van vonva a folyamatba, akkor természetesen ő is megkezdheti a nyers váz tesztelését. Mivel mindenkinek vannak egyedi megoldásai, érdemes rugalmasan kezelni ezeket a kérdéseket és építő-jellegűen hozzáállni az egész projekthez. Én mint grafikus, azonnal javítok minden olyan problémát a PSD-kben, ami esetleg idő közben felmerül (pedig, egy jobb képességekkel bíró Sitebuilder talán nem is venné figyelembe az apróságokat). Sok online közegben olvastam, hogy a Grafikus nem a Sitebuilder-ért van és fordítva. Szerintem ez nem a helyes hozzáállás. Egy-egy problémát meglepően könnyű orvosolni, ha mindenki a saját szakterületére koncentrál és a hibák számát minimalizáljuk. Ráadásul egy-egy nagyobb projekttel mindenki fejlődik. Ezek után ha megvan az összes grafikai fájl, akkor ezen a ponton le is zárult a Designer dolga. A Sitebuilder és a Programozó azonban továbbra is dolgozik (remélhetőleg teljes összhangban) és együtt zárják le a projektet. Ez volt az ideális eset. Ahhoz, hogy minden zökkenőmentes legyen kiemelek pár pontot arra vonatkozóan, mire is kell figyelni és kinek mi lenne a feladata egész pontosan.

Az ügyfél feladatai és a gyakori hibák

Az ügyfélnek is érdemes tartania a kapcsolatot

Igen, az ügyfelekre is sok feladat hárul, ha azt akarják, hogy a kifizetett összeg a lehető legjobban legyen hasznosítva. Persze, lehet összekulcsolt kézzel is várni a folyamat végét, de ez pont olyan, mintha építkezéskor nem nézünk rá a munkásainkra néha. Itt most pontokba szedve látható az általam tapasztalt gyakorta előforduló hibák listája:

  • Nincs koncepció: Ha nincs konkrét elképzelés a munka kezdeti fázisában, az bizony hiba. Természetesen az ügyfélnek nem feltétlenül van affinitása ahhoz, hogy mit is kellene egy honlapon láttatni az ügyféllel, hiszen valljuk be, ez egy külön szakma, viszont az már az ő feladata, hogy ezt megoldja a megfelelő emberekkel. Egyes esetekben segíthet a Grafikusok, Sitebuilderek és Programozók véleménye is, de érdemes erről marketing-szakemberek véleményét is kikérni. Természetesen a valóságban ezek áthidalhatóak, de egy részletes terv mindenképpen kell egy komoly projekthez.
  • Nincs tartalom (content): Ha nincs tartalom, akkor is el lehet ugyan kezdeni a munkát, de én úgy gondolom hogy a professzionális eredmény érdekében ennek előre meg kellene lennie (hiszen akkor a lehető legreálisabban látná az ügyfél, hogy mit is fog kapni a folyamat végén, sokszor végleges grafikai elemekkel és a szövegek megfelelő tagolásával). Ha nincs, akkor jöhet a megszokott “Lorem Ipsum”…
  • Nem a megfelelő embert bízza meg: Gyakori hiba, mivel sokan nincsenek tisztában azzal, hogy kinek, mi a pontos feladata. Egy Grafikus nem feltétlenül vállal el Sitebuilder jellegű munkákat, vagy egy Sitebuilder nem biztos, hogy meg tud írni egy nagy bonyolultságú funkciót. Egyszerűen nem az a dolga. Ezeket a kérdéseket előre tisztázzuk a koncepció ismertetése során.
  • Nem kíséri figyelemmel a munkálatokat: Ha nincs kommunikáció, vagy lassú, akkor az nagyban lelassítja az egész folyamatot. Senki nem szeret feleslegesen dolgozni, és ez az összköltségvetésben is hamar jelentkezni fog. A legjobb, ha jelen vagyunk minden munkafolyamatnál és elhárítjuk egy-egy ésszerű döntéssel az esetleges akadályokat.
  • A projekt közben változnak az igények: Ennek egy része természet folyamat. Az ügyfél ha élesben tudja tesztelni az addig papíron megálmodott funkciókat, akkor könnyen változhatnak az igények. Azt azonban nem árt észben tartani, hogy mindennek vannak határai. Ha olyan irányba változnak az igények, ami jelentősen több munkát jelent (esetleg teljesen újra kell alkotni egy-egy folyamatot), akkor az igényekhez mérten a költségek is idomulhatnak. Hogy ezt elkerüljük, érdemes ügyfélként a kezdetekben letisztázott munkamenet szerint haladni. Persze itt érdemes kiemelni a “rugalmas munkavégzés” szóösszetételt, az összes fél részéről.

 A Grafikus feladatai – Milyen a jó PSD?

A Grafikusnak egy honlap-terv összeállításakor egy feladata van: Megalkotni a grafikai fájlokat, olyan formában, hogy zökkenőmentes legyen vele a további munka. Kövessük az alábbi pontokat és nem lesz gond:

  • Mappázás: A PSD egy rétegelt kép, amiben rengeteg apró, külön megrajzolt elem összhangja adja meg a végleges Designt. Ha nem akarunk eltévedni, akkor mappázzuk be az elemeket és adjunk neki olyan neveket, hogy a későbbiekben a sitebuilder is tudja majd, mire is kell gondolni (header, boy, footer, stb). Amennyiben sok aloldalról van szó, használjunk több fájlt és azokat könyvtárakba helyezzük a további rendezettség kedvéjért.
  • KI-BE kapcsolhatóság: A mappák természetesen egy gombnyomással megjeleníthetőek és elrejthetőek a “Rétegek” ablakban, azonban vannak olyan effektek (pl gombok állapotai, vagy menük kinyitása, lecsukása, esetleg egyedi funkciók), amik alap helyzetben nem láthatóak. Ezeket próbáljuk meg egyértelműen feltüntetni (pl mappák színezése, vagy az elnevezéssel). Dolgozzuk ki a lehet legjobban ezeket az “action” lehetőségeket is, ne a Sitebuildernek kelljen találgatni a lenyomott vagy hover gomb színét.
  • Pixelpontosság: Számoljunk! Minden doboznak legyen meg a maga pontos mérete (“Információ” ablak), de közben gondoljunk a dinamikusságra is. Ha hosszú a cím, és nincs lehetőség “belecsusszanni” a második sorba, akkor a Sitebuildernek kell majd megoldani a Cím-karakterszámának limitálását. Ezeket a dolgokat azonban előre jelezzük (contact). Ne használjunk fél pixeleket. Ha egy objektumra ránagyítunk és az él nem tökéletes, akkor az megtévesztheti a Sitebuildert (habár ez kiküszöbölhető probléma). Ahhoz, hogy ezt elkerüljük érdemes használni a segédvonalakat, vagy akár komplett grid-alapú megoldásokat és az objektumokat húzzuk a segédvonalakra. (Snap to grid)
  • Sok vektoros réteg: Én szeretem a vektoros objektumokat, könnyű velük a munka. Minden területre elhelyezek egy általam “területkijelölő” objektumnak hívott alakzatot és erre a raszteres elemeket “vágómaszkkal” helyezem el (olykor mappa alapúan). Ennek olyan előnye van, hogy ha nagyobb a raszteres kép, akkor anélkül el lehet azt tolni a vektoros objektumon, hogy a Design többi részében ez bármilyen látványos sérülést okozna (és nem mellesleg megmarad az eredeti forrás raszteres képünk is teljes felbontásban). Egy a hátránya, hogy a végleges tervnél ezeket az objektumokat “raszterizálni” kell, vagy bizonyos esetekben vágni is. Ez nem bonyolult lépcsőfok, de ha ilyen megoldásokat alkalmazunk, akkor biztosnak kell lennünk abban, hogy a sitebuilder tudja-e kezelni az ilyen formátumú PSD-t. Ha nem, akkor nekünk kell esetlegesen egy másik tervben mellékelni a kivágott és pixelpontos grafikai elemeket.
  • Nincs “haszontalan” réteg: Ha egy réteg semmire sem jó, akkor nem kell nekünk. Nagyon zavaró lehet, ha mindenhol olyan rétegekkel találkozunk, amik nem tartalmaznak semmit, vagy egy korábbi elgondolás szülöttei, amikre már nincs igény. Töröljük őket!
  • Objektum Lekerekítések: Ha létrehozunk egy objektumot adott sugarú lekerekített sarkokkal, a későbbiekben ne módosítsuk, mert torzul majd a réteg. Ha körvonalakat alkalmazunk, akkor az az objektumhoz igazodjon, különben nem lesz lehetséges egyszerű módon CSS-el kivitelezni a későbbiekben.
  • Kevés effekt: A színkeveréses effektek, “ragyogások”, különféle durva árnyékhatások szépek ugyan az elkészült terveknél, azonban kivitelezni css alapúan nagyon körülményes/lehetetlen. A lehető legkevesebb nyers effekttel oldjuk meg a tervünket. Arról nem is szólva, ha effektek találkoznak az teljesen reprodukálhatatlan.
  • Raszterizálás elkerülése: Ahol lehet kerüljük el a raszterizálást. Szinte mindenre van megoldás, mellyel vagy vektorosan, esetleg intelligens-objektumokkal, de megőrizhetjük a fájlokat olyan formában, hogy később teljes mértékben szerkeszthető marad. Ha véletlenül valamiért össze kell vonni rétegeket (raszterizálva), akkor pedig készítsünk másolatot ezekről előtte és legalább magunknak tároljuk el.
  • Szövegek megfelelő használata: A szövegek legyenek pixel alapúak és kerek számok. A fontokat mellékeljük a munka végén (legyen meg bennük minden karakter, az már plusz pozitívum, ha pl google-fontokról van szó). Ne húzzuk szét a szövegeket, ne legyen torzítás. Ha van benne torzítás, akkor azt már kép-alapúan kell megoldani. A szöveg-boxokat használjuk mindig pixel-pontosan és egy boxon belül ne legyen többfajta effekt, szín méret.
  • Hátterek ismétlése: Gondoljunk a Sitebuilderekre, ha óriás méretű képeket szeretnénk megjelentetni (pl háttereket), akkor a css-hez mérten ismételtethetőek legyenek, és lehetőleg mellékeljük neki külön is.
  • Grafikák mellékelése külön: Tiszta ügy, ha a felhasznált elemeket külön is mellékeljük. Ahol kell transzparens háttérrel PNG-ben, ahol pedig nem kell, ott egy “webre-mentett” tömörített JPG fájlként. Szerintem a grafikák minőségének megőrzése mindenképp a Grafikus feladata. Én például idegbajt kapok, ha egy jó minőségű header olyan szinten le lesz butítva (a mérete miatt), hogy látszódik a pixelek szórása a tömörítésnek köszönhetően. Ebből nem szoktam engedni és néha áldozatokat kell hozni a minőség érdekében.

 Lényeg a folyamatos kapcsolat és a csapatmunka!

Lényeg a csapatmunka!

Aki vette a fáradságot és elolvasta a cikket, az minden bizonnyal észrevette, hogy végig ki volt emelve milyen fontos a folyamatos contact a felek között. Szerintem ez az alappillére a jól elvégezhető munkának. Ha mindenki kreatív és segítőkész, akkor a problémák is megoldhatóak maradnak.

Minden munkában vannak nehézségek, de szerintem a Grafikusok és Sitebuilderek között lévő feszültség nem is létezik, ha a hozzáállás megfelelő.