---
title: "Mockup"
description: "Mockup to statyczna, wysokiej wierności makieta projektu prezentująca finalny wygląd interfejsu lub grafiki. Poznaj różnice względem wireframe i prototypu."
url: "https://nodea.pl/pl/slownik-pojec/mockup"
lang: "pl"
updated: "2026-07-13"
---

# Mockup

> Mockup to statyczna makieta o wysokiej wierności, która prezentuje docelowy wygląd interfejsu lub grafiki — z kolorami, typografią i realną treścią, ale bez interaktywności.

**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](https://nodea.pl/pl/slownik-pojec/wireframe), 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](https://nodea.pl/pl/slownik-pojec/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](https://nodea.pl/pl/slownik-pojec/ui).
- **Warianty responsywne** — osobne makiety dla widoku desktopowego i mobilnego, uwzględniające [responsywność](https://nodea.pl/pl/slownik-pojec/responsywnosc).

## 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.

### Czym różni się mockup od wireframe i prototypu?

Wireframe to szkielet niskiej wierności — rozmieszczenie bloków bez stylu. Mockup dokłada warstwę wizualną: kolory, fonty, obrazy i realną treść, ale pozostaje statyczny. Prototyp idzie dalej — jest klikalny i symuluje interakcje. To trzy kolejne etapy dopracowania projektu.

## Powiązane

- [Wireframe](https://nodea.pl/pl/slownik-pojec/wireframe)
- [Layout](https://nodea.pl/pl/slownik-pojec/layout)
- [UI](https://nodea.pl/pl/slownik-pojec/ui)
- [UX](https://nodea.pl/pl/slownik-pojec/ux)
- [Responsywność](https://nodea.pl/pl/slownik-pojec/responsywnosc)

---

Wersje językowe: [en](https://nodea.io/en/glossary/mockup.md)  
Spis treści witryny: [llms.txt](https://nodea.pl/pl/llms.txt)