Mockup je vizuální maketa produktu zobrazená v reálném kontextu - třeba návrh webu vykreslený na obrazovce mobilu nebo notebooku. Ukazuje, jak výsledek bude vypadat v praxi, ne jen jako izolovaný návrh v grafickém programu.
Kam mockup patří ve vývoji webu?
Mockup sedí mezi wireframem a prototypem. Wireframe je jednoduchý plán struktury bez barev a stylu - řeší, co kde bude. Mockup na to naváže finálními barvami, typografií a ikonami, ale pořád je statický, nekliká se v něm. Prototyp pak přidá interaktivitu. Posloupnost je tedy jasná: struktura, pak vizuál, pak interakce.
Fidelita mockupu bývá střední až vysoká - není to hrubý náčrt, ale ještě to nefunguje jako živá stránka.
K čemu se mockup v praxi hodí?
Děláme je pro spoustu situací - ukázky hotových webů pro klienty nebo reference do portfolia na tomto webu. Hlavní síla mockupu je, že převádí technické detaily do srozumitelné formy. Klient nemusí umět číst kód ani wireframe, aby pochopil, jak bude jeho web vypadat, a může návrh schválit dřív, než se začne programovat.
Designér v našem týmu v mockupech často simuluje, jak bude výsledný digitální produkt vypadat. My i klient pak máme lepší představu ještě předtím, než se začne programovat nebo tisknout. Mockupy se dělají i pro tiskoviny (letáky, brožury), merch nebo příspěvky na sociální sítě - všude, kde se hodí vidět návrh v reálném kontextu místo na prázdné ploše.
Kolik stojí nástroje na mockupy?
Mockupy dělám jako součást každé nabídky na firemní web - klient tak vidí návrh na reálné obrazovce dřív, než padne první řádek kódu. Podívejte se na tvorbu firemního webu →.
Placeit nabízí přes 32 000 mockup šablon (celkem cca 45 000 napříč kategoriemi včetně videí) za zhruba 90 dolarů ročně - k červenci 2026, ceny se mění, ověřte na oficiálním webu. SmartMockups má přes 7 000 šablon s exportem ve vysokém rozlišení vhodným i pro tisk, za cenu kolem 108 dolarů ročně, a napojuje se přímo na Figmu, Canvu nebo Dropbox. Pro netechnického majitele firmy jde mockup udělat zdarma i přímo v Canvě nebo přes SmartMockups.com bez designérských dovedností.
Kde jsou limity mockupu?
Mockup je pořád jen obrázek - neřekne vám, jestli tlačítko reaguje správně nebo jestli formulář funguje na mobilu. Na to potřebujete klikací prototyp nebo rovnou hotový web. A mockup je jen tak dobrý, jak dobré rozhodnutí za ním stojí - pěkný obrázek špatně vyřešeného UX zůstává špatně vyřešeným UX, jen s hezčí fasádou.
Můj pohled
Mockup mám rád hlavně proto, že šetří konflikty. Klient vidí návrh na obrazovce svého telefonu, ne v abstraktním souboru, a připomínky přijdou hned - ne až po dodání hotového webu, kdy je oprava dražší a pomalejší.
Než padne první řádek kódu, mockup je nejlevnější způsob, jak si s klientem ověřit, že jedete oba za stejným cílem.
Pavel Szabo
Programátor webů, eshopů a informačních systémů s více než 23 lety praxe. Pomáhám firmám i jednotlivcům s online podnikáním, automatizacemi a využitím AI v praxi.
