Definícia
Mockup je vizuálna reprezentácia produktu, dizajnu alebo webového rozhrania, ktorá realisticky zobrazuje jeho finálny vzhľad – farby, typografiu aj rozloženie – no ešte bez skutočnej funkčnosti.
Popis
Mockup dopĺňa vizuálnu stránku produktu alebo webu – farby, typografiu, obrázky aj ikony – tak, aby výsledok pôsobil takmer ako hotový produkt. Zvyčajne vzniká v nástrojoch ako Figma, Sketch alebo Adobe Photoshop.
V praxi mockup slúži na to, aby klient alebo tím pred samotným vývojom videl presnú predstavu finálneho výsledku a mohol pripomienkovať farby, typografiu či umiestnenie prvkov skôr, než sa investuje čas do programovania. Používa sa pri weboch, mobilných aplikáciách, ale aj pri obaloch produktov alebo tlačovinách.
Mockup je na rozdiel od prototypu statický – nereaguje na kliknutia ani iné interakcie. Prototyp už simuluje aspoň časť skutočného správania rozhrania, napríklad prechod medzi jednotlivými obrazovkami.
Wireframe, mockup a prototyp
Návrh digitálneho produktu zvyčajne prechádza troma fázami. Najprv vznikne wireframe, ktorý bez farieb a grafiky určí len rozloženie prvkov na obrazovke. Na neho nadväzuje mockup s finálnym vizuálom, a na záver prototyp, ktorý dizajn oživí aspoň základnou interaktivitou.