Wireframe
Z MiS
(Rozdíly mezi verzemi)
(→Nástroje: Přidán JustInMind.) |
(Doplnění o NinjaMock.com a komentáře.) |
||
| Řádka 5: | Řádka 5: | ||
* Lze kreslit na papír nebo v softwarových nástrojích. | * 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í. | * 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č? == | == Proč? == | ||
* Snížit čas (a tedy i cenu) prvního návrhu. | * 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 budou prvky rozmístěny na stránce/obrazovce. | ||
* Jaký typ prvku to je: obrázek, nadpis, článek textu. | * 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. | * Grafický vzhled prvků — ten řeší až v další fázi grafik. | ||
* Konkrétní obsah — ten řeší až v dalších fázích copywriter. | * 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: [https://wireframe.cc/ 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: [https://moqups.com/ Moqups.com] — Zdarma jen jeden projekt (v něm libovolné množství stránek, ale max. 200 objektů celkem) | |
| − | + | * Příklad: [https://ninjamock.com/ NinjaMock.com] — Zdarma do 200 objektů, nelze exportovat. | |
| − | # | + | * Příklad: [https://webflow.com/ Webflow.com] |
| − | # | + | * Příklad: [https://www.axure.com 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. | ||
| + | # [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. | ||
| + | # [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 | ||
| Řádka 42: | Řádka 56: | ||
# Musí být jasné, co wireframe popisuje: | # Musí být jasné, co wireframe popisuje: | ||
#* Nadpisu uveďte konkrétní. | #* Nadpisu uveďte konkrétní. | ||
| − | #* Obsah odstavců textu obvykle stačí jen „šedé čáry“ nebo „Lorem ipsum“. | + | #* 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í. | #* Dopište k wireframe popis — o jakou obrazovku se jedná, který případ použití řeší, co jednotlivé prvky znamenají. | ||
Aktuální verze z 25. 2. 2021, 10:27
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í.
- 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.
- 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.
- 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“. (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í.
