Wireframe je základná, dvojrozmerná vizuálna reprezentácia webovej stránky, rozhrania aplikácie alebo rozloženia produktu. Dá sa popísať aj ako kostrový obrys alebo funkčná skica webovej stránky alebo aplikácie. Wireframe zvyčajne zdôrazňuje iba funkčnosť, nie skutočný štýl a vizuálne prvky konečného produktu. To je dôvod, prečo väčšina wireframov vyzerá jednoducho.

Wireframe poskytujú jasný prehľad o štruktúre stránky, rozložení, informačnej architektúre, toku používateľov, funkčnosti a o očakávanom správaní na webe alebo v aplikácii. Keďže wireframe zvyčajne predstavuje počiatočný koncept produktu, štýl, farba a grafika sú obmedzené na minimum. Využívajú sa odtiene šedej namiesto farieb, zjednodušené až primitívne verzie obrázkov a tiež Lorem Ipsum pre text.

Wireframy môžu byť nakreslené ručne alebo vytvorené digitálne, v závislosti od toho, koľko detailov je potrebných. Wireframing je proces, ktorý najčastejšie využívajú dizajnéri UX alebo produktoví dizajnéri. Tento proces umožňuje všetkým zainteresovaným stranám dohodnúť sa na tom, kde budú informácie umiestnené ešte predtým, ako vývojári vytvoria rozhranie pomocou kódu.

Typy wireframov

Existujú tri hlavné typy wireframov, a to low-fidelity wireframy, mid-fidelity wireframy a high-fidelity wireframy. Najvýznamnejší rozdiel medzi jednotlivými typmi je množstvo detailov, ktoré obsahujú. Môžu sa však líšiť aj v tom, ako sú vytvárané. Low-fidelity wireframy sú bežne nakresnené, pričom mid a high-fidelity wireframy sú vytvárané pomocou digitálnych kanálov. Nie je to však pravidlo.

Low-fidelity wireframy

Tieto modely sú najzákladnejšími vizuálnymi reprezentáciami webovej stránky a zvyčajne slúžia ako východiskový bod návrhu. Majú tendenciu byť nepresné, bez akéhokoľvek zmyslu pre mierku alebo presnosť. Vynechávajú všetky detaily, ktoré by potenciálne mohli rozptyľovať. Tieto modely sú užitočné na načrtnutie nápadu a pri rozhodovaní o rozložení.

Mid-fidelity wireframy

Ide o najčastejšie používaný model zo všetkých troch modelov. Aj keď sa stále vyhýbajú veľkým detailom, ako sú obrázky alebo typografia, konkrétnym komponentom je mu priradených viac detailov a funkcie sú od seba jasne odlíšené. Zvyčajne sa vytvárajú pomocou digitálnych nástrojov.

High-fidelity wireframy

High-fidelity modely majú vysokú presnosť. Môžu obsahovať skutočné obrázky aj relevantný text. Tieto modely by sa mali využívať pri neskorších fázach cyklu návrhu produktu. Vďaka pridaným detailom sú ideálne na skúmanie a dokumentovanie zložitých konceptov.