Co je wireframe webu, proč ho potřebujete a jak ho vytvořit?

Tvorba webu i vývoj webových aplikací jsou založené na posloupnosti řady dílčích procesů. Jedním z těchto procesů je příprava wireframu, který ovlivňuje strukturu webu, rozložení prvků i finální částku za dodání digitálního produktu. Co si pod pojmem wireframe představit, proč byste ho měli chtít vidět a čeho se držet při jeho přípravě? Na to vše vám odpoví následující řádky.

Co je wireframe webu?

Wireframe, česky drátěný model, představuje tu nejzákladnější kostru webu, naznačuje jeho strukturu, rozložení prvků, funkcionalitu a charakterizuje jednotlivé kontejnery (sekce stránky). Na drátěný model se tak můžete dívat jako na jakýsi nákres toho, jak bude web vypadat. Lépe si tak představíte podobu navigace i kompozici jednotlivých stránek.

Na rozdíl od webdesignu wireframe neřeší konkrétní podobu prvků, jako jsou barvy, tvary či obrázky a ilustrace. Tvorbou wireframu se typicky zabývá UX designer, který připraví právě zmíněnou strukturu či kompozici stránek, a následně předá pomyslné žezlo UI designerovi, který už řeší to, zda bude tlačítko zelené se zaoblenými rohy nebo zda budou jednotlivé texty doplňovat ilustrace či fotky.

Wireframe je tedy možné chápat jako první krok návrhu designu webu. Přičemž designer nejprve vytvoří tuto černobílou kostru, tu vám pošle ke schválení a následně předá UI designerovi, který původní kostru obalí do zajímavého a přitažlivého kabátku.

Konkrétnímu návrhu uživatelského rozhraní (UI) pak může předcházet ještě příprava takzvaného prototypu. Ten je na rozdíl od wireframu webu dynamický, můžete si jej proklikat a ověřit, zda web obsahuje všechny části, které požadujete. Ukazuje tedy, jak budou jednotlivé stránky webu provázány, kam se dostanete po kliknutí na daná tlačítka a podobně.

Tvorba webu: 5 důvodů proč nejprve vytvořit wireframe

Největším přínosem tvorby wireframu webu je ověření souladu mezi představou designera a zadavatele (vámi). Tvorba webu i vývoj webových aplikací jsou postaveny na vzájemné spolupráci a sdílení nápadů. Ještě před tím, než dodavatele oslovíte byste proto měli připravit takzvanou zadávací dokumentaci čili soubor, ve kterém shrnete svůj koncept.

Designer nebo vývojář si na základě tohoto dokumentu vytvoří v hlavě vlastní představu o tom, jak budou stránky vypadat a tuto představu přenese do wireframu. Následně vám ji předloží a vy můžete ihned připomínkovat případné nedostatky. Ani jedna strana tak nebude trávit čas nad něčím, co by bylo následně nutné předelat – zkrátka a dobře si vyjasníte podobu digitálního produktu ještě před tím, než se začne skutečně vyvíjet.

1. Časová a finanční efektivnost

Wireframing šetří čas všech zainteresovaných stran. Náčrtek budoucího webového rozhraní je skvělým materiálem pro klienta i realizační tým nejen díky tomu, že dovoluje rychlou validaci všech úvah. Hlavní výhodou je skutečnost, že umožňuje vzájemné pochopení a realizaci okamžitých změn.

Měnit cokoliv v již hotovém designu by bylo mnohem zdlouhavější a tím i dražší. Nelíbí se vám velikost záhlaví? Ihned ho zmenšíme. Je výzva k akci zastíněná nějakým prvkem? Zkusíme se na to podívat jinak. Tvorba wireframu zkrátka umožňuje rychlé vylepšování a klienta nechává vidět i postupně posuzovat průběh všech prací.

2. Vizuální ztvárnění informační hierarchie

Klient svůj byznys dobře zná, snadno se však do informací a jejich rozložení na webu nebo v aplikaci  zamotá. Tvorba site mapy je základním krokem, který s klientem podnikáme. Mapa webu je ale abstraktní, tím spíš když je velká. Překlenutí site mapy do wireframu je prvním skutečně vizuálním procesem projektu. Náčrtky mění abstraktní povahu vývoje na něco reálného, smyslově uchopitelného.

Důležité prvky vidíme všichni ihned, nejsou totiž zastíněny žádným grafickým balastem. S wireframováním jsou všichni od začátku na jedné vlně, vidí na čem jsou a rozumí podstatným informacím.

3. Vyjasnění veškeré funkčnosti

Pro klienta je naše pracovní terminologie často nepřehledná. Někteří neví, jak bude ve skutečnosti vypadat, když mluvíme o light boxech, integraci do map Google, filtraci produktů nebo highlightování. Překreslení specifických objektů a naznačení funkčnosti dovoluje zřetelně komunikovat náš záměr.

Klient si nic nemusí představovat, ale hned vidí, jak budou funkce vypadat a kde budou umístěné. Některé funkcionality se tak mohou nakonec objevit jako zbytečné a nekorespondující s cíli. Vidění vlastností bez jakéhokoliv kreativního vlivu umožňuje nám i klientům zaměřit se na důležité aspekty projektu.

4. Důraz na použitelnost a logiku

Stránky a aplikace vyvíjíme především pro lidi. Chceme, aby na ně chodili často a aby pro ně byly prospěšné a funkční. Použitelnost a logika designu i funkcí je snad nejdůležitějším aspektem celého wireframingu. Vytváření modelů podporuje objektivní nahlížení. Nejde přitom jenom o snadné používání stránek, ale i o rozvržení cest ke konverzním událostem, umístění navigace a výběr správných funkcí.

Návrhy často upozorňují na nedostatky v architektuře nebo potvrzují, jestli mohou konkrétní funkce fungovat správně. Navíc jsou vhodným materiálem pro testování na osobách z cílových skupin.

5. Návaznost na další procesy

Web či aplikace je většinou jen jednou součástí celé komunikační a prodejní skládačky. My se přirozeně snažíme funkčnost, design a brandové aspekty propojit do jednoho funkčního celku. Wireframování dovoluje postupovat krok po kroku, ale přitom nikoho neochudit o možnost včasné zpětné vazby.

Ke správnosti projektu se musí ze strany klientů často vyjadřovat větší množství kolegů, nejen lidé z marketingu, ale i obchodníci či lidé z technických oddělení. Kdybychom proces tvorby modelu přeskočili, feedback na rozpracované věci by se opozdil a změny ve fázi hotového designu by celý projekt výrazně prodražily.

Přínos wireframování ve zkratce:

• úspora času i peněz,

• pohled na reálné zobrazení,

• pomoc při komunikaci struktury a rozvržení,

• prostředek k testování a zpřesňování uspořádání, navigace a funkčnosti,

• materiál pro rychlou zpětnou vazbu.

Jak připravit wireframe webu?

Příprava wireframu webu vyžaduje spolupráci hned několika oborů – UX designu, UI designu, marketingu a copywritingu. Dobrý wireframe nejen, že ukazuje strukturu stránek, ale rovnou naznačuje takzvaný konverzní trychtýř neboli reflektuje marketingovou strategii produktu. Tvůrce wireframu tedy rovnou bere v potaz uživatelskou zkušenost a snaží se web nebo aplikaci navrhnout tak, aby byla co možná nejjednodušší.

V ideálním případě jsou součástí drátěného modelu i texty, které se objeví na finální verzi stránek. Designer pak ví, kolik prostoru budou jednotlivé sekce vyžadovat a s kolika sekcemi počítat. Díky tomu zvolí i vhodné provedení například položek ve formuláři.

Wireframe webu krok za krokem

1. Udělejte si průzkum konkurence a cílové skupiny.
2. Připravte seznam (site mapu) stránek.
3. Připravte návrh struktury webu, určete, jak bude vypadat menu, z kolika stránek se bude web skládat a definujte jaké bude rozložení jednotlivých stránek.
4. Navrhněte průchod uživatele napříč celými internetovými stránkami.

Již během tvorby wireframu se dozajista nevyhnete práci s textem. Měli byste připravit alespoň základní popisky a vymezit prostor pro obsah, který následně dodá copywriter. V praxi se setkáte buď s variantou, kdy designer předloží hotový design a copywriter napíše texty tak, aby sedly do připraveného prostoru nebo nejprve připravíte texty a designer jim uzpůsobí vzhled. Obě varianty jsou možné a ani jedna není špatně.

Nástroje pro tvorbu wireframu

Chcete si tvorbu wireframů sami vyzkoušet? Sáhněte po některém z free programů. Pro začátečníky se skvěle hodí Balsamiq, dále doporučujeme Mockplus, interakčně zajímavý je Moqups a dobře poslouží také MockFlow. Funkčně ale dobře poslouží i tužka a papír.

Profesionálové pak wireframy tvoří ve specializovaném softwaru. Mezi ty nejpoužívanější dnes patří vektorový editor Adobe XD, který je součástí balíku Creative Cloud, přičemž si ho můžete vyzkoušet zdarma v rámci sedmidenní trial verze. Další častou platformou pro tvorbu wireframu webu je pak Figma, která funguje ve webovém prostředí. I v tomto případě se můžete bezplatně zaregistrovat a vyzkoušet si návrh UX/UI designu na vlastní kůži.

Pokud máte o tvorbu webu, jeho redesign či vývoj webových aplikací zájem, tak nás neváhejte kontaktovat. Rádi se postaráme o realizaci celého procesu, od wireframu, přes prototyp až po vývoj a nasazení na produkci.