Terminologie webdesignu se může zdát být složitá a matoucí, nicméně by to neměla být omluva pro webdesignéry k tomu, aby si ujasnili životně důležité kroky na cestě za moderním webdesignem.
Drátěné modely vs. prototypy: Jaké jsou rozdíly?
Drátový model (wireframe) je zjednodušeně obrázkový snímek, který ukazuje a představuje prvky jednotlivých stránek webu na základě struktury menu. Narozdíl od wireframu je prototyp pokročilým drátěným modelem, který obsahuje vizuální prvky a základní interakci.
Co jsou to wireframy?
Wireframe je statické, málo věrné zobrazení webové stránky (stránky webové aplikace) - často celého webu - ve světě mobilních návrhů se jedná o základní návrh webové aplikace, kterého se drží (a ze kterého vycházejí) webdesignéři i developeři. Od obou však na otázku: "Co je to wireframe?" dostanete jinou odpověď.
Vývojáři (developeři) mají tendenci brát wireframe jako předlohu pro lepší porozumění klíčových funkcí webu nebo webové aplikace, webdesignéři (návrháři) je často používají k zobrazení navigačního toku mezi obrazovkami webu (aplikace).
Umění wireframingu není v detailech. Drátěné modely slouží spíše jako základ vizuálního zobrazení webu nebo aplikace, pomocí kterého si můžete uspořádat prvky na stránce nebo obrazovce a mapovat obsah. Vizuálními charakteristikami wireframu jsou obvykle omezeny na černobílé zobrazení řádků a "krabic" (boxů), které interpretují rozmístění bloků na stránce. Wireframe je tedy zcela zjednodušeně černobílý obrázek stránek webu se základní strukturou.
Výhody wireframingu
- Wireframy jsou rychlé, levné, snadno se vytvářejí a tím pádem mohou být také rychle schváleny. Začít můžete s papírovými návrhy, budete mít nízké náklady a spotřebujete na ně velmi málo energie a času. Jakmile začnete tvořit návrhy pomocí nástrojů k tomu určených, dostanete jako bonus i částečnou vizuální věrnost.
- Tím, že zachováte jednoduchou strukturu pouze s hlavními rysy a základními vizuálními pokyny, wireframy vám umožní soustředit se na velký obrázek. Vytváření pixel-dokonalých návrhů v raných fázích návrhu nemá smysl. Budete zkoumat příliš mnoho proměnných, než dosáhnete finálního návrhu a ztratíte tím mnoho času.
- Pro všechny zúčastněné strany je díky wireframu snadné si od začátku představit celou grafiku webu nebo aplikace bez zacházení do zbytečných detailů, které stojí nejvíce času.
Limity wireframingu
- Jedním z největších limitů wireframů je to, že neobsahují skutečný obsah. Kvůli tomu se snadno může stát, že finální produkt (web nebo aplikace) bude vypadat jinak, než vypadaly právě drátové modely.
- Typicky se pro obsah wireframů používá zástupný text (např. lorem ipsum), které vám pomůže zorientovat se v tom, kde bude text umístěn, nicméně když se pak místo něj vloží originální text, může se stát, že bude třeba vizuální stránku upravit, posunout bloky, zmenšit nebo zvětšit text apod.
- Wireframy se většinou nedají použít k uživatelskému testování, jelikož neobsahují téměř žádnou interakci.
Přes to všechno se nedá říci, že by byly wireframy k ničemu, nebo byly ztrátou času. Jejich prací je však pouze zobrazit celkové rozložení a základní strukturu v base-color designu (často černo-bílá).
Prototypy
Prototyp je model designu střední až vysoké věrnosti konečného designu a uživatelského rozhraní. Kromě toho, že obsahuje mnohem detailnější pohled na vizuální atributy návrhu, prototyp obvykle také zahrnuje uživatelskou interakci. S prototypy můžete integrovat a ověřit plnou funkcionalitu návrhu přidáním animací, událostí a dalších prvků. Obecná myšlenka prototypu je být co nejblíže finálnímu produktu.
Výhody prototypování
- Můžete testovat své prototypy s reálnými uživateli na skutečných zařízeních! Testování uživatelů je zásadním krokem v procesu návrhu a náš názor je, že by se nemělo začít programovat, dokud nebude prototyp plně otestován klientem a jeho cílovou skupinou. Některé nástroje pro prototypování jsou vybaveny nástroji použitelnosti, což Vám umožní snadno provádět testování a vyhodnocovat jej.
- Interaktivní, použitelný a funkční prototyp poskytuje uživatelům realistickou představu o konečném produktu. S pokročilými funkcemi a prvky UI v nástroji pro inteligentní prototypování můžete přidat video, html nebo flash, stejně jako širokou škálu animací, efektů, přechodů a mobilních gest.
- Faktor spolupráce. Nesmíme podcenit ani význam týmové práce v procesu tvorby webových stránek nebo aplikací. Ať už se jedná o prezentaci vašich návrhů kolegům, kteří se dostanou na stejnou stránku nebo společně pracují na jednom projektu, prototyp, který lze sdílet, je neocenitelný vaše workflow.
Limity prototypování
Prototypy jsou typicky časově náročnější a dražší na výrobu než wireframy. To by vás však nemělo odradit od jejich používání. Vynaložením určitého času (závislého na tom, jak moc již máte tvorbu prototypu ve workflow implementovanou) na fázi prototypování se však můžete vyhnout další práci a nedorozuměním.
Jaký je závěr?
Když začínáte s projektováním, je dobré zvážit rozpočet na projekt, složitost jeho uživatelského rozhraní a samozřejmě i jeho návštěvníky a uživatele! Zamyslete se nad lidmi, kteří budou pracovat s vašimi návrhy - vaším webem, nebo vaší aplikací. Přemýšlejte i o koncových uživatelích, kteří vám pomohou provést testy použitelnosti a nakonec zhodnotit, zda je vaše aplikace dost dobrá. Hlavně ale nepodceňujte sílu wireframu nebo prototypu, bez nichž byste se mohli ocitnout ve slepé uličce a dostat se po dnech programování znovu na začátek!
Komponenty Angular Material https://material.angular.io/, které jsou přímo integrované v námi vyvíjeném systému M@gnetpro2, umožňují vytvářet funkční prototyp jako součást frontendové části projektu. Toto řešení garantuje významnou úsporu nákladů ve fázi přípravy projektu. Hlavními benefity jsou použitelnost a uživatelská přívětivost. Přesvědčte se na referenčních projektech:
Přejít na reference
