Webdesigner leszel s katona, vadakat terelő juhász… 3

brainA webes és nyomtatott design különbségeit boncolgató sorozatunk utolsó részében megnézzük, hogy a navigáció milyen feladatokat ad a designereknek és kicsit bepillantunk, hogy az aki végül a designt implementálja mit is csinál valójában a megkapott design tervvel, hogyan kelti azt életre a böngészőben. Azaz rápillantunk pár használhatósági szabályra és megnézzük azokat a technikai részleteket amelyek lényegesek egy webes design elkészítése közben.

Navigálás

A designban jelezni kell, hogy a user hol jár. A weblap nem egy újság, ahol elég a lap aljára odatenni, hogy 16. oldal. De ha nem is bonyolítjuk tovább, ott is kitesszük, hogy 16. oldal. Persze a weblapoknál nincsenek ilyen értelemben oldalak, hanem minden a menüben való elhelyezkedésével kapja meg a helyét. Ezért valahol felül diszkréten el kell helyezni egy “oldalszámot” valahogy így: Szolgáltatások > Design > Webdesign. A felhasználók ebből fogják tudni, hogy hol járnak.

A navigációs elemek elhelyezése nagyon fontos. Például ha egy újság van a kezemben és meg akarom nézni a címlapot akkor egyszerűen odalapozok és kész. De mit csinálok ha a weben vissza akarok menni a nyitólapra? Keresek egy linket, menüelemet vagy design elemet ami oda mutat. Az általam használhatósági szempontból elbírált design tervek 40%-a nem rendelkezik semmiféle navigációs elemmel ami a főoldalra juttatná a látogatót, ami egy komoly hiba.

A látogatók jó része más weblapokról, keresőkből érkezik, jó eséllyel nem a nyitólapra pottyannak be hanem valamilyen aloldalra. Biztosítanunk kell számukra, hogy eljuthassanak a főoldalra.

A megoldás egyszerű. Vagy a designban helyet kap egy “Főoldal” menüpont, vagy a weblap logójára kattintva juthat oda a user (vagy mindkettő). Mindegyik működőképes, lényeg, hogy valami legyen mindenféleképpen.

Túl hangsúlyos designok és a 9 másodperc

Egy átlag user a weblapra érkezését követően 9 másodperc elteltével kattint először valahová. Ennyi időt szán arra, hogy feltérképezze az oldalt, megállapítsa, hogy miről szól, beazonosítsa a navigációt. A mi oldalunkról nézve ez azt jelenti, hogy 9 másodpercünk van arra, hogy lekommunikáljuk azt amit a legfontosabbnak tartunk, legyen az az aktuális havi akciós termék, az RSS feliratkozás, vagy egy “Csatlakozz” gomb. 9 másodperc nem nagy idő, ezért a fő mondanivalónak vizuálisan is elég hangsúlyosnak kell lennie ahhoz, hogy mindenki észrevegye.

A szép, kifinomult és elegáns designok minden egyes alkatrészt egy közös hangulatba simítanak. Amikor egy designer úgy gondolja, hogy a designban kellőképpen kihangsúlyozta már a szóban forgó elemet akkor azt szoktam nekik mondani, hogy szorozza meg 4-gyel és akkor éppen hogy csak eléri majd azt a hatást amit akarunk.

Tetszik vagy nem, de ezekre a fő kommunikációkra azok a megoldások működnek amelyek a designerek szemében otrombák, túlzottak és visszataszítóak. Lehet, hogy egy művészi alkotáson valóban azok lennének, de a weben kellőképpen hivalkodónak kell lenniük ahhoz, hogy feltűnjenek.

A nyúlon túl
Visszatérve az első részben használt példához a weblap fő üzenet az lenne, hogy “Vegyél részt benne”. Ha jól emlékszem ez a harmadik elém kerülő verzió. Sok minden módosításra került ami javította a használhatóságot, illetve megvalósíthatóbbá tette magát a designt, de ez az egy még mindig nem elég. Hiába tiszta a fő üzenet nem igazán ugrik ki, hanem belesimul a designba és így az első 9 másodpercben majdnem teljesen biztos, hogy észrevétlen marad. Ennek pedig sajnos az lesz a hatása, hogy a gondosan felépített weblap üzleti modell borul és nem produkálja azt az eredményt amit egyébként produkálhatna.

A szabály tehát az, hogy a fő mondanivalónak kellőképpen hangsúlyosnak kell lennie ahhoz, hogy feltűnjön, és ez általában egy designer szemében rettenetesen otrombának fog tűnni.

Színséma

A használt színséma RGB, nem CMYK. Tudom, hogy két kattintással bármikor át lehet alakítani és látványra nem lesz semmi különbség, de mégis ha csak lehet én mindenkitől RGB-s design fájlt kérek CMYK helyett. Azért is jobb ha a designer eleve RGB-vel dolgozik mert, akkor ha valamit változtatni kell, akkor nem azt mondja, hogy tegyek a betűkre még 10% sárgát, mert ez semmit sem jelent. Ha egy implementált designban változtatni kell, akkor bizony egy (hexadecimális) RGB kódot vár az implementáló webfejlesztő nem pedig valamiféle misztikus “10% sárga” vagy “kicsit enyhébb tónus” típusú megfogalmazásokat.

A színekkel kapcsolatos másik fontos szempont az, hogy ez továbbra sem egy papír és egy nyomda, hanem egy monitor és az egyes színek megjelenése attól függ, hogy hogyan van beállítva a monitor. Sokszor javaslom azt a designereknek, hogy az elkészült design tervüket nézzék meg 3 különböző (és ha lehet nem színhelyesre kalibrált és profi) monitoron. Persze szegények többnyire teljesen elszörnyülködnek, azon, hogy a gondosan kiválasztott pasztell színeik az egyik monitoron teljesen fakóak míg a másikon pofán vágóan élénkek. A színeket úgy kell összeválogatni, hogy a különböző színhőmérsékletű monitorok többségén valamiféle elfogadható élményt nyújtsanak. Ezek általában olyan színek amelyek RGB kódja páronként azonos értékeket tartalmaz, azaz a #aa0066, #aa2244 és #44cc44 típusúak (azaz két egyforma – két egyforma – két egyforma).

1 teljes webdesign lesz szeletelve

A designereknek azzal is tisztában kell lennie legalább nagy vonalakban, hogy mit csinál a design tervel az aki azt implementálja, azaz aki egy élő weblapot kreál belőle.
Nos amit egy designnal csinálunk az az, hogy szépen felszeleteljük. Ezt azt jelenti, hogy olyan design tervet várunk ami olyan formában van ahol a design darabjai rétegeken vannak és a rétegek tetszés szerint ki be kapcsolhatók. Döntő többségében ez az jelenti, hogy egy rétegelt psd vagy xcf fájlt akarunk kapni.

Biztos, hogy a Quark vagy az Indesign nagyszerű eszközök a designerek munkájában, de az ebben létrehozott design tervekkel könnyen az őrületbe lehet kergetni azt akinek implementálni kellene.

Ahhoz, hogy a design feléledjen szeletelni kell. Külön fájlba kerül a fejléc, a háttér, a menüelemek háttere, a gombok szövegek nélkül, stb, stb. Az implementálás első lépésében a design terv tetejére ráhúzunk egy rácsot ami arra szolgál, hogy bejelöljük, hogy hol vagdossuk szét a képet. Ezután alkatrészenként lekapcsoljuk a felesleges rétegeket (pl szövegek) és a rács mentén levágunk egy darabot. Ezt a darabot elmentjük jpg / png / gif formában és ez kerül majd ki a weblapra.

A rács berajzolása az alapján történik, hogy végiggondoljuk, hogy a kívánt design hatást milyen HTML struktúrával illetve milyen CSS technikákkal kívánjuk megoldani. Ha a designer menet közben valamit 5 pixellel arrébb tesz, akkor jó eséllyel teljesen az elejéről kezdhetjük a szeletelést.

Az ideális design terv

A fentiekből kifolyólag az ideális design terv figyelembe veszi a színekre, felépítésre, betűtípusokra vonatkozó szabályokat, pixelre méretezett és egy rétegelt Photoshop vagy Gimp fájlban érkezik RGB sémával.

Ezzel véget ért a webes designterek szabályait bemutató sorozat. Remélem sok designert megkímél ez a leírás attól, hogy kétszer kelljen dolgoznia és sok designt implementáló fejlesztőt megkímél attól, hogy újra és újra ugyanazokat az elvárásokat kelljen másoknak magyaráznia.

2 thoughts on “Webdesigner leszel s katona, vadakat terelő juhász… 3

  1. “A színeket úgy kell összeválogatni, hogy a különböző színhőmérsékletű monitorok többségén valamiféle elfogadható élményt nyújtsanak. Ezek általában olyan színek amelyek RGB kódja páronként azonos értékeket tartalmaz, azaz a #aa0066, #aa2244 és #44cc44 típusúak (azaz két egyforma – két egyforma – két egyforma).”

    Ez a két mondat korrekcióra szorul. Egyrészt nem csak a színhőmérséklet, de a kontraszt, a fényerő beállításai, a TFT panel fajtája(!), a környező megvilágítás stb. is nagyban befolyásolja a látott képet (sőt, a TFT-k esetében még a nézési szög is, pl. függőlegesen). Másrészt, a “páronként azonos értékeket” tartalmazó, 256 színű paletta (webbiztos paletta) alkalmazásával is lehet (sőt, ezzel lehet csak igazán 🙂 borzalmas színezést produkálni. Az un. webbiztos paletta a régi idők hagyatéka, amikor a grafikuskártya-monitor kombók nagy része 256 színű üzemmódban volt csak megbízhatóan kezelhető. Ma inkább azt javasolhatnánk, hogy meg kell nézni a designt 16 bites színmélység mellett is.

  2. Tapasztalatom alapján a kicsi kontraszt arányok tűnnek el általában egyes monitorokon. Azaz nem érdemes az RGB értékekben egyetlen byte-nyi színváltozásra motívumot alapozni.

    A színekben mindig lesznek apró különbségek, de lényegében nem befolyásolják egy oldal használhatóságát.

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.