web79 blog

Weboldal készítés menete II. rész

Látogatóinknak és leendő ügyfeleinknek szeretnénk egy kis ízelítőt adni ezen cikksorozatunkkal az általunk végzett munkáról.

Blogsorozatunk 2. részében a gyakorlati munka kezdő fázisait vesszük szemügyre kicsit behatóbban.

Sorozatunk első cikkében az előkészületi folyamatokkal foglalkoztunk. A weboldal késztés egy rendkívül összetett folyamat, ami megfelelő körültekintést és szakértelmet kíván. Ebben a bejegyzésben az elméleti szakasz gyakorlati kivitelezésének legelső fázisát vesszük szemügyre. Stúdiónk már a tervezésre is kiemelt figyelmet fordít. Sok önmagát webdesignernek vagy webtervezőnek minősítő cég úgy gondolja, ha már tudja kinek készül a honlap és birtokában vannak a megkapott fotó és grafikai elemek (pl.: logók), akkor következhet a website grafikai kivitelezése. A web79 ezt nem így látja. Mi nem a grafikus tervekkel állunk elő először, hanem egy wireframe, vagy magyar kifejezéssel élve drótváz készítésével folytatjuk a munkát.

Ez a metódus számos előnnyel jár. A megrendelővel közösen készülő tervek sokkal pontosabban képesek visszaadni az általa elképzelt koncepciót. Megkönnyíti a webdesigner munkáját is, így az egyik leginkább időigényes folyamat rövidíthető le, ezzel jelentős költséget spórolva meg.

Wireframe, avagy drótváz készítése

A wireframe a majdani honlap sematikus ábrája. A drótváz is grafikusan jeleníti meg a készülő honlapot, de még a design elemek nélkül. Célja a weboldal arányainak megtervezése, funkcióinak beillesztése és elhelyezése. A wireframe grafika elkészítése előtt már kész oldalstruktúrával és funkcióknálattal rendelkezünk a készülő lap kapcsán, így a sematikus ábra már a menüpontokat és szolgáltatásokat is képes megmutatni a megrendelő számára.

wireframe 1. ábra

Az így elkészült ábra alapján már képet kap a megrendelő, hogyan fog kinézni weboldala. A tervezési folyamat során eldől az is, hol helyezkednek majd el a menük. Két gyakori elrendezés van és azoknak számos variációs lehetősége. A fenti képen egy oldalsó menüvel készülő weboldal nyitólapjának terve látható. A másik gyakori metódus a vizszintesen elhelyezkedő menü kialakítás.

wireframe 2

Mindkét módszernek vannak előnyei és hátrányai. A függőleges menü könyebben bővíthető később tetszőleges számú ponttal, míg a vízszintes kialakítás esetén a későbbi kiegészítés már nehézségekbe ütközhet, viszont helyigénye jóval kevesebb.

Látható a terveken, hogy a nyitólap egy slidert és keresőt is tartalmaz, a fontosabb információk közül pedig 3 kiemelten is szerepel a lapon, azokat előtérbe helyezve a látogatók irányába. A slider további fontos információk helytakarékos, animált megmutatását teszi lehetővé tetszőleges számú egymást váltó lappal.

A tervezés természetesen nem áll meg itt. A módszer segítségével a tartalmi oldalak kialakítását is elvégezzük. Az így elkészült tervrajzok segítik a munkánkat és az ügyféllel zajló együttműködést. Konkrét képet kaphat az készülő honlap arányairól, hol lesznek képek és szövegek.

wireframe 1.a

A fenti ábra a vízszintes kialakítású menüvel készülő weboldal egy tartalmi oldalát mutatja meg. A korábban bemutatott függőleges menüvel készülő honlap alant látható.

wireframe 2.a

Természetesen az ábrák egy igen leegyszerűsétett sematikus oldalt ábrázolnak, de az már ezekről is látható, hogy ez a módszer milyen hasznos tud lenni. Sok későbbi félreértést kerülhetünk el általa. A méretek, az arányok pontos meghatározásával a grafikus tervezés folyamatát könnyítjük meg. Természetesen ezen tervekhez nem kell teljes mértékben ragaszkodni a grafikusnak, inkább csak iránymutatást adnak. A módszerrel megtervezzük a teljes weboldalt, űrlapokkal, hírek megjelenítésére szolgáló aloldalakkal együtt.

Vissza