Definicja
Mockup to wysokiej wierności projekt wizualny interfejsu, prezentujący docelowy wygląd z kolorami, typografią i grafiką — ale bez interaktywności.
Kiedy stosować?
- Po zatwierdzeniu wireframe'u (układ OK → teraz design)
- Przed implementacją — developer ma pixel-perfect wzór
- Prezentacja dla interesariuszy / zarządu
- Materiały marketingowe (landing page preview)
Mockup w procesie projektowym
Wireframe → Mockup → Prototyp → Implementacja
(układ) (wygląd) (interakcje) (kod)
Co powinien zawierać dobry mockup?
| Element | Opis |
|---|---|
| Kolory | Zgodne z brand guidelines |
| Typografia | Docelowe fonty i rozmiary |
| Ikony | Realne ikony (nie placeholdery) |
| Treść | Realna treść (nie Lorem ipsum!) |
| Responsywność | Desktop + tablet + mobile |
| Stany | Default, hover, active, error, empty state |