Nem feltételezem, hogy a “wireframe” ismeretlen szó volna számodra, a digitálisan képzett madarak már biztosan csiripelték körülötted. A fogalmát, pontos célját, értelmét, elhelyezkedését egy tervezési folyamatban viszont lehetséges, hogy nem részletezték. De sebaj, az alábbiakban segítek, hogy kitisztuljon kép.

Mi is a wireframe pontosan?

Hogyha nagyon szeretnénk magyarul hívni, akkor drótváznak szólíthatjuk. Elképzelhetjük egy tervrajzként. Digitális termékek, pl. weboldalak, applikációk tervrajzaként. Kiváló vizuális összefoglalója az alapkoncepciónak, felépítésnek, a működésnek, a funkcióknak és a használat menetének.

A minimálisan használt vizuális elemek hagyják, hogy a szerkezeten, felhasználói folyamaton legyen a hangsúly. Cél, hogy a megrendelő kapjon egy egyértelmű összképet a weboldala struktúrájáról, működéséről, illetve fontos, hogy minél rövidebb idő alatt formálhatóak legyenek ezek a tervek.

Hol van a wireframe helye egy projekt életében?

Mint az a fentiek alapján sejthető, egy projekt kezdeti fázisaiban van szerepe. A csapat már átrágta a brief-et, belőtte a projekt idővonalát, kezdődhet az ötletelés, a wireframe építése. Kigondoljuk, hogyan találja meg legegyszerűbben a felhasználó azt, amit szeretnénk, hogy megtaláljon, illetve milyen elrendezése legyen az oldalaknak, hogy ezt a célt segítse.

A wireframe-nek is több fajtája van, melyeket valósághűségük szerint csoportosíthatunk:

Kevésbé valósághű (Low-Fidelity) wireframe – amikor weboldalt tervezek, számomra mindig ez az első lépés. Szabadkézi vázlatokat készítek lehetséges oldalelrendezésekről. Általában igen messze vannak a végleges produktumtól, ugyanakkor sokkal gyorsabban láthatok egy összképet, mintha rögtön számítógépen kezdeném a munkát. Itt én még nem vonom be a megrendelőt, hiszen 1-2 oldalról van szó, de pl. egy komplex applikáció esetében teljesen helyénvaló lenne már a kézi-vázlatokkal közösen elindulni (Felhasználói élményre – UX-re – specializálódott cégek már a kézzel felvázolt prototípust is valódi alanyokon tesztelik)

3 különböző ügyfelünknek készített lo-fi wireframe-ek

Jelentősen valósághű (High-Fidelity) wireframe – ezek a tervek már sokkal közelebb állnak a végleges megoldáshoz. Akár már szövegekkel is dolgozhatunk, de még mindig nem foglalkozunk kreatív vizuális kérdésekkel (pl. színvilág, betűtípusok), csupán praktikus szempontokat veszünk figyelembe. Ezeken a wireframe-eken már pontosan látható egy oldal felosztása, képek-szövegek aránya, gombok helye, stb. Az élethűségük ellenére még mindig gyorsan módosíthatók, optimalizálhatók

3 különböző ügyfelünknek készített Hi-fi wireframe-ek

A két említett típus valójában két véglet, létezik közepesen valósághű wireframe is, és még természetesen ezt a hármat is árnyalhatnánk.

Ha sikerült véglegesítenünk a megrendelővel a drótvázatot, a grafikusok végre kiélhetik az eddig elfojtott kreativitást. Az oldalt felöltöztetjük, színes-szagossá varázsoljuk, majd fejlesztőink életet programoznak bele.

Pénzügyi szektorban mozgó ügyfelünknek készült webdesign tervezési folyamata wireframe-eken keresztül

Mi a wireframe legfőbb előnye?

A sok-sok előny tulajdonképpen egy dolgot eredményez: időt takarít meg

És az idő pénz. Most gondolhatjuk, hogy “Ugyan kérlek, hogyan takarítana meg időt, amikor ez egy plusz lépés, plusz körök lefutásával?” Igen ám, de gondoljunk csak bele, egy weboldal megtervezése magába foglalja a funkciók, az elrendezések, a design és a látogató útjainak megtervezését is. És a design-t is lebonthatnánk a színvilág, a tipográfia, a formanyelv megtervezésére. Lássuk be, mindkét félnek megkönnyíti a dolgát, ha egyszerre kevesebb információra kell koncentrálni, kevesebb döntést kell meghozni.

Ahogy már említettem, még egy jelentősen valósághű wireframe esetében is viszonylag gyorsan össze lehet rakni több megoldást, ezeket tesztelhetjük, a legsikeresebbet megtartva továbbfejleszthetjük azt. Mérföldekkel gyorsabb egy vázlatot áttervezni, mint egy komplett grafikával elkészített tervet, főleg, ha közben a design-on is módosítani kell, de aztán új elrendezés új kreatív megoldást kíván, és így tovább. Halmozódnak a feladatok, elhúzódnak a módosítási körök, a munkafolyamat kevésbé lesz kiszámítható, végül csúszik a projekt.

Továbbá nem elhanyagolható szempont, hogy nagyban elősegíti a tervező és a fejlesztő békés kapcsolatát a projekt időtartalma alatt (és akár utána is). Időben tisztázásra kerülnek a technikai kérdések illetve azok megoldásának módja.

Ezek után a kreatív tervezéskor már tényleg csak a kreativitásra kell fókuszálni, a megrendelőnek is elég a design-kérdésekben dűlőre jutni, hiszen minden, ami szerkezet, funkció és folyamat, már véglegesítésre került.

A konklúzió tehát tömören…

Minden kedves digitális terméket megrendelőt bátorítunk, hogy amennyiben teheti, éljen a wireframe adta lehetőségekkel. Egy ház építésének sem ugranak neki tervrajzok nélkül.

Réka Scheich
Graphic designer