Szinte a legfontosabb dolog, bármilyen munka kapcsán, hogy pontosan megfogalmazzuk, hogy mi is az, amit nekünk csinálnunk kell. Ez jelen esetben se lehet másképpen. Nem egyszer futok bele abba a kérdésbe (kortól, nemtől függetlenül), hogy mi az a webdesigner? Erre szoktam néha fáradtan azt mondani, hogy ő az, aki a webdesignokat tervezi. De mi az a webdesign?

A webdesign fogalmát talán úgy lehetne a legegyszerűbben összefoglalni, hogy ez az adott weboldal arculata, kinézete. Ez adja meg a látogatónak az első érzetet az oldallal kapcsolatban, és nagyon sok esetben ettől az első benyomástól függ, hogy marad-e, és nézelődik tovább, vagy tovább áll.

Ebből is látszik tehát, hogy egy nagyon fontos, komplex feladata van annak, aki egy ilyen munkába belekezd. Számos tényezőt figyelembe kell vennie, még mielőtt akárcsak egy vonalat is behúzna, valamint ismernie kell a kor technikai követelményeit, igényeit, valamint a webes megjelenés sajátosságait, hiszen egyes elemek alkalmazása lehet, hogy látványos, viszont a gyakorlati alkalmazása káros hatással is lehet egy oldal sikerére.

Az internetes megjelenés sajátosságai

Ha egy plakátot, névjegykártyát tervezünk, a méretek szempontjából könnyű dolgunk van, hiszen a munka elejénFix szélességű designmeghatározzák, hogy milyen méretben kell dolgozunk. Viszont a digitális világban ez nem olyan egyszerű, mivel ahány felhasználó, annyi féle felbontás, így törekedni kell arra, hogy mindenki számára az adott oldal ugyan olyan, vagy legalábbis közel ugyan olyan képet mutasson. A mostani oldalakat ezért két részre szokták bontani: a fix szélességű, valamint változó, vagyis fluid szélességűekre.
Értelemszerűen a fix szélességűnél az oldalirányú kiterjedés meg van előre határozva, ami általában maximum 980px széles, így a manapság minimumnak számító 1024*768-as felbontású monitorokon pont kitölti a tartalom a helyet. Ezeknél az oldalaknál nagyobb felbontás esetén a grafikai díszítő elemekből több, míg kisebb felbontás esetén kevesebb jelenik meg – erre példa az oldalsó kép, ahol a tartalmi rész 980px széles, így 1024*768-as felbontás mellett a két kék vonal közti rész látszik csak, míg ennél nagyobbnál a többi rész is megjelenik.Előnye, hogy könnyű a grafikai tervezés, hátránya, hogy egy nagyobb, szélesvásznú monitor esetében az oldalsó, felhasználatlan terület zavaró lehet.
A fluid szélességű oldalak már kicsit máshogy épülnek fel grafikai szempontból is. Itt ugye az oldal szélessége a böngésző ablakának, illetve a felbontásnak a függvénye, így oldalirányban ismétlődnek a grafikák, amire figyelni kell, és úgy tervezni. Előnye, hogy nincs akkora felesleges üres hely nagy méret esetén, hátránya, hogy nem lehet olyan szintű grafikai megvalósítást létrehozni, mint egy fix szélességűnél, valamint az oldalarányok a változás miatt nem biztos, hogy minden arányban szépen fognak kinézni.
Manapság főként a fix 980px széles, középre igazított formavilág az, amit preferálni szoktak, de a jobbra-balra igazítás se elvetendő ötlet, vannak erre is nagyon szép megoldások. Egy-egy szép grafikai elemmel egyensúlyba lehet hozni egy oldalra zárt oldalt is.

Egy másik sarkalatos pontja a tervezésnek a különböző áttetszőségek kezelése. Sajnos ilyen téren meglehetősen meg van kötve a kezünk, így a kezdeti időszakban célszerű konzultálni azzal a sitebuilderrel, aki a mi terveinkből egy működő oldalt fog összerakni, így elkerülve a többletmunkát. (Ez a későbbiekben is hasznos lehet, ha valami, az átlagtól eltérő ötletünk támadt, hogy megvalósítható-e egyáltalán. )
Például: van egy szép girbegurba, nem szabályosan ismétlődő hátterünk, rajta mondjuk az oldal címe egy kis grafikai elemmel, aminek Photoshopban a blending mode-ját (a layer paletta feletti legördülő lista) Multiply-ra állítottuk, és ezt szeretnénk felhasználni az oldalon, mondjuk a fejlécben. Három lehetőség lehet:

  1. Háttérrel együtt mentjük a képet, és így próbáljuk használni. Ebben az esetben abba a problémába ütközhetünk, hogy a fejléc adott háttérképe, és a mi friss képünk nem fognak passzolni, így nagyon ronda látványt nyújtva.
  2. Háttér nélkül használjuk. Ebben az esetben nem ugyan az a látvány fog minket fogadni a böngészőnkben, mint amit előzőleg a Photoshopban láttunk, mivel a böngészők nem tudják rendesen lekezelni a különféle blending mode-okat.
  3. Ha fix szélességű oldalt csinálunk, akkor az egész fejléc grafikát egyben csináljuk meg, benne a címmel, egyben elmentve, és így ugyan azt a hatást kapjuk, valamint nem lesz gond vele. Az egyetlen probléma az lesz, hogy a fejlécben lévő címünk nem lesz kattintható, de ezt egy sitebuilder kisujjból megoldja :)

Ehhez természetesen még pluszban hozzá jön a különféle fájlformátumok transzparens tulajdonság-hordozása (.gif csak igen-nem alapú áttetszőséget ismer, a .png már több szintűt is, de a .jpg egyáltalán nem képes áttetsző értéket visszaadni.)

Van még egy harmadik sarkalatos pontja a webdesignoknak, ez pedig a betűtípus. Bizonyára mindenki találkozott már a ténnyel, hogy bizony nem minden betűtípus található meg minden gépen. Ezért a tényleges tartalmat mindenképpen olyan betűtípusra kell tervezni, ami fixen megtalálható az összes gépen. Ezen betűtípus kiválasztásában nyújt hatalmas segítséget a Typetester.org nevű oldal. Természetesen, a díszítő szövegek (Pl. a fejlécben elnevezett cím) lehet más betűtípus, ilyen esetben képi megjelenítést kell választani, azaz a grafikus programban az adott típussal megírni, megtervezni ahogy kívánjuk, majd képként menteni.)

Webdesign grafikák fájl-tulajdonságai

Ahány média, annyi tulajdonságot kell megjegyeznünk ugyebár. Plakátoknál ugye CMYK szín, nagyobb felbontás, miegymás. Ezzel szemben webes grafikáknál RGB színmódban érdemes dolgozni, 8bites színmélységgel, és bőven elegendő a 72es felbontás, hiszen figyelembe kell venni azt is,hogy az oldal látogatásakor ezeket a képek letöltődnek a gépünkre, ezért a lehető legkisebb mérettel kell rendelkezniük.

Inspiráció és tanulás

Tanulni és megfigyelni nem szégyen. Mert mindenki így kezdte. Ezért szokta mindenki azt javasolni, hogy ha valamiért elakadtunk, nincs ötletünk, nézzünk nyugodtan körbe a különféle webdesign galériákban, az adott témához kapcsolódó oldalakon, hogy a stílusjegyeket megfigyeljük. Ezzel nem azt mondom, hogy másoljunk, mert annak nincs értelme. De mondjuk egy Dark Metal zenét játszó együttes oldalának nem biztos, hogy rózsaszínben kéne pompáznia, de a Playboy weboldalát se tudom elképzelni futurisztikus, vagy fantasy stílusban.
Egy másik jó megoldás a galériák nézegetésén túl a különböző tutorialok, azaz segédletek olvasgatása, mert előfordul, hogy pont egy ilyen leírástól kapunk ötletet egy kis aprósághoz, vagy magához a kompozícióhoz.
Néhány ajánlott oldal: www.tutorial.hu (leírások), www.webpillango.org (leírások), www.firsthandweb.com (webgaléria)

Ezen kívül már csak egy dolgot hagytam ki, de talán ez a legfontosabb: mindig járjunk nyitott szemmel, és legyen nálunk valami jegyzetféleség, mert sose tudjuk, hogy mikor, mitől kapunk ihletet egy-egy designhoz, és annál nincs idegesítőbb, mint mikor otthon ülünk a gép előtt, és nem tudjuk feleleveníteni azokat a gondolatokat!