Mockup (makieta graficzna) to statyczny projekt strony lub aplikacji, który pokazuje jej docelowy wygląd: kolory, typografię, obrazy i szczegóły interfejsu. Nie jest jeszcze interaktywny.
Czym różni się mockup od wireframe?
Wireframe to szkielet układu bez grafiki, a mockup zawiera pełną warstwę wizualną. Mockup służy do akceptacji wyglądu przed przystąpieniem do kodowania.
Jak przygotować mockup?
Na podstawie zatwierdzonego wireframe'u dobierz kolory, czcionki i obrazy zgodne z identyfikacją marki. Narzędzia takie jak Figma czy Sketch pozwalają szybko tworzyć wersje na różne ekrany.
Co dalej po mockupie?
Zwykle powstaje klikalny prototyp do testów z użytkownikami, a następnie wersja gotowa do przekazania programistom z pełną specyfikacją.
Co powinien zawierać mockup?
Układ kluczowych ekranów w wersji na komputer i telefon, stany interfejsu (najechanie, błąd, pusty widok), kolory, czcionki, ikony i odstępy. Dobrą praktyką jest oprzeć projekt na bibliotece komponentów, aby programista mógł szybko zbudować spójne ekrany. Akceptację klienta zbieraj na ekranach, a nie na opisie słownym.
Zobacz w praktyce
Proces projektowania UX krok po kroku – od badań do testów 
Core Web Vitals - poradnik jak poprawić wskaźniki 
Testy A/B w GA4 - jak je przeprowadzić?