Wireframe.

Wireframe, v preklade drôtený model, je jednoduchý čiernobiely náčrt webovej stránky alebo aplikácie, ktorý zobrazuje rozloženie jednotlivých prvkov ešte pred samotným grafickým dizajnom a programovaním. Zameriava sa výlučne na štruktúru a funkčnosť, nie na farby, fonty či obrázky. Obsahuje zvyčajne len obdĺžniky, čiary a popisky znázorňujúce, kde bude umiestnené logo, menu, texty, obrázky alebo tlačidlá.

Ako wireframe funguje

Wireframe možno prirovnať k architektonickému plánu domu – skôr než sa začnú vyberať farby stien a nábytok, treba vedieť, kde budú miestnosti, dvere a okná. Rovnako pri webe wireframe rieši logiku priestoru a rozloženia obsahu ešte predtým, ako dizajnér pridá vizuálne prvky a programátor napíše kód.

Príklad z praxe

Pri tvorbe e-shopu s kávou dizajnér najprv pripraví wireframe, kde je vľavo hore znázornené logo, vpravo hore vyhľadávanie a košík, pod tým hlavné menu s kategóriami, v strede priestor pre bannerový obrázok, nižšie odporúčané produkty a v päte kontakt. Všetko je zobrazené len sivými obdĺžnikmi a textom, no klient si už vie povedať, či je napríklad tlačidlo „Kúpiť“ dostatočne viditeľné alebo či je menu prehľadné.

Prečo je wireframe dôležitý

Umožňuje odhaliť problémy v štruktúre a použiteľnosti webu ešte pred nákladnou fázou dizajnu a vývoja, kedy sú zmeny oveľa drahšie a časovo náročnejšie.

Hlavné výhody

• Šetrí čas aj peniaze – úprava náčrtu trvá minúty, zmena v hotovom dizajne či kóde hodiny až dni.
• Zlepšuje komunikáciu medzi klientom, dizajnérom, copywriterom a programátorom, keďže všetci pracujú s rovnakým „plánom“.
• Umožňuje sústrediť sa na funkčnosť a používateľský zážitok (UX) bez rozptyľovania farbami či grafikou.
• Uľahčuje písanie textov, keďže copywriter vopred vidí, koľko priestoru má na nadpisy a texty.
• Umožňuje rýchlo meniť rozloženie prvkov bez zložitých úprav dizajnu.

Zhrnutie

Wireframe je prvý, čisto funkčný návrh webu alebo aplikácie bez vizuálnych ozdôb, ktorý ukazuje, čo bude kde umiestnené a prečo. Je základným krokom pri tvorbe webu, ktorý šetrí čas, peniaze a predchádza nedorozumeniam medzi všetkými zúčastnenými stranami.