Prototypovanie je vytvorenie klikateľného návrhu webu alebo aplikácie ešte pred programovaním, aby sa dal overiť vzhľad aj správanie. Prototyp ukazuje, ako sa bude web ovládať, a umožňuje opraviť chyby v návrhu skôr, než sú drahé.
Aké prototypy existujú?
| Typ | Charakteristika |
|---|---|
| Nízka vernosť (low fidelity) | Jednoduché náčrty alebo wireframe, bez farieb a obrázkov, zameraný na rozloženie a postup |
| Vysoká vernosť (high fidelity) | Prototyp s finálnym vzhľadom, farbami a písmami, ktorý pôsobí ako hotový web |
Čím sa prototypy robia?
Najčastejšie v dizajnérskych nástrojoch, napríklad vo Figma. Návrh sa prepojí odkazmi medzi obrazovkami, aby sa dalo klikať, rolovať a otvárať menu. Figma tieto väzby nazýva prototypovanie a umožňuje prototyp zdieľať na pripomienky aj na testovanie.
Na čo prototyp slúži?
Pred programovaním sa na ňom dá overiť rozloženie, postup objednávky či menu aj s klientom a v teste použiteľnosti. Zmena v prototype je lacnejšia než zmena hotového kódu. Prototyp však nie je hotový web a nezachytí napríklad rýchlosť ani správanie na serveri.
Čo si zapamätať o pojme prototypovanie?
Prototypovanie je tvorba klikateľného návrhu webu pred programovaním. Nízka vernosť ukazuje rozloženie, vysoká vernosť finálny vzhľad a obe umožnia opraviť návrh skôr, než vznikne drahší kód. Návrh pre váš web vieme pripraviť, kontaktujte nás.
Ako to rieši webstrankanamieru.sk: Pri tvorbe webu na mieru sa pojem prototypovanie rieši v rámci postupu opísaného v sekcii Proces tvorby webstránky. Hotové weby nájdete v portfóliu, orientačné ceny v cenníku a vlastný projekt môžete konzultovať cez kontakt.
Súvisiace pojmy: Wireframe, Figma, UX, UI, Testovanie použiteľnosti, Material Design, Responzívny dizajn
Často kladené otázky o pojme prototypovanie
Čo je prototypovanie?
Aký je rozdiel medzi prototypom a wireframe?
V čom sa prototyp robí?
Prečo sa oplatí prototyp robiť?
Je prototyp to isté ako hotový web?
Zdroje
- Figma Help Center: PrototypingPrototypovanie vo Figme.
- Figma Help Center: Guide to prototyping in FigmaPostup tvorby prototypu vo Figme.
- Nielsen Norman Group: UX Prototypes: Low Fidelity vs. High FidelityNízka a vysoká vernosť prototypov.