Wireframe

Wireframe webu (WF) („drátěný model“) se v oblasti vývoje webových prezentací či aplikací používá k vizuálnímu návrhu rozložení prvků a struktury nového řešení. WF je de facto kostrou budoucí mobilní aplikace, webu nebo jiného digitálního produktu. Přirovnat ho můžeme rovněž k architektonickému plánu před výstavbou.^[1] Pomáhá tedy definovat funkčnost a obsah webových stránek nebo aplikace, přičemž se nezaměřuje na finální grafický design ani interakce.

Funkce

WF definuje rozmístění funkčních prvků na stránce. Nejedná se v žádném případě o grafický návrh, neobsahuje obrázky a je tvořen pouze pomocí čar a textu. Nedoporučuje se ani použití barev, až na výjimky, které je potřeba odlišit.

WF připravuje informační architekt, ten přenese do nákresů požadavky klienta a usnadní tak práci na řešení. Klient vidí, jak web bude fungovat a proč. Programátoři, grafici a ostatní členové týmu pak vidí, co se kde nachází a co je s čím spojeno. Zároveň pak nedochází ani ke kolizi s klientem, který např. může reklamovat, že v řešení chtěl video modul a výsledný web jej nemá. Dobrý dodavatel přikládá WF ke smlouvě a chrání tak zájmy své i klientů.

Použití

Vytvoření WF by mělo být součástí kompletní nabídky dobrého dodavatele webového řešení, včetně cenové kalkulace, harmonogramu prací a technické specifikace. Před samotou prací je potřeba definovat obchodně/marketingovou strategii a tu pak do WF implementovat. Zároveň je potřeba pamatovat na to, že WF a výsledná grafika je jedno a druhé. Následná grafika zachovává prvky na stránce, ale od WF se může lišit velikostí a pojetím jednotlivých prvků.

Postupem času se WF stávají významnou součástí každého lepšího/kvalitnějšího webového řešení. Minimalizuje se tak rozdíl mezi původním zadáním a výsledným řešením. Předchází se také ústřelům v cenové kalkulaci.

Rozdělení

Textový wireframe slovně definuje obsah a funkční prvky stránky. Využití WF je spíše okrajové, řeší opravdu jen hrubé myšlenky a naznačuje, co je a není možné.
Stručný wireframe přidává pomocná pole, která definují pozice na stránce a ukazují rozmístění textu. Tento druh WF se používá u jednodušších a intuitivnějších řešení, která nejsou technicky a technologicky tak náročná.
Podrobný wireframe do detailu ukazuje pozice na stránce/stránkách. Může operovat s ostrými texty, obrázky, tabulkami apod. Podrobně popisuje chování stránky, její směřování, napojení atd. Tento druh WF se používá u komplikovanějších a náročnějších řešení.
HTML prototyp (proklikávací wireframe) přidává chování a naplno tak ukazuje provázanost a smysl celého systému. Toto řešení se používá jen v nejnáročnějších případech (intranet; extranet; B2B portál, B2C portál s napojením na informační systém apod.).