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. 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.

Tento článek potřebuje úpravy.

Wireframe pro profil osoby

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.).

Nejčastěji používané nástroje

Částečně MS Powerpoint, MS Word a MS Excel. Dále pak MS Visio, OmniGraffle, SmartDraw, Axure, Adobe Flash, Adobe Illustrator a Inkscape.