A drótváz a terv váza. Dobozok a képeknek. Vonalak a szövegnek. Feliratok a gomboknak. Nincsenek színek. Nincsenek betűtípusok. Nincsenek kidolgozott vizuális elemek. Csak a szerkezet, csontjaiig lecsupaszítva.

A drótvázak (wireframe) a tervezési folyamat elején, a vázlatok után, de a nagy felbontású makettek előtt jelennek meg. Feladatuk az elrendezéssel kapcsolatos kérdések megválaszolása: hová mutat a navigáció, hány oszlop van, mi a hierarchia. A csúnya kivitelezésük szándékos. Ha egy drótváz túl késznek tűnik, az érdekelt felek a kék árnyalatáról kezdenek vitatkozni ahelyett, hogy azon gondolkodnának, vajon működik-e az elrendezés.

Mit mutat egy drótváz?

• Főbb elemek elhelyezése: fejléc, navigáció, tartalom, lábléc
• Az alkatrészek relatív mérete és prioritása
• Képernyők vagy oldalak közötti áramlás
• Interaktív elemek, például gombok és űrlapok

Az olyan eszközök, mint a Balsamiq és a Figma, felgyorsították a wireframe-ezést. Egyes tervezők még mindig papírt és filctollakat használnak. Az alapanyag kevésbé számít, mint a gondolkodás. A wireframe egy beszélgetésindító. Azt mondja: itt a struktúra, mit gondolsz? A változtatások ebben a szakaszban olcsók. Miután a vizuális tervezés elkészült, egy oldalsáv áthelyezése azt jelenti, hogy mindent újra kell csinálni a későbbiekben. Inkább mozgasd át a wireframe-ben.