A drótváz (angolul wireframe) a weboldal vagy az app tervrajza. Szürke dobozokból és helyőrző szövegekből áll, és azt mutatja meg, hogy egy képernyőn hol lesz a cím, a menü, a termékkép vagy a vásárlás gomb. Szín és fotó még nincs rajta, és ez szándékos. A neve onnan ered, hogy a vázlat olyan, mint egy épület drótból hajlított váza.
Egy színes tervnél a beszélgetés szinte mindig a látványra terelődik. A kék túl sötét, a fotó nem tetszik. A drótváznál ilyen kérdés fel sem merül, így arra lehet figyelni, ami ebben a szakaszban számít, vagyis hogy megtalálja-e a látogató, amit keres, és jó sorrendben kapja-e meg az információt.
Mit döntünk el a drótvázon
- Milyen oldalak lesznek, és hogyan kapcsolódnak egymáshoz
- Mi kerül egy képernyőn a legfelső, legjobban látható részre
- Hány lépésből áll egy vásárlás vagy egy ajánlatkérés
- Hol kell magyarázat, és hol elég egy rövid címke
Egy weboldalnál a drótváz többnyire a fő oldaltípusokra készül, például a főoldalra és egy szolgáltatásoldalra, mert a többi oldal ezekből a mintákból épül fel. Egy appnál vagy egy összetett webshopnál a teljes folyamatot végigrajzoljuk, képernyőről képernyőre, hogy egyetlen lépés se maradjon ki.
Ha a mobilos és az asztali nézet érdemben eltér, a drótváz mindkettőre elkészül. A mobilos változatnál sokszor kiderül, hogy egy elem, ami asztali gépen kényelmesen elfér, a telefonon három görgetésnyire kerül a fontos tartalomtól, és jobb, ha ezt még a tervezés elején látjuk.
A drótvázon minden módosítás olcsó. Egy dobozt áthelyezni pár perc, egy kész designban vagy egy már leprogramozott oldalon ugyanez a változtatás napokba telhet. Ezért érdemes itt végigbeszélni a kérdéseket, és csak akkor továbblépni, amikor a szerkezet mindenkinek világos.
A drótvázból később kattintható prototípus lehet, amelyen a működést ki is lehet próbálni, a jóváhagyott szerkezetre pedig ráépül a UI design, vagyis a márkád színei és képei. Ha nálunk tervezel, a drótvázat közösen nézzük át, és a visszajelzéseid alapján véglegesítjük, mielőtt egyetlen színt is választanánk.