Při návrhu nových webových stránek je nesmírně důležitá přípravná fáze. Ta obsahuje analýzu relevantních dat a informací, dále také stanovení strategie stránek a jejich cílů. V přímé návaznosti na tyto činnosti je důležité navrhnout základní podobu webu včetně rozmístění jednotlivých prvků, s čímž nám pomůže právě wireframe.

Co je to tedy wireframe?

Wireframe webu, neboli „drátěný model“, je skica webu, která se běžně používá k rozvržení základní struktury webové stránky. Je podkladem pro další procesy tvorby webu, převážně pak pro návrh designu. Wireframe by měl zobrazovat rozmístění jednotlivých funkčních i obsahových prvků na konkrétních stránkách webu včetně specifikace funkcí těchto prvků. Zároveň by měly být definovány i případné „call to action“ prvky.

V ideálním případě by se měl wireframe sestávat pouze z jednotlivých čar značících konkrétní prvky a z textu, který označuje, kde budou použité dané styly nadpisů a kde bude normální text. Wireframe by tedy v ideální případě neměl obsahovat obrázky, ani konkrétní barvy a obsah.

Jak udělat wireframe webu?

K vytvoření základního wireframu nám stačí pouze tužka a papír. Načrtneme si obdélník, který značí okno internetového prohlížeče a nic nám nebrání se na základě vlastní fantazie, moderních trendů, stanovené strategie webu a jeho cílů pustit do rozvržení všech prvků.

V případě profesionálního přístupu či tvorby rozsáhlejších webových stránek se však neobejdeme bez komplexního softwaru, který nám usnadní mnoho práce a zároveň nabízí nespočet funkcí, které při tvorbě wireframe rozhodně využijeme.

Vybrat si můžeme z několika programů, z nichž za zmínku stojí například Mockflow, Axure RP, Protoshare, Microsoft Visio či Flair Builder. I přesto bychom však neměli zanevřít na tužku a papír a před samotným spuštěním softwaru si udělat základní náhled toho, jak by měla konečná podoba návrhu vypadat.

Pro představu přikládáme ilustraci wireframe.

Pokud si nechcete lámat hlavu s rozložením vašich stránek, rádi vám s vytvořením wireframe pomůžeme.