Wireframe

Obsah 1 Co je to? 2 Proč? 3 Co zobrazuje? 4 Kreslení na papír 5 Rychlé on-line nástroje 6 Komplexnější on-line nástroje 7 Desktopové aplikace 8 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í.
• Po schválení uživatelem je podkladem pro:
  • Grafiky, kteří vymyslí vizuální podobu prvků (musí vědět, jak velké prvky jsou, kolik textu na nich je,...).
  • Programátory, kteří musí navržený vzhled realizovat (programátor musí dodržet to, co je ve wireframe, nemůže dělat další úpravy).

Proč?

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

Co zobrazuje?

Musí zachytit

• Jak budou prvky rozmístěny na stránce/obrazovce.
• Jaký typ prvku to je: obrázek, nadpis, článek textu.
• Typickou velikost prvku na obrazovce.
  • Bude to jeden řáden textu, nebo článek o 5 odstavcích. (Není důležité, jestli 4 nebo 6 odstavců, ale je rozdíl, jestli dva řádky, nebo 3 stránky textu.
  • Jak veliký obrázek bude.

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.

Kreslení na papír

• V prvních fázích je nejrychlejší a vždy po ruce.

Rychlé on-line nástroje

• Rychlý náčrt, snadné sdílení.
• Příklad: Wireframe.cc — náčrtky se snadno sdílí, ale kdokoli má odkaz, může i upravovat!

Komplexnější on-line nástroje

• Obvykle zdarma pouze v omezené verzi.
• Díky on-line podobě snadná spolupráce více uživatelů.
• 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: NinjaMock.com — Zdarma do 200 objektů, nelze exportovat.
• Příklad: Webflow.com
• Příklad: Axure

Desktopové aplikace

• Nepotřebují výpočetní výkon provozovatele, větší šance, že budou zdarma.
• Komplikovanější spolupráce více návrhářů na jednom projektu.

1. JustInMind
   • Návrh od wireframe až po prototyp webu či mobilní aplikace.
   • Umožňuje vazbu mezi obrazovkami.
   • Výsledkem je jednoduchý HTML náhled výsledné aplikace.
2. Adobe XD
3. 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“. (Ale musí být jasná typická velikost odstavce.)
   • Dopište k wireframe popis — o jakou obrazovku se jedná, který případ použití řeší, co jednotlivé prvky znamenají.