Mockup to realistyczna, statyczna wizualizacja projektu – strony, aplikacji, logo, opakowania czy nadruku – która pokazuje, jak będzie on wyglądał w docelowym użyciu. Przygotujesz go w kilka minut: wstawiając projekt do szablonu PSD w Adobe Photoshop, w aplikacji Mockups w Canvie, w Figmie albo w generatorze online.
Poniżej znajdziesz definicję, różnice między wireframe’em, mockupem i prototypem, rodzaje mockupów, instrukcję w 10 krokach, przegląd narzędzi, parametry techniczne, koszty i najczęstsze błędy. Na końcu jest FAQ.
Mockup – co to jest?
Mockup to wizualizacja wysokiej wierności (hi-fi), która pokazuje projekt w jego finalnej formie: z kolorami, typografią, zdjęciami i w realistycznym otoczeniu. Może to być ekran laptopa, butelka z etykietą, koszulka z nadrukiem albo wizytówka leżąca na biurku. Mockup nie jest klikalny. To obraz, a nie działająca wersja produktu.
W praktyce słowo ma dwa znaczenia:
- Mockup UI – graficzny projekt ekranu strony internetowej lub aplikacji, przygotowany przed prototypem i wdrożeniem. To mockup do interfejsu użytkownika (w angielskich źródłach: user interface mockups lub software UI mockups).
- Mockup produktowy i brandingowy – Twój projekt (logo, etykieta, nadruk) nałożony na fotorealistyczne zdjęcie lub model 3D przedmiotu. Tak wygląda mockup do Twojego produktu, który pokazujesz klientowi albo wrzucasz do sklepu internetowego.
W obu przypadkach cel jest ten sam: zobaczyć efekt, zanim wydasz pieniądze na kodowanie, druk czy produkcję. Samo przygotowywanie takich wizualizacji branża nazywa po angielsku mockup design.
Skąd pochodzi słowo „mockup” i czym jest „mokap”?
Mockup pochodzi od angielskiego „mock-up”, czyli model, atrapa. Pierwotnie oznaczał fizyczny model w skali 1:1, na przykład makietę kabiny samolotu czy wnętrza. Do dziś mockup do architektury oznacza także model budynku lub wizualizację elewacji. W grafice i UX termin przyjął się w wersji cyfrowej (digital mockup).
W polszczyźnie funkcjonuje też spolszczenie „mokap”. Oba zapisy oznaczają to samo, choć w branży częściej zobaczysz „mockup”, a w liczbie mnogiej „mockupy” i „mockupów”.
Wireframe, mockup i prototyp – czym się różnią?
Wireframe pokazuje układ, mockup – wygląd, a prototyp – działanie. To trzy kolejne etapy, przez które przechodzi proces projektowania strony lub aplikacji: wireframe → mockup → prototyp → wdrożenie.
Wireframe (makieta) to szkic struktury ekranu w niskiej wierności. Są w nim szare prostokąty, miejsca na treść i nawigacja, ale nie ma kolorów ani zdjęć. Taki low-fi mockup (lub lo-fi) powstaje szybko i służy do ustalenia układu. Prototyp to klikalna wersja projektu, która symuluje przejścia między ekranami.
| Kryterium | Wireframe | Mockup | Prototyp |
| Cel | układ i hierarchia treści | wygląd i styl | działanie i interakcje |
| Poziom wierności | niski (lo-fi) | wysoki (hi-fi) | średni lub wysoki |
| Interaktywność | brak | brak, obraz statyczny | klikalny |
| Kiedy powstaje | na starcie | po akceptacji układu | przed wdrożeniem i testami |
| Narzędzia | papier, Figma, Balsamiq | Figma, Adobe Photoshop, Canva | Figma, ProtoPie |
| Kto ocenia | zespół, klient | klient, marketing | użytkownicy w testach |
Low-fi mockup odpowiada na pytanie „co i gdzie”. Hi-fi mockup jest momentem, w którym klient po raz pierwszy widzi stronę „na serio”. Dlatego mockup do wyboru projektu przygotowuje się zwykle w dwóch lub trzech wariantach. Więcej o wcześniejszym etapie przeczytasz w tekście Najczęstsze błędy w web designie – makieta.
Do czego służy mockup?
Mockup służy do pokazania projektu w realnym kontekście, zanim powstanie produkt. Mockupy są używane w kilku sytuacjach:
- prezentacja projektu klientowi i akceptacja – klient widzi efekt, a nie sam plik,
- portfolio grafika – mockup do Twojej pracy zastępuje sesję zdjęciową,
- e-commerce i print-on-demand – zdjęcia produktów, zanim powstanie pierwsza sztuka,
- social media, kampanie i pitch decki – mockup do promocji produktów,
- testy rynkowe – przedsprzedaż, crowdfunding, sprawdzenie zainteresowania,
- wychwytywanie błędów – czytelność, kontrast i skala logo przed drukiem lub kodowaniem.
Mockupy są często używane także na etapie rozwoju oferty. Mockup do rozwoju produktu pozwala porównać kilka wersji opakowania czy kolorów, zanim firma zamówi próbny nakład. Taki mockup do pomocy przy decyzjach skraca dyskusje w zespole, bo wszyscy patrzą na ten sam obraz.
Mockup w projektowaniu stron i aplikacji (UI)
Mockup strony internetowej to graficzny projekt ekranu w docelowej rozdzielczości, często osadzony w ramce laptopa lub smartfona. Na nim klient ocenia kolory, typografię, zdjęcia i proporcje. Mockup do oprogramowania i aplikacji mobilnej wygląda podobnie: każdy kluczowy ekran (logowanie, lista, koszyk) dostaje osobny widok. Takie software UI mockups są potem bazą do prototypu, czyli to w praktyce mockup do prototypów.
Mockup produktu, opakowania i odzieży
Mockup produktowy (w angielskich bibliotekach: product mockups) pokazuje projekt na fizycznym przedmiocie. Mockup do pakowania, czyli wizualizacja opakowania (packaging mockups), obejmuje kartony, butelki, puszki, saszetki i etykiety. Odzież to osobna kategoria: koszulki, bluzy, czapki, torby (apparel mockups). Mockup koszulki to jedno z najczęściej wyszukiwanych haseł, bo korzystają z niego sklepy print-on-demand. Dla firmy z kilkoma liniami produktów mockupy do różnych produktów tworzą spójną galerię, a mockup do kolekcji pokazuje całą serię na jednym ujęciu.
Mockup logo i identyfikacji wizualnej
Mockup logo to wizualizacja znaku na nośnikach, z których marka będzie korzystać: na papierze firmowym, szyldzie, kubku, ścianie biura albo w formie neonu czy tłoczenia. Szersze zestawy to visual identity mockups i branding mockups – logo, wizytówki, koperty, papier firmowy i social media w jednej prezentacji. Taki mockup dla Twojej marki (w bibliotekach szukaj fraz branding mockups i free mockups) szybko pokazuje, czy znak działa w małej skali i na ciemnym tle.
Na pierwszy rzut oka może się wydawać, że logo zaakceptowane na białym tle zadziała wszędzie. W praktyce często dopiero mockup na ciemnym opakowaniu pokazuje, że cienkie linie znaku znikają. Lepiej odkryć to na ekranie niż po wydrukowaniu 5000 etykiet.
Jakie są rodzaje mockupów?
Mockupy dzielą się według formy na statyczne pliki PSD, mockupy 3D, mockupy animowane oraz mockupy generowane online lub przez AI. Mockupy mogą być również podzielone według przedmiotu: na print mockups (wizytówki, ulotki, plakaty, książki), product mockups, mockupy urządzeń i outdoor (billboard, witryna).
| Forma | Zalety | Ograniczenia | Narzędzie |
| Statyczny plik PSD | pełna kontrola, wysoka rozdzielczość | wymaga Photoshopa, jeden kąt ujęcia | Adobe Photoshop |
| Mockup 3D | dowolny kąt, oświetlenie, animacja | nauka programu, czas renderu | Blender, Adobe Substance 3D Stager |
| Animowany / wideo | przyciąga uwagę w social media | większe pliki, mniej szablonów | Renderforest, Placeit |
| Generator online | szybko, w przeglądarce | mniejsza kontrola nad cieniem | Canva, Placeit, Renderforest |
| Generator AI | nietypowe sceny tła | ryzyko zniekształcenia produktu | Mockey.ai, Fotor AI |
Mockup do Twojej książki to dobry przykład wyboru formy. Autor potrzebuje zwykle płaskiej okładki na stronę sklepu, książki w dłoni do social mediów i krótkiej animacji do zapowiedzi. Każdy mockup do różnych celów może mieć inną formę.
Jak zrobić mockup krok po kroku?
Mockup przygotujesz w 10 krokach: od ustalenia celu, przez dobór szablonu i wstawienie projektu, po eksport i zebranie opinii.
Zanim zaczniesz, przygotuj:
- logo w wektorze (SVG, AI, PDF lub EPS),
- paletę kolorów w HEX (ekran) i CMYK (druk),
- pliki fontów lub ich nazwy,
- projekt w docelowych proporcjach (np. etykieta 1:1 z wymiarami produktu).
Proces przygotowania mockupu:
- Określ cel i odbiorcę. Mockup dla klienta, do portfolio i do sklepu wymaga innych ujęć i innej rozdzielczości.
- Zbierz materiały. Wektorowe logo i projekt w pełnej rozdzielczości to podstawa, bo z małego pliku nie zrobisz ostrej wizualizacji.
- Wybierz typ mockupu i kontekst. Zdecyduj, czy pokazujesz produkt, urządzenie czy scenę z otoczeniem. Mockup do wizualizacji opakowania na półce sklepowej mówi więcej niż sam karton na białym tle.
- Wybierz narzędzie. Photoshop daje najwięcej kontroli, Canva i generatory są najszybsze, Figma sprawdza się przy ekranach.
- Wybierz szablon lub zbuduj scenę. Dobierz mockup do Twojego projektu pod względem perspektywy, światła i stylu marki.
- Wstaw projekt. W PSD robisz to przez inteligentny obiekt, w Figmie przez ramkę, w Canvie przez wgranie grafiki.
- Dopasuj realizm. Sprawdź perspektywę, cienie, fakturę i kolor materiału. Przy nadruku na tkaninie użyj trybu mieszania Mnożenie (Multiply).
- Przygotuj warianty. Kolory produktu, różne ujęcia, wersja desktop i mobile.
- Wyeksportuj plik. PNG lub WebP do internetu, PDF lub TIFF w 300 DPI do prezentacji drukowanej.
- Zaprezentuj i zbierz feedback. Pokaż 2–3 kluczowe ujęcia, a nie dwadzieścia. Mockupy do przeglądu przez klienta najlepiej zebrać w jednym PDF.
W skrócie: cel → materiały → szablon → wstawienie projektu → realizm → warianty → eksport → opinia.
Mockup do testów rynkowych przygotujesz tak samo, ale z większą liczbą wariantów. Przy przedsprzedaży warto pokazać produkt w kilku kolorach i zmierzyć, który wybiera najwięcej osób. Tak użyty mockup do wyników przedsprzedaży daje konkretne liczby, zanim zapadnie decyzja o produkcji.
Jak zrobić mockup w Photoshopie?
Mockup w Adobe Photoshop robisz na szablonie PSD, w którym projekt wkleja się do warstwy inteligentnego obiektu. Inteligentny obiekt (Smart Object) to warstwa, która przechowuje osobny dokument. Po zapisaniu zmian grafika sama dopasowuje się do perspektywy, zagięć i oświetlenia sceny.
- Otwórz plik PSD z mockupem.
- W panelu Warstwy znajdź warstwę z ikoną inteligentnego obiektu (zwykle nazwaną „Your design here” lub „Wstaw projekt”).
- Kliknij dwukrotnie miniaturę warstwy. Otworzy się osobny dokument.
- Wklej projekt i dopasuj go do obszaru roboczego (Ctrl/Cmd + T).
- Zapisz dokument (Ctrl/Cmd + S) i zamknij go.
- Wróć do głównego pliku. Projekt jest już na produkcie.
- Zmień kolor tła lub produktu w warstwach oznaczonych jako „Color”.
- Wyeksportuj gotowy obraz (Plik → Eksportuj → Eksportuj jako).
Kilka wskazówek z praktyki. Tryb mieszania Mnożenie sprawi, że nadruk na tkaninie przejmie fałdy i fakturę materiału. Mapa przemieszczeń (Displace) zagina grafikę razem z powierzchnią, na przykład na pomiętej koszulce. Warianty zrób na kopiach warstwy, żeby nie nadpisać oryginału. Dobre high-resolution PSD mockups mają też osobne warstwy cieni i odbić, które możesz wyłączyć.
Jak zrobić mockup w Canvie i Figmie?
Mockup w Canvie przygotujesz w aplikacji Mockups bez instalowania programu, a mockup strony lub aplikacji w Figmie – przez ramki urządzeń i wtyczki.
Mockup w Canvie – aplikacja Mockups
Mockup w Canvie tworzy się w aplikacji Mockups, która powstała na bazie serwisu Smartmockups. Canva przejęła Smartmockups w 2021 roku i włączyła go do swojego edytora. Wystarczy otworzyć Aplikacje, wybrać Mockups, wskazać scenę (kubek, telefon, książka, koszulka) i przeciągnąć na nią grafikę. Canva sama dopasuje ją do kształtu.
To wygodny mockup do dostosowania w kilka minut, także dla osób bez doświadczenia graficznego. Ograniczenia są dwa: mniejsza kontrola nad cieniami i fakturą niż w Photoshopie oraz licencja zależna od Twojego planu Canvy.
Mockup strony internetowej i aplikacji w Figmie
Mockup strony internetowej w Figmie projektuje się w ramkach o docelowej szerokości: najczęściej 1440 px dla desktopu i 375–393 px dla smartfonu. Z komponentów budujesz przyciski, karty i nawigację, a style kolorów i tekstu trzymasz w bibliotece. Dzięki temu mockup do interfejsu użytkownika łatwo przerobić na kilka wariantów.
Gotowe ekrany możesz osadzić w zdjęciach urządzeń za pomocą wtyczek do mockupów. Największa zaleta Figmy to płynne przejście dalej. Ten sam plik po dodaniu połączeń między ekranami staje się klikalnym prototypem, a programista pobiera z niego wymiary i kolory. Mockup do finalnego produktu nie musi więc być przerysowywany w innym programie. O podziale ról w takim zespole przeczytasz w artykule UI/UX designer a product designer.
Gdzie znaleźć darmowe mockupy i generatory online?
Darmowe mockupy znajdziesz w bibliotekach szablonów PSD (np. Mockup World, Freepik) oraz w generatorach online (Canva, Placeit, Renderforest, Mockey.ai). Płatne szablony premium oferują Envato Elements i Placeit w abonamencie.
| Źródło | Typ | Darmowe / płatne | Licencja | Dla kogo |
| Mockup World | szablony PSD do pobrania | darmowe | zależy od autora szablonu | graficy z Photoshopem |
| Freepik | szablony PSD, sceny | darmowe z atrybucją lub premium | atrybucja w wersji darmowej | graficy, marketerzy |
| Envato Elements | szablony PSD, 3D | subskrypcja | komercyjna w ramach abonamentu | agencje, freelancerzy |
| Placeit | generator online, wideo | płatny, pojedyncze darmowe | wg planu | sklepy, social media |
| Canva (Mockups) | generator w przeglądarce | darmowy i Pro | wg planu Canvy | marki, początkujący |
| Renderforest | generator mockupów i wideo | darmowy z ograniczeniami | wg planu | marketing, prezentacje |
| Mockey.ai, Fotor AI | generator AI | darmowe z limitami | wg regulaminu | szybkie wizualizacje |
Na stronach z darmowymi szablonami wpisuje się zwykle hasła w stylu „mockup szablony” albo „mockup szablony dla odzieży”. W angielskich serwisach szukaj fraz free mockups, mockup templates lub custom mockups. Mockup do pobrania ma zwykle formę archiwum ZIP z plikiem PSD i instrukcją. Zanim pobierzesz darmowy mockup PSD z Mockup World czy innej biblioteki, sprawdź, jaką licencję nadał mu autor.
Darmowy mockup PSD czy darmowy mockup produktu nie zawsze nadaje się do pracy komercyjnej. Wiele szablonów ma licencję „do użytku osobistego” albo wymaga podania autora. Przed użyciem w sklepie, reklamie czy zleceniu dla klienta sprawdź plik licencji. Szablonu nie wolno też odsprzedawać jako własnego.
Mockup generator, na przykład Renderforest albo aplikacja Mockups w Canvie, wybierzesz wtedy, gdy liczy się czas, a darmowy mockup PSD – gdy potrzebujesz pełnej kontroli. Jeśli prowadzisz sklep, mockup do Twojego biznesu najlepiej oprzeć na jednym spójnym zestawie scen, żeby galeria produktów wyglądała jednolicie. Mockup do przeglądania w sklepie powinien mieć ten sam kąt, światło i tło na każdej karcie produktu.
Jakie parametry techniczne powinien mieć mockup?
Mockup do internetu przygotuj w sRGB, w szerokości 1600–3000 px i formacie PNG, JPG lub WebP. Mockup do druku i prezentacji premium – w 300 DPI, a do proofów w CMYK.
| Zastosowanie | Rozdzielczość | Format | Przestrzeń barw |
| Strona www, sklep | 1600–3000 px szerokości | WebP, JPG, PNG | sRGB |
| Social media | 1080–2160 px | JPG, PNG, MP4 | sRGB |
| Druk, prezentacja premium | 300 DPI | PDF, TIFF | CMYK do proofów |
| Mockup UI desktop | ramka 1440 px | PNG, PDF | sRGB |
| Mockup UI mobile | ramka 375–393 px | PNG, PDF | sRGB |
Jedna zasada chroni przed rozmytą grafiką: projekt wstawiany do inteligentnego obiektu musi mieć rozdzielczość co najmniej taką jak samo pole obiektu. Mockup idealny to taki, w którym nikt nie zauważy, że produkt nigdy nie był sfotografowany. Przy wielu mockup templates autor podaje wymiary pola projektu w pikselach, więc wiesz, jak duży plik przygotować.
Ile kosztuje mockup?
Mockup może kosztować od 0 zł do kilku tysięcy złotych. Poniższe kwoty to orientacyjne szacunki na 2026 rok:
- darmowy szablon – 0 zł (z ograniczeniami licencji),
- pojedynczy szablon premium – od kilkunastu do ok. 100 zł,
- subskrypcja biblioteki mockupów – kilkadziesiąt zł miesięcznie,
- indywidualna wizualizacja 3D u grafika – od kilkuset do kilku tysięcy zł, zależnie od liczby ujęć i złożoności produktu.
Indywidualny projekt mockupu (custom mockups) ma sens wtedy, gdy produkt ma nietypowy kształt, a gotowe szablony go nie oddają.
Najczęstsze błędy przy tworzeniu mockupów
Najczęstsze błędy to niska rozdzielczość, brak realizmu i niesprawdzona licencja. Pełna lista:
- Niska rozdzielczość projektu → rozmyte logo → wstawiaj wektor lub plik większy niż pole obiektu.
- Zła perspektywa i brak cieni → efekt „naklejki” → używaj trybów mieszania i warstw cienia.
- Nienaturalny kolor materiału → klient oczekuje innego produktu → porównaj z próbką lub wzornikiem.
- Nadruk niezgodny z technologią → np. gradient, którego nie da się zrobić sitodrukiem → skonsultuj projekt z drukarnią.
- Brak sprawdzenia licencji → ryzyko roszczeń → czytaj plik licencji przed użyciem komercyjnym.
- Wyidealizowana scena → produkt na zdjęciu nie przypomina tego z paczki → zachowaj realne proporcje i miejsce nadruku.
- Lorem ipsum w mockupie UI → klient nie ocenia realnej treści → wstaw prawdziwe nagłówki i zdjęcia.
- Za dużo ujęć → decyzja się rozmywa → pokaż 2–3 najważniejsze.
Tu wiele osób popełnia ten sam błąd przy szóstym punkcie. W e-commerce mockup musi wiernie oddawać produkt: kolor, proporcje i miejsce nadruku. Prezentacja wprowadzająca w błąd może zostać uznana za nieuczciwą praktykę rynkową. Gdy masz już zdjęcie prawdziwego produktu, dodaj je obok wizualizacji. Mockup do elementów oferty pomaga sprzedawać, ale nie powinien obiecywać więcej, niż klient dostanie.
Czego mockup nie pokaże?
Mockup nie pokaże dotyku materiału, dokładnego koloru w druku ani działania interfejsu. Do tego potrzebujesz innych narzędzi:
- kolor w druku – monitor wyświetla barwy inaczej niż papier, więc przed nakładem zamów proof, czyli wydruk próbny,
- faktura i gramatura – próbka materiału lub egzemplarz testowy,
- interakcje – klikalny prototyp,
- użyteczność – testy z udziałem użytkowników.
Mockup dla Twojego zespołu to więc etap decyzji o wyglądzie, a nie dowód, że produkt jest gotowy.
FAQ – najczęstsze pytania o mockupy
Czym różni się mockup od makiety? Makieta (wireframe) pokazuje układ ekranu w szarościach, bez kolorów i zdjęć. Mockup pokazuje pełną warstwę wizualną projektu. Makieta odpowiada na pytanie „co i gdzie”, mockup na pytanie „jak to wygląda”.
Czy mockup to to samo co prototyp? Nie. Mockup jest statycznym obrazem, a prototyp da się klikać i przechodzić między ekranami. W Figmie mockup staje się prototypem po dodaniu połączeń.
Jak zrobić mockup za darmo? Najprościej w aplikacji Mockups (dawne Smartmockups) w darmowej wersji Canvy albo w darmowym szablonie PSD z Mockup World, jeśli masz Photoshopa. Generatory online, takie jak Renderforest czy Mockey.ai, mają darmowe plany z limitami.
Czy można używać darmowych mockupów komercyjnie? Tylko wtedy, gdy pozwala na to licencja. Wiele darmowych szablonów jest przeznaczonych do użytku osobistego lub wymaga atrybucji. Sprawdź plik licencji przed publikacją w sklepie lub reklamie.
Jaki program jest najlepszy do mockupów? Do mockupów produktowych z pełną kontrolą – Adobe Photoshop. Do ekranów stron i aplikacji – Figma. Do szybkich wizualizacji bez doświadczenia – mockup generator online. Mockup design w Photoshopie daje najwięcej kontroli, ale wymaga nauki programu.
Jak zrobić mockup logo? Wybierz szablon z nośnikiem, na którym logo będzie używane (papier, szyld, kubek). Wstaw logo w wektorze do inteligentnego obiektu lub do aplikacji Mockups w Canvie. Sprawdź znak na jasnym i ciemnym tle.
Jaką rozdzielczość powinien mieć mockup? Do internetu 1600–3000 px szerokości w sRGB. Do druku 300 DPI. Projekt wstawiany do szablonu powinien być co najmniej tak duży jak pole, w które go wklejasz.
Czy mockup może zastąpić zdjęcie produktu w sklepie? Może, jeśli wiernie oddaje kolor, proporcje i miejsce nadruku. Tak działa wiele sklepów print-on-demand. Gdy masz zdjęcie prawdziwego produktu, pokaż je obok mockupu.
