Čo je Mockup?
Mockup je vizuálne detailný návrh webstránky alebo aplikácie, ktorý zobrazuje presný vzhľad — farby, typografiu, obrázky a rozloženie. Na rozdiel od wireframu ukazuje finálny vizuál, ale na rozdiel od prototypu nie je interaktívny.
Definícia Mockup
Čo je mockup
Mockup je statický vizuálny návrh, ktorý ukazuje, ako bude webstránka alebo aplikácia presne vyzerať. Obsahuje finálne farby, typografiu, obrázky, ikony a rozloženie — je to v podstate „fotografia" budúceho produktu.
Mockup je dôležitý krok medzi wireframom a prototypom. Kým wireframe rieši štruktúru a prototyp funkčnosť, mockup sa zameriava na vizuálny dojem a estetiku.
Mockup vs. wireframe vs. prototyp
- Wireframe — štruktúra a rozloženie (sivé boxy, žiadne farby)
- Mockup — vizuálne presný návrh (farby, fonty, obrázky, ale neklikateľný)
- Prototyp — interaktívny model (klikateľné tlačidlá, prechody medzi stránkami)
Typy mockupov
- Flat mockup — 2D návrh stránky v skutočnej veľkosti, bežný výstup z Figmy alebo Sketch
- Device mockup — dizajn zobrazený v rámčeku zariadenia (iPhone, MacBook) — ideálny pre prezentácie klientom
- Mockup pre tlač — vizualizácia na fyzickom nosiči (vizitka, obal knihy, billboard)
Kedy vytvárať mockupy
Mockupy sa tvoria po schválení wireframu a pred prototypovaním. Slúžia na schválenie vizuálneho smeru klientom alebo stakeholdermi. Umožňujú diskusiu o farbách, štýle a detailoch bez rozptyľovania funkčnosťou.
Praktický príklad
Príklad: Dizajnér prezentuje klientovi návrh homepage.
Mockup: Plnofarebný návrh zobrazený v rámčeku MacBooku — hero sekcia s fotografiou, firemné farby, zvolené fonty, reálne texty, tlačidlá s tieňmi. Klient vidí presne, ako bude web vyzerať.
Výhoda: Klient sa vyjadrí k vizuálnemu štýlu bez toho, aby riešil interaktivitu. „Páči sa mi modrá, ale skúsime tmavší odtieň" — konkrétna spätná väzba na dizajn.
Často kladené otázky
Čo je mockup?
Mockup je vizuálne detailný návrh webstránky s farbami, typografiou a obrázkami. Zobrazuje presný vzhľad produktu, ale nie je interaktívny — nedá sa naň klikať.
Aký je rozdiel medzi mockup a wireframe?
Wireframe zobrazuje len štruktúru a rozloženie (sivé boxy). Mockup je vizuálne dokončený — obsahuje finálne farby, fonty, obrázky a vyzerá ako skutočná stránka.
V čom sa robí mockup?
Mockupy sa najčastejšie vytvárajú vo Figme, Sketch alebo Adobe XD. Na device mockupy (zobrazenie v rámčeku zariadenia) sú nástroje ako Smartmockups alebo Placeit.
Súvisiace pojmy
Potrebujete pomôcť s webom?
Napíšte mi a poradím vám s vaším projektom. Prvá konzultácia je zadarmo a nezáväzná.