Menü

Mi az a drótváz készítés (wireframing)?

2018. március. 21. | 1891 |

Amennyiben egy weboldal tervezése és megvalósítása során nincsenek egyértelműen meghatározva a célok, a teljes folyamat könnyen megakadhat és végül nem azt az eredményt kapja a megbízó amire számított, ami az elképzelése volt. Ezt azonban könnyen elkerülhetjük, egy már évek óta bevett gyakorlat, a drótváz készítés használatával. Cikkünkben röviden bemutatjuk mit is jelent a drótváz készítés, avagy angolul wireframing.

Röviden

A drótváz készítés egy módszer amely segítségével kialakíthatjuk egy weboldal felépítését. A drótvázat elsősorban olyan weboldalak design-jának meghatározására használjuk, melyek előtérbe helyezik a felhasználói élményt (UX). A drótvázakat a fejlesztési folyamat korai szakaszában használjuk az oldal alapvető struktúrájának kialakítása alatt, még a vizuális és szöveges tartalom kialakítása előtt.

Bővebben

A drótváz bemutatja és mindenki számára megérthetővé teszi, milyen elemeket fognak tartalmazni a főbb oldalak. Ez a felhasználók viselkedési folyamatának egyik legfontosabb része a weblap tervezése során.

A drótvázak legfontosabb célja, hogy egy weboldaltulajdonos megértse pontosan hogyan is fog felépülni weboldala. Bemutatja a weboldal struktúráját, és milyen funkciókat fog tartalmazni és azok használata milyen eredményt fog adni a felhasználók számára. Ezáltal ezek véglegesíthetők még azelőtt, hogy a weboldal készítés kreatív megvalósítása elkezdődne.

A drótváz használatának legfontosabb előnyei

A drótváz vizuális mutatja be egy weboldal szerkezetét

Egy összetett weboldal esetén a webhelytérkép nem elegendő a döntések meghozatalához. Mivel a drótváz vizuális formában mutatja be egy weboldal felépítését, így a fejlesztők és a megbízó számára egyértelművé válik, hogyan is fog felépülni a weboldal és milyen funkciókat fog tartalmazni. 

Minden fél számára egyértelműsíti a weboldal jellemzőit

Sokszor előfordul, hogy az ügyfelek nem pontosan, vagy egyáltalán nem értik a következőket:

  • Hero image

  • Google térkép integráció

  • Termékszűrés

  • Dobozok

és lehetne tovább sorolni a több száz rendelkezésre álló lehetőséget.

A drótváz használatával mindenki számára egyértelművé válik, pontosan mit értünk egy-egy elem alatt és azok hogyan is fognak a kész weboldalon működni, milyen funkciót látnak el.

Ráadásul mivel a drótváz mentes mindenféle látványos elemtől, így könnyebbé válik annak eldöntése, hogy valóban szükség van e az adott funkcióra, hasznos – e használata a weboldal céljának eléréséhez.

A használhatóságot és hasznosságot helyezi előtérbe.

Ez a legfontosabb célja a drótváz készítésnek, mivel arra összpontosít hogy minél objektívabban határozzuk meg a következőket:

  • Konverziós csatornák

  • Navigáció

  • Funkciógombok

  • Cselekvésre ösztönzés (CTA) elhelyezése

Vagyis arra összpontosít, hogy egy adott funkció hogyan fog működni a weboldalon.

Egyszerűsítik a tervezési folyamatot

Ahelyett, hogy a tervezés minden lépését (funkciók, grafika, elrendezés, stb) egyszerre végeznénk el, minden lépést külön-külön végzünk el. Ez lehetővé teszi, hogy az esetleges nem kívánt, vagy előreláthatólag nem hasznos funkciókat, már a tervezés elején módosítsuk.

Időt takarít meg

A tervezés egész folyamata mindenki számára egyértelművé válik:

  • A fejlesztők pontosan értik az összes lépést

  • A tartalom feltöltése gyorsabb lesz

A tapasztalatok alapján, működik!

Egy weboldal létrehozása egy folyamat. Ha már a folyamat elején egyértelművé tesszük, pontosan mit és hogyan szeretnénk elérni, elkerülhetők az egész folyamat alatt a hibák és késések.

Drótváz, prototípus és mockup. Mi a különbség közöttük?

Drótváz

A drótváz a weboldal leegyszerűsített ábrázolása. Világosan meg kell jelenítenie a következőket:

  • A tartalom főbb csoportosítása (mi?)

  • Az információ megjelenítésének szerkezete (hol?)

  • A felhasználók által végezhető folyamatok leírása és leegyszerűsített megjelenítése (hogyan?)

Habár a drótvázak szürke dobozoknak néznek ki, használatuk nagyon fontos, mivel ezek a dobozok jelentik a tervezés gerincét.

Mikor használjuk?

A drótvázak általában a weboldal dokumentációjában találhatók meg. Mivel gyorsan elkészíthetők és egyértelműek, így a fejlesztők közötti esetleges kérdések megválaszolására is készíthetünk drótvázakat. Rajtuk keresztül vizuális formában adhatunk választ a felmerülő kérdésekre. Ezáltal mindennemű félreértés elkerülhető.

Prototípus

A prototípust gyakran összetévesztik a drótvázzal. A prototípus a végleges weblaphoz hasonló felület, amivel a felhasználói viselkedés modellezésére vagyunk képesek.

Lehetővé teszi a weboldal funkcióinak tesztelését a felhasználók szemszögéből. Ezáltal tesztelni tudjuk, hogy a megtervezett folyamatok megfelelően működnek – e, és még a végleges megjelenés előtt kijavíthatjuk az esetleges hibákat.

Mikor használjuk?

A prototípusokat a tényleges fejlesztés megkezdése előtt, a felhasználói tesztelés során használjuk. Érdemes úgy megalkotni, hogy részei felhasználhatók legyenek a tényleges weblapfejlesztés során, ezáltal rengeteg időt, erőforrást és pénzt takaríthatunk meg.

Mockup vagy mock-up

A mockup egy terv, ami statikus formában jeleníti meg a weboldal vizuális megjelenését. Egy jól megtervezett mockup a következőket biztosítja:

  • Statikus módon ábrázolja a weboldal alapvető funkcióit, tartalmát és struktúráját

  • Lehetővé teszi, hogy a megvalósítás előtt módosítsunk a weboldal vizuális részét

Mikor használjuk?

Jól kiegészítik a drótvázakat, mivel grafikusan jeleníti meg a drótvázban szereplő funkciókat.

A 10 legnépszerűbb drótváz készítő eszköz

Wireframe.cc

Felület: Online
Ára: $19 / hó

Moqups

Felület: Online
Ára: $19 / hó – tól, rendelkezik ingyenes verzióval

UXPin

Felület: Online
Ára: $13 / hó – tól, rendelkezik ingyenes verzióval

Fluid UI

Felület: Online
Ára: $8,25 / hó – tól, rendelkezik ingyenes verzióval

Balsamiq Mockups

Felület: Online, Mac, Windows
Ára: $9 / hó – tól, rendelkezik ingyenes verzióval

Axure RP

Felület: Mac, Windows
Ára: $29 / hó – tól

Pidoco

Felület: Online
Ára: $12 / hó – tól

Visio

Felület: Windows
Ára: $5 / hó – tól

InDesign CC

Felület: Mac, Windows
Ára: $19.99 / hó – tól

Photoshop CC

Felület: Mac, Windows
Ára: $19.99 / hó – tól

Összefoglalás

A drótvázak használata megkönnyíti mind a megbízók, mind a weboldaltervezők és fejlesztők tevékenységét. Egyértelműsíti ki mit akar, mire gondol a tervezés és a megvalósítás során. Rengeteg időt és erőforrást takaríthatunk meg használatukkal, ezért mindenképpen javasolt a drótvázak készítése minden weboldal tervezése és megvalósítása során.

Tetszett a cikk? Ne maradj le az újdonságokról!

Iratkozz fel és havonta egyszer küldünk egy összefoglaló e-mailt!