Wireframe

Definícia

Wireframe je základná kostra digitálneho rozhrania, ktorá znázorňuje jeho štruktúru, rozloženie obsahu a dôležité funkčné prvky. Používa sa pri návrhu webstránok, aplikácií a ďalších digitálnych produktov ešte pred detailným spracovaním vizuálneho dizajnu.

Najčastejšie pracuje s jednoduchými blokmi, čiarami a zástupným obsahom. Farby, typografia, fotografie či ďalšie vizuálne detaily bývajú obmedzené, aby pozornosť zostala na fungovaní a hierarchii rozhrania.

Popis

Wireframe pomáha tímu ujasniť si, čo bude web/aplikácia obsahovať, kde sa jednotlivé prvky nachádzajú a akú úlohu plnia. Môže zachytiť napríklad navigáciu, textové bloky, obrázky, formuláre alebo tlačidlá.

Pri návrhu sa rieši najmä:

• hierarchia obsahu,
• umiestnenie navigácie a dôležitých prvkov,
• základná funkčnosť rozhrania,
• logika jednotlivých obrazoviek,
• potreby používateľa a jeho cesta produktom.

Wireframe je preto bežným nástrojom v UX dizajne. Umožňuje overiť základné usporiadanie ešte pred tým, než tím venuje čas detailnému UI dizajnu.

Wireframe si netreba zamieňať s mockupom ani prototypom. Mockup sa sústreďuje najmä na vizuálnu podobu, zatiaľ čo prototyp môže simulovať interakcie a správanie produktu. Wireframe rieši najmä jeho kostru a layout.

Wireframy môžu mať rôznu úroveň detailu. Jednoduchý návrh môže vzniknúť ako rýchla skica na papieri, detailnejší už presnejšie zachytáva obsah a jednotlivé komponenty.

Výhodou je, že návrh možno rýchlo meniť a diskutovať o jeho fungovaní ešte pred detailným dizajnom alebo vývojom.

Príklad

E-shop pripravuje novú produktovú stránku. Pred spracovaním finálneho dizajnu vytvorí wireframe, ktorý určí polohu galérie, názvu produktu, ceny, tlačidla na pridanie do košíka, popisu a recenzií.

Tím tak môže najskôr posúdiť, či je obsah správne usporiadaný a používateľ ľahko nájde najdôležitejšie informácie.

Wireframe v tomto prípade rieši fungovanie a hierarchiu stránky ešte pred výberom farieb, typografie a finálneho vizuálu.

Ukážka wireframu webovej stránky