Mockup

Mockup (makieta) to statyczna reprezentacja projektu o wysokiej wierności wizualnej, która pokazuje, jak docelowo będzie wyglądał interfejs, strona lub grafika. W przeciwieństwie do szkieletowego wireframe'u, mockup zawiera pełną warstwę estetyczną — dobrane kolory, typografię, ikony, zdjęcia i realną treść — pozostając jednak nieinteraktywnym obrazem.

Na czym polega mockup?

Mockup lokuje się w środku procesu projektowego, między szkicem koncepcyjnym a działającym prototypem. Jego rolą jest przełożenie ustaleń dotyczących struktury na konkretny język wizualny, który można zaakceptować przed rozpoczęciem kodowania. Typowy mockup obejmuje:

• Paletę kolorów i typografię — finalne fonty, rozmiary i kontrasty zgodne z identyfikacją marki.
• Rozmieszczenie elementów — dopracowany layout z realnymi proporcjami i odstępami.
• Treść i grafiki — docelowe teksty i obrazy zamiast placeholderów, by ocena była wiarygodna.
• Stany komponentów — wygląd przycisków, pól formularzy czy kart w interfejsie UI.
• Warianty responsywne — osobne makiety dla widoku desktopowego i mobilnego, uwzględniające responsywność.

Zastosowanie w praktyce

Mockupy są narzędziem komunikacji między projektantem, klientem i zespołem deweloperskim:

1. Akceptacja projektu — klient zatwierdza wygląd na podstawie makiety, zanim powstanie kod, co ogranicza kosztowne poprawki.
2. Prezentacja wariantów — porównanie kilku propozycji graficznych strony głównej czy landing page'a.
3. Przekazanie do wdrożenia — deweloper odczytuje z mockupu dokładne wartości kolorów, marginesów i typografii.
4. Testy percepcji — sprawdzenie hierarchii wizualnej i czytelności przed budową interaktywnego prototypu.

Popularne narzędzia do tworzenia mockupów to Figma, Sketch i Adobe XD, które umożliwiają szybkie przejście od statycznej makiety do klikalnego prototypu. Dobrze przygotowany mockup skraca liczbę iteracji na etapie kodowania, bo najważniejsze decyzje wizualne zapadają, zanim powstanie pierwsza linia kodu.