V UX designu existují tři klíčové výstupy, které se pravidelně pletou – a to i lidem z oboru: wireframe, mockup a prototyp. Každý z nich plní jinou funkci, vzniká v jiné fázi procesu a slouží k jinému účelu. Pochopit rozdíly mezi nimi je základním předpokladem efektivní spolupráce v produktovém týmu.
Wireframe: plán, ne výkres
Wireframe je schematická, zpravidla černobílá skica rozhraní. Nezachycuje barvy, typografii ani fotografie – soustředí se výhradně na strukturu, rozvržení a hierarchii prvků.
Cílem wireframu je odpovědět na otázky:
- Kde bude navigace?
- Jaké bloky obsahu budou na stránce?
- V jakém pořadí jsou tyto bloky seřazeny?
- Kde bude výzva k akci (CTA)?
Wireframy se typicky tvoří v počáteční fázi designu, kdy se teprve ladí koncept. Jsou záměrně jednoduché, protože jejich přepracování nic nestojí. Čím méně detailů, tím snadněji se odsouhlasí změny.
Typy wireframů
- Lo-fi (low-fidelity) – narýsované rukou nebo tvořené v jednoduchém nástroji, velmi hrubé
- Mid-fi – digitální, ale stále bez vizuálního stylu; nejčastější typ pro odsouhlasení struktury
- Hi-fi wireframe – detailnější, blíží se mockupu; někdy se hranice překrývají
Nástroje: Figma, Balsamiq, Whimsical, Miro, papír a tužka.
Mockup: vizuální podoba bez interakce
Mockup (někdy také „comp" nebo „vizuál") je statická, plně barevná a typograficky zpracovaná verze rozhraní. Vypadá téměř jako hotový produkt – má správné barvy, písma, fotografie a ikony – ale nelze na ni klikat.
Mockupy slouží ke:
- schválení vizuální identity a brandingu
- prezentaci designu klientovi nebo stakeholderům
- předání podkladů vývojářům (handoff)
Mockup je výsledkem práce UI designéra. Vychází ze struktury definované wireframem a naplňuje ji vizuálním stylem.
Nástroje: Figma, Sketch, Penpot.
Prototyp: interakce bez kódu
Prototyp je klikatelná simulace výsledného produktu. Uživatel může procházet obrazovky, klikat na tlačítka, vyplňovat formuláře a vidět přechody – vše bez toho, aby byl napsán jediný řádek kódu.
Prototypy se dělí podle věrnosti:
- Lo-fi prototyp – klikatelný wireframe; rychlý, slouží k testování základní logiky toku
- Hi-fi prototyp – plně vizuálně zpracovaný, s animacemi a mikrointerakcemi; blíží se finálnímu produktu
Prototypy se testují s uživateli. Tato fáze odhalí problémy použitelnosti dříve, než je produkt vyvinut – a to je klíčové, protože oprava problému v prototypu stojí zlomek toho, co oprava v hotovém produktu.
Nástroje: Figma (prototypovací mode), ProtoPie, Framer, Marvel.
Jak na sebe navazují?
Tři výstupy tvoří přirozenou posloupnost:
Wireframe → Mockup → Prototyp
(struktura) (vizuál) (interakce)
Praxe je ale flexibilnější. V agilním prostředí se někdy přeskakuje přímo na hi-fi prototyp, jindy se iteruje mezi wireframem a prototypem bez formálního mockupu. Záleží na složitosti projektu, týmu a dostupném čase.
Kdy co použít?
| Výstup | Kdy nasadit | Co ověřuje |
|---|---|---|
| Wireframe | Počáteční fáze, discovery | Strukturu a logiku |
| Mockup | Po odsouhlasení wireframů | Vizuální styl, branding |
| Lo-fi prototyp | Brzy, ještě před finálním vizuálem | Tok, logiku navigace |
| Hi-fi prototyp | Před vývojem | Použitelnost, detail interakcí |
Nejčastější chyby
Přeskočení wireframu. Tým rovnou skočí do vizuálního designu a po týdnech práce zjistí, že logika stránky nefunguje. Wireframe tomuto problému zabrání za zlomek nákladů.
Prototyp jako finální produkt. Prototypy vypadají „hotově", ale nejsou. Klienti a stakeholdeři je občas zaměňují s výsledkem a přestávají vidět nutnost dalšího testování.
Příliš detailní wireframe. Pokud wireframe obsahuje konkrétní texty a obrázky, trvá jeho přepracování mnohem déle. V rané fázi stačí bloky s placeholdery.
Závěr
Wireframe, mockup a prototyp nejsou synonyma – jsou to různé nástroje pro různé fáze UX procesu. Pochopení jejich rolí umožňuje lépe plánovat projekty, efektivněji komunikovat se stakeholdery a dělat správná rozhodnutí ve správnou chvíli.
