Wireframe: náčrt webu před grafikou
Wireframe je černobílý náčrt stránky: obdélníky, nadpisy a popisky, které ukazují, co na stránce bude a v jakém pořadí. Barvy, fotky ani písmo na něm nejsou záměrně. Rozhoduje se na něm obsah a cesta návštěvníka – a změnit obdélník je mnohem levnější než předělat hotovou grafiku.
Aktualizováno
Co wireframe ukazuje a co ne
Představte si ho jako půdorys domu. Z půdorysu poznáte, kde je kuchyně a kudy se jde do ložnice, ale ne barvu obkladů. Wireframe stránky stejně tak ukáže, že nahoře je nadpis s hlavní nabídkou, pod ním tři služby, potom reference a dole formulář. Jak to bude vypadat, se řeší až potom.
Tím se wireframe liší od toho, co si pod „návrhem webu“ představí většina lidí. Patří do části práce, které se říká UX – co má návštěvník udělat a co k tomu potřebuje. Rozdíl mezi UX a vzhledem vysvětluje heslo UX a UI.
Wireframe, mockup a prototyp
Tři slova, která se v nabídkách často zaměňují. Každé znamená jinou fázi a jinou míru detailu:
| Wireframe | Mockup | Prototyp | |
|---|---|---|---|
| Co to je | Náčrt rozložení a obsahu | Statický obrázek, jak bude stránka vypadat | Proklikatelná ukázka, která simuluje chování |
| Barvy a fotky | Ne | Ano, finální nebo skoro finální | Podle potřeby |
| Co se rozhoduje | Pořadí, obsah, výzvy k akci | Vzhled, písmo, styl fotek | Průchod formulářem, objednávkou, menu |
| Cena změny | Minuty | Hodiny | Podle složitosti |
U jednoduchého webu se prototyp často vynechává. U rezervace, objednávky nebo konfigurátoru se naopak vyplatí – na proklikání se ukáže, kde člověk zaváhá, dřív než se cokoli naprogramuje.
Co se na wireframu rozhoduje
- Hlavní sdělení první obrazovky. Co děláte, pro koho a kde – v jedné větě, kterou člověk přečte bez posouvání.
- Pořadí bloků. Co musí návštěvník vědět dřív, než vám napíše: služby, cena nebo aspoň jak se počítá, ukázky práce, důvody důvěry.
- Kde jsou výzvy k akci a kolik jich je. Jedna hlavní akce, opakovaná v rozumných místech, funguje lépe než pět různých tlačítek.
- Co se na mobilu přeskládá. Tři sloupce vedle sebe se na telefonu stanou třemi bloky pod sebou – které má být první?
- Co na stránce chybí. Prázdný obdélník s nápisem „reference“ často prozradí, že reference zatím nikdo nesehnal.
Proč wireframe šetří předělávky
Nejdražší připomínky jsou ty, které přijdou nad hotovou grafikou: „sem by se hodil ceník“, „reference mají být výš“, „tahle služba vlastně nebude“. Každá z nich znamená přeskládat a znovu sladit celou stránku. Na wireframu je to přetažení obdélníku.
Druhá úspora je v textech. Když se na náčrtu místo „lorem ipsum“ objeví skutečné nadpisy a odrážky, rychle se ukáže, kde text chybí nebo je ho moc. Jak k textům přistoupit, popisuje návod texty na web.
Jak wireframe číst a připomínkovat
- Projděte ho shora dolů jako zákazník, který o vás nic neví.
- U každého bloku si řekněte, jakou otázku zákazníka zodpovídá.
- Blok, který žádnou otázku neřeší, je kandidát na vyškrtnutí.
- Připomínky pište k obsahu a pořadí („chybí doprava“), ne ke vzhledu („je to šedé“) – na vzhled přijde řada u moodboardu a grafického návrhu.
Co si ke schůzce nad wireframem nachystat (služby, ceny, ukázky, přístupy), shrnuje seznam podklady pro web.
Návrh struktury a cena
Samostatnou položku „wireframe“ v ceníku nemáme. Rozvržení stránek je součást návrhu, který u Firemního webu (20 000 Kč) vzniká na míru spolu s texty; u Webu na míru (35 000 Kč) bez omezení počtu stránek, včetně poptávkových nebo rezervačních formulářů, kde se průchod vyplatí promyslet nejdřív.
Časté otázky
V čem se wireframe kreslí?
Klidně tužkou na papír – pro první verzi je to nejrychlejší. Grafici a webaři používají návrhové nástroje, kde se obdélníky snadno přesouvají a dají se sdílet odkazem. Nástroj není podstatný, podstatné je, aby na náčrtu byl skutečný obsah a pořadí.
Proč je wireframe šedý a bez obrázků?
Schválně. Když na náčrtu chybí barvy a fotky, nikdo se nehádá o odstín modré a pozornost zůstane u toho, co se má teď rozhodnout: jaké bloky stránka má, v jakém pořadí a co na nich stojí.
Potřebuje wireframe i jednostránkový web?
Většinou stačí jednoduchý – seznam sekcí odshora dolů s nadpisy a hlavním sdělením. I tak se vyplatí, protože u jedné dlouhé stránky rozhoduje pořadí bloků o tom, jestli návštěvník dojde k formuláři.
Můžu wireframe nakreslit sám a přinést ho webaři?
Ano a ušetří to čas. Berte ho jako popis toho, co chcete návštěvníkovi říct, ne jako závazné rozložení. Webař ho pak upraví podle toho, jak se bloky chovají na mobilu a co je technicky rozumné.