Czym jest makieta aplikacji mobilnej i po co ją robić przed kodem?

Tekst wygenerowany przez AI · Wydawca: Tomasz Niedźwiecki · zawiera oznaczoną reklamę jego usług

Czym jest makieta aplikacji mobilnej?

Makieta aplikacji mobilnej to rysunek ekranów, który powstaje przed programowaniem. Pokazuje, co użytkownik zobaczy po uruchomieniu. Nie działa jak program, ale pozwala ocenić układ i wygląd; przejścia między ekranami pokazuje dopiero prototyp.

Dla zamawiającego to moment, w którym abstrakcyjny opis zamienia się w coś, na co można wskazać palcem. Zdanie „użytkownik zakłada konto” staje się trzema ekranami. Dopiero wtedy widać, czy brakuje pola, kroku albo całego ekranu.

Bez makiety rozmowa o aplikacji opiera się na słowach, a każdy rozumie je trochę inaczej. Zamawiający wyobraża sobie jedno, wykonawca drugie, i różnicę widać dopiero na gotowym produkcie. Makieta zamienia te domysły w jeden wspólny obraz.

W budowie aplikacji makieta stoi zaraz po ustaleniu zakresu. Jak spisać ten zakres, opisuje wpis o zakresie pierwszej wersji.

Czym różni się makieta od prototypu i projektu UI?

Różnią się poziomem szczegółów i tym, czy da się po nich klikać. Nielsen Norman Group definiuje wierność prototypu jako to, jak bardzo przypomina wyglądem i działaniem gotowy system (NN/g, artykuł z 18.12.2016, odczyt 09.10.2026). W praktyce nazwy bywają mieszane, więc przy zamówieniu zawsze dopytaj, co dokładnie dostaniesz.

Wiersz „Co sprawdzasz” jest najważniejszy, bo od niego zależy, ile pracy ma sens. Wireframe odpowiada na pytanie, czy ekranów jest dość i czy stoją we właściwej kolejności. Dopiero prototyp z przejściami pokazuje, czy ktoś obcy przejdzie ścieżkę bez Twojej pomocy.

Ile kosztuje projekt ekranów i jak to policzyć?

Według cenauslug.pl średni koszt projektu graficznego jednego ekranu aplikacji mobilnej w 2026 r. wynosi 541 zł, a ceny wahają się od 250 do 950 zł (cenauslug.pl, publikacja 28.10.2025, odczyt 09.10.2026). Strona nie podaje, czy kwoty są netto, czy brutto.

Ten sam serwis szacuje pełny projekt prostej aplikacji na 10–15 ekranów z podstawową analizą UX na 8 000–20 000 zł (cenauslug.pl, odczyt 09.10.2026).

Osobnych cen dla wireframe, makiety i prototypu serwis nie podaje.

Drugi poradnik cenauslug.pl pisze, że projektowanie UX i UI pochłania około 20% budżetu aplikacji, a godzina projektanta kosztuje 120–180 zł netto (cenauslug.pl, publikacja 21.05.2026, odczyt 09.10.2026).

Ten sam serwis podaje szacowany czas wykonania tej usługi: od 4 godzin do 2 dni (cenauslug.pl, publikacja 28.10.2025, odczyt 09.10.2026). Strona nie precyzuje, czy to czas na jeden ekran, czy na całe zlecenie, a czasu dla wireframe i prototypu żadne z tych źródeł nie podaje, więc ustal go z wykonawcą.

Narzędzie samo nie jest dużym kosztem. Figma pokazuje na stronie cennika plan Professional za 16 USD miesięcznie przy rozliczeniu rocznym, za pełne miejsce edytora (Figma, stan na październik 2026 r., odczyt 09.10.2026). Zamawiający zwykle nie potrzebuje takiego miejsca, bo makietę przygotowuje wykonawca.

Przed zatwierdzeniem wyceny ustal z wykonawcą trzy rzeczy: liczbę ekranów, cenę za ekran oraz to, kto płaci za narzędzie.

Co sprawdzić w makiecie, zanim zacznie się kod?

Sprawdź, czy każdy ekran ma cel, czy ścieżka od wejścia do celu jest krótka i czy nic nie zostało „na później”. Właśnie takie luki wychodzą w kodzie najdrożej.

1. Przejdź główną ścieżkę od otwarcia aplikacji do pierwszego efektu i policz kliknięcia.
2. Sprawdź ekrany pomocnicze: pustą listę, błąd, brak internetu, logowanie, wylogowanie.
3. Zapisz, co się dzieje po każdym przycisku. Przycisk bez opisu skutku to luka.
4. Zapytaj, jakie dane aplikacja zbiera na każdym ekranie i dlaczego.
5. Zatwierdź makietę na piśmie, razem z numerem wersji.

Kto dostarcza materiały i decyzje na tym etapie, opisuje wpis o zadaniach zamawiającego. Czy ekrany mają działać też w przeglądarce, rozstrzyga porównanie aplikacji natywnej, hybrydowej i PWA.

Ilu osobom pokazać makietę i jak?

Testy z zadaniami najwygodniej robić na klikalnym prototypie. Na statycznych ekranach też się da, jeśli po każdym „kliknięciu” pokazujesz kolejny ekran (NN/g, 18.12.2016).

Pokaż klikalny prototyp pięciu osobom z grupy docelowej, a potem poprawioną wersję kolejnym pięciu. Według Nielsen Norman Group pierwsze badanie z pięcioma uczestnikami znajduje 85% problemów użyteczności, a budżet lepiej wydać na 3 badania po 5 osób niż na jedno duże (NN/g, publikacja 18.03.2000, odczyt 09.10.2026).

Liczba 85% z artykułu NN/g (odczyt 09.10.2026) to średnia z modelu NN/g i dotyczy użytkowników z jednej, podobnej grupy; przy kilku wyraźnie różnych grupach testuj każdą osobno. To nie gwarancja, że znajdziesz wszystko, więc nie traktuj jej jak odbioru jakości.

Poproś osoby testujące o wykonanie zadania własnymi słowami, na przykład „zamów usługę na jutro”, i nie podpowiadaj. Zapisz miejsca, w których się zawahały, i zanotuj, co dokładnie powiedziały na głos. Pytania zadane w trakcie pokazują, czego ekran nie wyjaśnia. Każde takie miejsce to kandydat do poprawki przed kodem.

Całą drogę od zakresu do startu pokazuje wpis o budowie aplikacji krok po kroku. Wszystkie etapy zebrał dział jak przebiega budowa.