• Architekt

• Architekt
• Návrhář UI

• Návrh grafického designu

• Plánování iterace
• Plánování testů
• Převod designu do pohledů
• Příprava testů
• Tvorba unit testů
• Tvorba wireframu

• Tvorba wireframu

Produkt integruje hlavní elementy struktury webových stránek (Garret, 2011):

1. Design uživatelského rozhraní – uspořádání a výběr prvků webové stránky.
2. Design navigace – identifikace a definice jádra navigačního systému aplikace.
3. Informační design – umístění a definice priorit informačních komponent.

Sloučením výše zmíněných návrhů do jednoho dokumentu je vytvořena jakási kostra webu, která staví na konceptuální struktuře a definuje cestu, kterou se bude ubírat následný vývoj. Součástí wireframu jsou mimo zmíněných prvků také znění nadpisů, klíčových textů a tlačítek. Wireframe neobsahuje grafický návrh, je tvořen pouze pomocí čar a textu. Obecně se nepoužívají ani žádné obrázky či barvy.

Wireframe může být reprezentován mnoha způsoby (Bank a Waleed, 2014):

• Ruční náčrt
  + rychlost, flexibilita, ideální pro menší projekty
  - není interaktivní, nestandardizováno, spolupráce)
• Papírové výstřižky
  + výstižnost, standardizace, interaktivita
  - rychlost, spolupráce
• Textový či prezentační editor
  + obeznámenost, interaktivita
  - složitost návrhu, pouze základní elementy
• Grafický editor
  + obeznámenost, výstižnost, podpůrné knihovny
  - množství funkcí editoru, spolupráce, interaktivita
• Specializovaný software pro tvorbu wireframe
  + rychlost, široký výběr elementů, interakce, spolupráce
  - Nutnost naučit se s programem, limitované funkce
  

• Osvědčené postupy při tvorbě wireframe