Wireframe

Obsah 1 Co je to? 2 Proč? 3 Řešíme 4 Neřešíme 5 Nástroje 6 Doporučení a časté chyby při tvorbě wireframe

Co je to?

• Zjednodušený návrh rozložení prvků uživatelského rozhraní.
• Lze kreslit na papír nebo v softwarových nástrojích.
• Slouží k rychlému ověření základního návrhu uživatelského rozhraní.

Proč?

• Snížit čas (a tedy i cenu) prvního návrhu.

Řešíme

• Jak budou prvky rozmístěny na stránce/obrazovce.
• Jaký typ prvku to je: obrázek, nadpis, článek textu.

Neřešíme

• Grafický vzhled prvků — ten řeší až v další fázi grafik.
• Konkrétní obsah — ten řeší až v dalších fázích copywriter.

Nástroje

1. Papír
   • V prvních fázích je nejrychlejší a vždy po ruce.
2. Jednoduché nástroje
   • Rychlý náčrt, snadné sdílení
   • Příklad: Wireframe.cc
3. Komplexnější nástroje
   • Často placené.
   • Vytvoření modelu již zabere značné množství času.
   • Umí sledovat vazby mezi stránkami.
   • Příklad: Moqups.com — Zdarma jen jeden projekt (v něm libovolné množství stránek, ale max. 200 objektů celkem)
   • Příklad: Webflow.com
   • Příklad: Axure
   • Desktopová aplikace: Adobe XD
4. Pencil.Evolus.vn
   • Svobodná alternativa
   • Desktopová aplikace, instalujete lokálně (stačí zkopírovat nainstalovanou verzi)

Doporučení a časté chyby při tvorbě wireframe

1. Musí být jasné, co wireframe popisuje:
   • Nadpisu uveďte konkrétní.
   • Obsah odstavců textu obvykle stačí jen „šedé čáry“ nebo „Lorem ipsum“.
   • Dopište k wireframe popis — o jakou obrazovku se jedná, který případ použití řeší, co jednotlivé prvky znamenají.