Tvorba webu: Co je wireframe a jak vzniká?

Drátěný model neboli wireframe (WF) je zjednodušená skica webových stránek, která obsahuje jednotlivé kategorie, stránky a podstránky. Ukazuje, jak jsou prvky propojeny a jak bude web vypadat. Správné načrtnutí wireframu rozhoduje o úspěšnosti stránek a jejich funkčnosti.

Každý web je tvořen prvky, které jsou na první pohled viditelné (například texty nebo grafika), ale i prvky, jež zůstávají běžnému uživateli skryté (třeba programovací jazyk).

K základním částem webových stránek patří:

• Obsah (texty, obrázky, fotky)
• Technologie (Javascript, HTML, CSS)
• Grafika (ztvárnění a podoba webu)

Nejdůležitější ze všeho je přitom obsah, protože návštěvníci na webu hledají informace, řešení svého problému. Tak například u obchodu je bude zajímat otevírací doba, u služeb zase telefonní číslo, aby se mohli objednat třeba ke kadeřnici. Na webu provozovatele autobusových linek budou hledat časy odjezdů a příjezdů a tak dále.

Své místo ve světě internetu ale mají i tematicky zaměřené stránky, které si lidé otevírají, když hledají zábavu – například si chtějí prohlédnout fotografie, pustit si videa (YouTube), spojit se se svými přáteli (Instagram, Facebook). Takové stránky primárně nabízejí zábavu, inspiraci nebo propojení.

Drátěný model jako základ webu

Od každého webu uživatel očekává něco jiného. Důležité je, aby na něm informaci (nebo zážitek), který vyhledává, dostal. Proto je třeba webové stránky dobře naplánovat, nezapomenout na nic podstatného. Při tomto procesu pomáhá právě wireframe.

Co je wireframe

• Doslovně přeloženo jde o drátěný model, strukturu, na jejímž základě pak vzniká krásný a promyšlený web.
• Tato skica přesně popisuje funkcionalitu webu, ukazuje propojenost prvků a jejich smysl.

Zadavatel webovek si díky wireframu může snadněji představit, jak budou jeho nové stránky vypadat. Náklady na přípravu drátěného modelu jsou samozřejmě nižší než na tvorbu samotné grafiky. Wireframe totiž neřeší barevnost a grafické prvky, ale skutečně představuje hlavně strukturu, na které lze potom stavět.

„Při tvorbě WF neexistuje jedno správné řešení, ale existuje pouze více a méně funkčních řešení.“

Drátěný model je v podstatě něco jako plán nebo skica domu. Pokud je dobrý, bude stavba funkční a splní vše, co se od ní očekává. Promyšlený drátěný model je skvělým základem webu, který je uživatelsky přívětivý a obsahuje vše, co obsahovat má.

Jak vzniká wireframe?

Drátěný model je výstupem diskuse nad tím, co má konkrétní web přinést uživatelům, jaké má plnit funkce, co rozhodně musí obsahovat. V ideálním případě by měl být založen na analýze původních stránek nebo na důkladném prozkoumání cílové skupiny. Více světla do této oblasti vnáší UX (User Experience – uživatelská zkušenost). 

Wireframe by tak neměl být seskupením náhodně posbíraných prvků z různých webů, které se například zákazníkovi líbí, a proto by je chtěl použít. Každý prvek v drátěném modelu musí mít opodstatnění. Jinak řečeno, dobrý a kvalitní web myslí na své uživatele a je přívětivý z hlediska orientace a dohledání informací.

Krok za krokem k drátěnému modelu

Při tvorbě wireframu je nutné odpovědět na řadu otázek. Mezi ty nejdůležitější patří:

• Jaké prvky budou na webu (například widgety, rozcestníky, animace, kontaktní formuláře, fulltextové vyhledávání a další moduly)?
• Jaká bude struktura webu, tedy horní menu a jednotlivé podstránky? To je důležité pro provázání celého konceptu webu.
• Jaké prvky budou mít prioritu? Některé totiž mohou mít přednost před jinými – například rozcestník nabízených služeb může být důležitější než aktuality.
• Klient by měl vědět, čeho chce webem dosáhnout, k čemu bude sloužit. Má jít například o vyšší počet objednávek? Nebo má web vyzvat k návštěvě pobočky či prodejny?
• Co potřebuje a jaké problémy řeší cílová skupina? Hledá návštěvník na webu konkrétní informace? A jaké?
• Co říkají statistiky a analýzy Google Analytics? Jaké stránky uživatelé navštěvují nejčastěji? Co vyplynulo z UX testování? Pracovat přitom můžeme i s interními statistikami klientů – zejména v případě redesignů.

Vedle UX testování a výstupů z Google Analytics lze použít i pokročilejší nástroje, například Hotjar, online dotazníky nebo Eve-tracking, který simuluje pohled návštěvníků, a tak jde zjistit, které prvky primárně upoutají jejich pozornost.

Obrázek 1: Desktop wireframe antee.cz

Podoby drátěného modelu

Každý web dnes musí fungovat jak na počítači, tak na mobilu. Proto platí nepsané pravidlo návrhu dvou drátěných modelů: pro desktop (Obrázek 1) a pro chytrý telefon (Obrázek 2), který je takzvaně responzivní. 

Už ve wireframu se přitom dodržují určité velikosti fontů, jak u odstavců, tak u nadpisů. Důležité je zachovat členění a hierarchii nadpisů – například H1, H2 nebo H3. Minimální velikost písma by měla být 16 px. U specifických webů (například pro seniory) je možné používat větší font.

Velikost obrazovek neboli layoutů je v případě desktopu 2000 px a obsahová část 1280 px. U tabletu je velikost obrazovky 800 px a u mobilu 320 px. Zároveň se dodržuje 5–10 px odsazení obsahu od krajů. A nesmíme zapomenout ani na takzvaný ohyb stránky, který stanovuje pomyslnou hranice desktopu – většinou je 700 px, a to v závislosti na různých počítačových zařízení.

Obrázek 2: Mobile wireframe antee.cz

Na co ještě nezapomenout?

Myslete na to, co pro svého uživatele nebo zákazníka ještě můžete udělat.

• Třeba by se hodil odkaz na nejdůležitější produkt.
• Nezapomeňte ani na navigační prvky, které zákazníka nasměrují.
• Pamatujte na otevírací dobu, kontaktní údaje nebo rezervační formulář.
• Umístěte dostatek prokliků, propojte mezi sebou jednotlivé stránky.
• Dejte si pozor na příliš textu v hlavičce nebo patičce webu.
• Texty ať jsou kvalitní, stručné a jasné.

Potřebujete nový web a zajímá vás, jak by mohl vypadat váš wireframe? Kontaktujte nás, rádi se s vámi o možném řešení pobavíme.