Drátěný model (anglicky wireframe) je grafickým znázorněním hlavních prvků webové stránky. Drátěné modely se používají při tvorbě nových webů nebo při redesignu těch stávajících. V takovém případě navazují na audit webu.

---

Hlavními přínosy drátěných modelů jsou:

• přehlednost (ukazuje, kde co na stránce bude)
• možnost včasného provedení úprav (je to snazší a levnější, než když je už vytvořená grafika a muselo by se měnit něco zásadního)
• pozitivní dopad do celkové uživatelské přívětivosti (UX) a konverzního poměru webu (protože wireframy umožňují soustředit se na to nejpodstatnější v rámci navigace, jejich alfou a omegou je orientace na výsledek, ne na nejmenší detaily)
• snadnější tvorba v porovnání s kompletní grafickou podobou stránek

Jak vytvořit wireframe

Příprava drátěných modelů navazuje na analýzu klientů, konkurence, stanovení pozice značky, analýzu klíčových slov a audit webu. Díky těmto krokům je možné stavět na reálném základě a opřít se o něj. Jinými slovy – nepostupuje se naslepo.

1. Máme hotovou strukturu webu (víme, jaké stránky se mají vytvořit)
2. Víme, co na nich má být (typ a rozsah obsahu)
3. Můžeme se soustředit na poskládání jednotlivých typů obsahu dohromady

Na počátku stačí tužka a papír

Způsobů tvorby modelů je celá řada. Model je možné připravit i s pomocí obyčejné tužky a papíru (pro zachycení základního schématu, posloupnosti sekcí apod.). Kromě toho existuje celá řada programů (online i offline), které proces tvorby výrazně usnadní.

Software pro tvorbu wireframů

Já osobně používám pro tvorbu drátěných modelů program Project Pencil ↑. Je jednoduchý, ale obsahuje všechno podstatné, co mi umožní připravit model a exportovat jej do formy, kterou mohu prezentovat klientovi. Navíc je k dispozici zdarma.

Kromě toho existuje řada dalších nástrojů. Některé z nich mají formu online platformy, která se ovládá v okně prohlížeče, jiné můžete používat, i když jste offline. Zmiňme některé z nich:

• Axure ↑
• Justinmind ↑
• Wireframe.cc ↑
• MoqupsUXPin ↑
• Mockflow ↑

Tento výčet zdaleka není vyčerpávající. Na webu najdete celou řadu článků ↑, které se věnují jejich srovnání. Ty lepší jsou v 99 % případů placené, ale to je zcela v pořádku. Většina z nich má zkušební verze, takže nebudete kupovat zajíce v pytli. Jen pozor, jakou e-mailovou adresu budete zadávat jako kontaktní při registraci. Některé služby totiž doslova bombardují zprávami.

Další krok: texty a grafický design

Když jsou drátěné modely hotové, na řadě míst budete mít pouze zástupný text (např. díky tomuto generátoru textu ↑ Lorem Ipsum). Rámcově byste již měli vědět, co kde má být, takže copywriter se bude mít čeho chytit. Následně se připraví grafický design a může se začít s kódováním/tvorbou webu.

---

Pokud chcete vylepšit váš stávající web nebo vytvořit zcela nový, ozvěte se mi (klikněte sem). Jsem marketingový konzultant a pomáhám firmám výrazně přidat plyn. Rád pomohu i vám.