Mockup je prepracovaný statický návrh vzhľadu webu alebo aplikácie, ktorý ukazuje finálnu podobu, ale nemá funkcie. Nielsen Norman Group ho opisuje ako realistický neinteraktívny obraz rozhrania, označovaný aj ako UI mockup alebo design comp. Návrh sa často tvorí vo Figme.
Aký je rozdiel medzi wireframe, mockupom a prototypom?
Figma uvádza poradie wireframe, mockup a prototyp. Prechádza sa od hrubého rozloženia cez vizuálnu podobu až k testovateľnej verzii.
| Výstup | Čo ukazuje | Funkcie |
|---|---|---|
| Wireframe | Hrubé rozloženie v odtieňoch šedej, bez farieb a obrázkov | Nie |
| Mockup | Prepracovaná statická podoba finálneho vzhľadu | Nie |
| Prototyp | Testovateľná verzia, ktorá simuluje používanie | Áno, čiastočne alebo plne |
Adobe radí mockupy medzi statické podklady spolu so skicami a wireframami, ktoré samy prototypom nie sú.
Kedy sa mockup oplatí robiť?
Podľa nášho názoru sa mockup hodí, keď je dôležité odsúhlasiť vzhľad ešte pred programovaním. Zmena farby alebo rozloženia v obrázku je lacnejšia než zmena v hotovom kóde. Pri veľmi jednoduchom webe, napríklad webovej vizitke, môže stačiť menej podrobný návrh.
Čo má mockup obsahovať?
Mockup má ukázať finálny vzhľad hlavných typov stránok. Podľa princípov web dizajnu sem patria typografia, farby, obrázky a vizuálna hierarchia. Pri návrhu myslíme aj na responzívny dizajn, teda na vzhľad na mobile.
Čo mockup nevyrieši?
Mockup je obrázok, nie hotový web. Neukáže rýchlosť načítania ani to, ako sa stránka správa v prehliadači. Použiteľnosť preto overujeme až na prototype alebo na hotovom webe pomocou testovania použiteľnosti.
Čo si zapamätať o pojme Mockup?
Mockup je statický návrh finálneho vzhľadu bez funkcií. Stojí medzi wireframom a prototypom a hodí sa, keď treba odsúhlasiť vzhľad pred programovaním. O funkčnosti nehovorí nič, preto ho dopĺňame testovaním na prototype alebo hotovom webe.
Ako to rieši webstrankanamieru.sk: V procese tvorby webstránky je grafický návrh a rozloženie prvkov samostatným krokom. Ako konkrétne návrh prebieha pri vašom projekte, dohodneme na konzultácii. Celý postup nájdete na stránke Proces tvorby webstránky.
Súvisiace pojmy: Wireframe, Prototypovanie, Figma, UI, UX, Web dizajn, Redizajn webu, Responzívny dizajn, Material Design, Photoshop
Často kladené otázky o pojme Mockup
Čo je mockup?
Aký je rozdiel medzi wireframe a mockupom?
Je mockup to isté ako prototyp?
V akom poradí sa tieto výstupy tvoria?
V čom sa mockup vytvára?
Zdroje
- Figma: Wireframe vs. mockupRozdiel medzi wireframe a mockupom a ich poradie v procese návrhu.
- Nielsen Norman Group: UX Deliverables GlossaryDefinícia mockupu, wireframe a prototypu.
- Adobe: Prototyping – low-fidelity vs. high-fidelityStatické podklady a rozdiel oproti prototypom.