Wireframe
Z MiS
(Rozdíly mezi verzemi)
(Doplněno varování na možnost upravovat náčrty ve wireframe.cc) |
(→Nástroje: Přidán JustInMind.) |
||
| Řádka 30: | Řádka 30: | ||
#* Příklad: [https://webflow.com/ Webflow.com] | #* Příklad: [https://webflow.com/ Webflow.com] | ||
#* Příklad: [https://www.axure.com Axure] | #* Příklad: [https://www.axure.com Axure] | ||
| + | #* Desktopová aplikace: [https://www.justinmind.com/ 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. | ||
#* Desktopová aplikace: [https://www.adobe.com/cz/products/xd.html Adobe XD] | #* Desktopová aplikace: [https://www.adobe.com/cz/products/xd.html Adobe XD] | ||
# [https://pencil.evolus.vn/ Pencil.Evolus.vn] | # [https://pencil.evolus.vn/ Pencil.Evolus.vn] | ||
#* Svobodná alternativa | #* Svobodná alternativa | ||
#* Desktopová aplikace, instalujete lokálně (stačí zkopírovat nainstalovanou verzi) | #* Desktopová aplikace, instalujete lokálně (stačí zkopírovat nainstalovanou verzi) | ||
| − | |||
== Doporučení a časté chyby při tvorbě wireframe == | == Doporučení a časté chyby při tvorbě wireframe == | ||
Verze z 1. 12. 2020, 21:22
Obsah |
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
- Papír
- V prvních fázích je nejrychlejší a vždy po ruce.
- Jednoduché 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ší 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: 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.
- Desktopová aplikace: Adobe XD
- Pencil.Evolus.vn
- Svobodná alternativa
- Desktopová aplikace, instalujete lokálně (stačí zkopírovat nainstalovanou verzi)
Doporučení a časté chyby při tvorbě wireframe
- 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í.
