Sokan azt gondolják, hogy a webdesign a színekkel és betűtípusokkal indul. Pedig az első lépés egy egyszerű, fekete-fehér vázlat – a drótváz. Ebben a cikkben megmutatom, mi az a wireframe, miért fontos a használata, és hogyan segít abban, hogy a weboldalad valóban működjön – ne csak jól nézzen ki.
Akár megbízol valakit, akár te magad készíted, az első lépés mindig legyen stratégiai megfontosálú, amihez elengedhetetlen segítséget nyújt egy jó drótváz.
De pontosan mi is az a drótváz, és miért van szükség rá?
A drótváz alapvetően azért létezik, mert sokszor sokan kezdik úgy a folyamatot, hogy van egy ötlet, amit gyorsan le szeretnének jegyezni egy adott projektel kapcsolatban. Pontosan ez a drótváz. Az ötleted váza. Mint egy alaprajz az építkezésen. Fogalmad sincs, hogy hogyan fog majd kinézni, nem tartalmaz bútorokat, burkolatokat, csak a vázat, hogy a falak hol és hogyan fognak állni. Nem a designra fókuszál, hanem az elrendezésre, felhasználói élményre, útvonalra és arra, hogy a weboldal ne csak szép, hanem funkcionális is legyen. Ennél a fázisnál mutatjuk be, hogy mire is gondoltunk, adunk iránymutatást, hogy mi lenne fontos az adott oldalon és milyen tartalmakat várnak a leendő ügyfeleid.
A jövőbeli design nem tükröződik benne, ezek letisztult, színek és design elemek nélküli tervek. Persze ha nem projektben dolgozol több szakemberrel, akkor ezek a szabályok nem olyan szigorúak.
Kis projekteknél alapvetően bőven elegendő egy egyszerű drótváz, amely ellátja a must have funkciókat.
Viszont, ha az ember lánya nagyobb projekteken dolgozik, esetleg design stúdiókkal, webfejlesztőkkel, egész csapattal együtt, akkor ennek vannak különböző szintjei.
A drótvázaknak három fő típusa létezik, attól függően, hogy mennyire részletesek:
Ezek a szintek segítenek abban, hogy a tervezés fokozatosan fejlődjön, és minden fázisban könnyebb legyen a tesztelés és az egyeztetés.
Én a drótváznál meghatározom az alapvető stratégiát. Hogy melyik blokk miért oda kerül, ahova, milyen gombok hol és hogyan helyezkedjenek el. Egy bemutakozó weboldal esetében itt főleg az ügyfél által megadott információk alapján határozom meg, hogy mi és milyen sorrendben kerül oda, annak tükrében, hogy a felhasználónak milyen sorrendben van szüksége adott információra. Itt szoktam segíteni ügyfeleknek abban, hogy milyen típusú és terjedelmű szövegekre lesz szükség a weboldaluk esetében.
Miért is hasznos még ezen felül a munkám során?
A fentiekből kiindulva felmerülhet a kérdés, hogy de akkor mit is tartalmaz egy drótváz pontosan?
A szövegek helye is lehet akár csak egy egyszerű négyzettel jelölve, de akár jelölheted hullámos vonallal. Ha rendelkezel esetleg bármilyen, ennek az elkészítéséhez szükséges programmal, akkor helykitöltő szöveggel is jelölheted, mint például a Lorem ipsum szövegek.
Alapvetően minden projekt úgy indul, hogy az ügyfél elküldi a rendelkezésre álló képeket és szövegeket. Ezek alapján látjuk, hogy az adott részhez mekkora blokkra is lesz szükség, így a drótváz megtervezése is egyszerűbb, illetve tudunk tanácsot adni, hogy túl rövid vagy túl hosszú az adott weboldalhoz. Egy egyszerű bemutatkozó weboldalon ugyanis lényegretörőnek kell lenni a szövegeket illetően is.
Viszont! Ha egy kisvállalkozónak, mint te, fogalma sincs arról, hogy hova és milyen szövegekre van szüksége, akkor a drótvázzal tudunk iránymutatást adni. Én erre is szoktam használni, ugyanis a legjellemzőbb az, hogy mi mondjuk meg, hova és milyen céllal van szükség szövegekre. Ez alapján viszont már könnyebben meg tudod írni magad vagy fel tudsz kérni egy szövegírót, hogy készítse el a drótváz alapján a szövegeket. Neki is könnyebb dolga van, ha látja, hogy nagyjából milyen terjedelemben kell gondolkodnia.
A válasz meglehetősen egyszerű! Mert segít abban, hogy jobban átlásd a miérteket és a hogyanokat. Ugyanis egy design terv készítéséhez már biztosan szükséged lesz egyéb programokra, mint FIGMA, CANVA, ADOBE. Viszont egy egyszerűbb drótváz elkészítéséhez elegendő egy A4-es lap és egy ceruza vagy toll.
Először írd le, hogy miket szeretnél megjeleníteni az oldaladon, milyen információid és képeid vannak. Majd gondold végig, hogy ezeket milyen blokkokban rendszerezve tudnád felhasználni (szolgáltatásaim, rólam, ügyfélvélemények…). Majd ha ez megvan, akkor gondold végig, hogy nagyjából hány blokk lesz. Ezeket is gyűjtsd össze, majd ez alapján már tudod, hogy az A4-es lapon milyen méretben lesz szükséged a drótvázra.
Majd vagy szabadkézzel vagy vonalzóval, itt számodra egyáltalán nem az esztétika lesz most fontos, elvégre magadnak készíted, szóval úgy készítsd el, hogy abból később tudj dolgozni, inspirálódni.
Tényleg lehet a legegyszerűbbtől a legbonyolultabbig bármi, ami segít majd neked a későbbi oldal felépítésében. Ennek elkészítése során fontos figyelembe venni, hogy mit szeretnél elhelyezni az oldalon, de a legfontosabb mégis a HOL kérdése.
Ugyanis kiemelten fontos, hogy a felhasználók szemszögéből közelítsd meg az oldalad. Az a fontos, hogy ők minden, a szolgáltatás igénybevételéhez vagy a termék megvásárlásához szükséges információt megtaláljanak, a MEGFELELŐ SORRENDBEN. Ezt hívják UX (felhasználói élmény tervezés) szemléletnek. Ha megfelelő figyelmet fordítasz erre a lépésre, akkor rengeteg időt spórolhatsz magadnak azzal, hogy később ezeket már nem kell újragondolni, erre a vázra húzod majd rá az arculatod elemeit.
Ha maradt még kérdésed, vagy épp el vagy akadva a saját weboldaladdal, akkor keress bizalommal akár egy ingyenes konzultációra vagy weboldal tanácsadásra, auditra!
Szia! Évi vagyok, webdesigner! A blog, ahol most jársz azért készül, hogy összegyűjtsem azt a tudásanyagot, amelyet bátran fel tudsz használni, ha elakadnál vagy nem értenél valamit a design területet illetően. Igyekszem a lehető legérthetőbben, tippekkel, trükkökkel érdekességekkel izgalmassá tenni az itt töltött időt.
Ha úgy érzed, van olyan téma, amiről szívesen olvasnál, írd meg nekem!
Ha úgy érzed, segítségre lenne szükséged, keress bátran és segítek neked. ÁTbeszéljük az elakadásaidat és megtaláljuk a megfelelő megoldást. Legyen szó akár weboldal készítésről vagy egyéb problémáról.
