Wireframe

Wireframe webu (WF) („drátěný model“ nebo stále častěji „skica webu“) se v oblasti vývoje webových prezentací či aplikací používá pro náhled nového řešení. Jde o návrh definující funkci a obsah stránek webu, pro lepší pochopení: WF = projektová dokumentace nového webu.

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.

Externí odkazy

Obrázky, zvuky či videa k tématu Wireframe na Wikimedia Commons
Příklad použití wireframe
Rozdíl mezi wireframe a HTML prototypem
Čo to je wireframe a ako môže pomôcť úspechu webu