A weboldal tervezés alapja a drótváz készítés

Minden weboldal megtervezésének kezdő lépése, hogy valamiféle vázlatot készítünk arról, hogyan is fog felépülni a weboldalunk. Legelőször nem árt össze írni egy struktúrát, hogy egyáltalán milyen szekciókat, tartalomtípusokat akarunk megjeleníteni. Pl. kategóriák, hírek, képgalériák, kérdőívek és így tovább. Nem árt azt is tisztázni, hogy az egyes szekciókhoz mennyi tartalom fog majd társulni.

wireframe

Mi az a drótváz

A drótváz vagy hálóterv valójában a készülő honlap sematikus ábrája, ami egy vizuális útmutató ahhoz, hogyan is fog kinézni a weboldalunk. Megmutatja annak szerkezeti felépítését, a szekciók elrendezést és azok helyét, a navigációs rendszereket, al oldalakat, lista oldalakat, galéria oldalakat, egyszóval a legtöbb tartalmi egységet. A drótváz nem tartalmaz vizuális elemeket, mint például, képek, szövegek, mintázatok, színek, grafikák, helyette csak dobozok és a vonalak vannak. A hangsúly főleg a funkcionalitáson, és a viselkedésen van.

Emellett fontos az interakciók, felhasználói viselkedések megtervezésre, folyamatábrák készítése. A drótváz tervezése nem csak a kezdőlapra terjed ki. Főleg nagyobb terjedelmű oldalakon, ahol több szekció van, érdemes vázlatokat készíteni belső oldalakról, galéria oldalakról is. Drótváz készítéshez sok féle szoftver létezik, de van egy nagyon hatékony, minimális áron beszerezhető és nagyon gyors eszköz, amivel könnyedén elboldogulhat bárki. Papír és ceruza.

Drótváz

Mire jó a drótváz?

A hálóterv készítés egy hatékony módja annak, hogy gyorsan képernyő terveket, weboldal prototípusokat tudjunk létrehozni. A weboldalakon túl mobil oldalak, webes alkalmazások, vagy egyéb képernyő-alapú rendszerek ( mondjuk sorszámkiadó terminál a hivatalokban ) alapjainak megtervezésére is kiválóan alkalmas módszer.

Hálótervre általában azért van szükség, hogy megbizonyosodjunk arról, hogy egy koncepció valóban működhet, és kiderüljenek azok a gyenge pontok, amiken még finomítani kell, esetleg teljesen feleslegesek. A honlap navigációs problémái is könnyen napvilágra kerülhetnek. Drótváz tervezéssel a konstrukciós változtatásokat hatékonyabban el lehet végezni. Gyorsan és könnyen újra rajzolhatjuk a kényes részeket.

Egy tipikus webes drótváz tartalmazza

  • Gombok, fejléc, lábléc, navigáció, tartalmi elemek, branding elemeket
  • Elem csoportosításokat, navigációs sávokat
  • Címkéket, Call to Actionoket, szalagcímeket és alcímeket
  • Szövegblokkokat és a képek helyét

Amikor valaki neki áll saját weboldalát megtervezni, első dolga, hogy kész weboldalakat nézeget, próbálja meghatározni a neki tetsző stílust. Ez nem feltétlenül baj, de sajnos néha ügyet sem vetnek arra, hogy a weboldalak, amiket kinéztek maguknak, esetleg abszolút nem illenek a profiljukra. A szimpatikus weboldalakról aztán kiszórják, ami nem kell. “Nekünk nincsenek blog bejegyzéseink, azt vegyük ki”. Nem baj, hogy egy komplett szekciót ki kell venni a lapról, amitől megbomlik az egész honlap struktúrája.

Az ilyen favágómódszereknek gyakran redesign a vége, mert a végeredmény inkább hasonlít egy Stephen King regény mellék szereplőjének megcsonkított tetemére mint, egy professzionális weboldalra.

Ezért fontos, hogy saját profilunkra, saját szolgáltatásainkhoz, saját tartalmunkhoz tervezzünk honlapot. Készítsünk először drótvázakat, folyamatábrákat, webhelytérképeket kézzel, majd utána gondolkozzunk megfelelő a design elemeken.

Nagyszerű, elolvastad! Oszd meg a világgal!

Írta: Pócsik Emese webdesigner

2007 óta dolgozom a design szakmában. Munkáim nagy részét céges weboldalak, portálok tervezése teszi ki. Rólam bővebben »

Iratkozz fel értesítési csatornámra!

Tetszett a bejegyzés? Iratkozz fel csatornámra és küldök Neked E-mail értesítőt, ha ehhez hasonló új cikk kerül fel a blogra.