Makieta, prototyp i projekt graficzny strony: czym się różnią

Makieta i prototyp strony to dwa etapy, które pozwalają sprawdzić układ i działanie serwisu, zanim ktokolwiek zacznie programować. Projekt graficzny to trzeci krok: nadaje stronie ostateczny wygląd. Każdy z nich odpowiada na inne pytanie i ma inny koszt zmian. Poniżej wyjaśniamy różnice prostym językiem, żeby łatwiej było rozmawiać z wykonawcą i świadomie akceptować kolejne etapy.

Trzy etapy, trzy różne pytania

Najprościej zapamiętać to tak:

• makieta odpowiada na pytanie „co i gdzie?”,
• prototyp odpowiada na pytanie „jak to działa?”,
• projekt graficzny odpowiada na pytanie „jak to wygląda?”.

W praktyce te etapy się przenikają. Prototyp można zbudować z makiet albo z gotowego projektu graficznego. Ważne jest, żeby wiedzieć, na którym etapie jesteś i co w danym momencie oceniasz.

Makieta strony: szkielet bez dekoracji

Makieta (ang. wireframe) to uproszczony schemat ekranu. Zwykle jest szara, bez zdjęć i bez kolorów marki. Pokazuje, jakie sekcje znajdą się na stronie, w jakiej kolejności, gdzie będzie nagłówek, przycisk, formularz czy cennik.

Na makiecie oceniasz:

• czy kolejność sekcji prowadzi klienta do kontaktu lub zakupu,
• czy niczego nie brakuje: cen, opinii, odpowiedzi na częste pytania,
• czy najważniejsza informacja jest widoczna na pierwszym ekranie,
• jak strona układa się na telefonie, gdzie wszystko ląduje w jednej kolumnie.

Brak kolorów to celowy zabieg. Dzięki temu rozmowa dotyczy treści i układu, a nie tego, czy niebieski jest wystarczająco niebieski. Na tym etapie zmiana kolejności sekcji zajmuje kilka minut.

Makieta to też dobry moment, żeby zweryfikować strukturę serwisu. Podstawowe podstrony, od których warto zacząć, opisujemy w poradniku o stronie internetowej dla małej firmy.

Prototyp: makieta, którą można kliknąć

Prototyp to zestaw ekranów połączonych w przepływy. Klikasz przycisk „Umów wizytę” i przechodzisz do formularza. Wybierasz usługę i widzisz kolejny krok. Nic się naprawdę nie zapisuje, ale całą ścieżkę można przejść na komputerze i telefonie.

Prototyp pozwala:

• sprawdzić, czy proces jest logiczny i ile ma kroków,
• przetestować stronę na kilku osobach z grupy docelowej, zanim powstanie kod,
• pokazać pomysł wspólnikom, zespołowi albo inwestorom,
• doprecyzować zakres prac i wycenę, bo widać każdy ekran.

Prototyp jest najbardziej przydatny przy stronach z procesem: sklepach, formularzach wyceny, rezerwacjach, strefach klienta. Jeśli planujesz na przykład zapisy na wizyty, warto przejść prototyp całej ścieżki, zanim wybierzesz technologię. Opcje opisujemy w tekście o tym, czy wybrać gotowy czy własny system rezerwacji online.

U nas pierwszy klikalny prototyp powstaje zwykle po 2–7 dniach, zależnie od liczby ekranów.

Projekt graficzny: ostateczny wygląd

Projekt graficzny (często nazywany projektem UI) to makieta ubrana w identyfikację wizualną marki. Pojawiają się kolory, kroje pisma, zdjęcia, ikony, ilustracje, styl przycisków i animacje. Tak będzie wyglądać gotowa strona.

Na tym etapie oceniasz:

• czy strona pasuje do charakteru marki i oczekiwań klientów,
• czy tekst jest czytelny, a kontrast wystarczający,
• czy zdjęcia są dobrej jakości i pokazują prawdziwą firmę,
• czy przyciski i linki wyraźnie odróżniają się od reszty treści.

Dobry projekt graficzny obejmuje też stany elementów: jak wygląda przycisk po najechaniu, pole formularza z błędem, pusty koszyk, komunikat po wysłaniu. To szczegóły, które programista i tak musi gdzieś zaprojektować, więc lepiej, żeby zrobił to projektant.

Porównanie w tabeli

	Makieta	Prototyp	Projekt graficzny
Pytanie	co i gdzie?	jak działa?	jak wygląda?
Wygląd	szary schemat	szary lub kolorowy	ostateczny
Interakcja	brak	klikalne przejścia	zwykle statyczny lub klikalny
Koszt zmiany	bardzo niski	niski	średni
Kto ocenia	właściciel, zespół	właściciel, użytkownicy	właściciel, zespół marki
Typowy błąd	ocenianie kolorów zamiast treści	pomijanie testu na telefonie	akceptacja bez prawdziwych tekstów

Dlaczego warto przejść przez wszystkie etapy

Każdy etap kosztuje trochę czasu, więc pojawia się pokusa, żeby od razu „zrobić ładną stronę”. Problem w tym, że koszt zmian rośnie z każdym krokiem:

1. Zmiana w makiecie: przesunięcie bloku, minuty pracy.
2. Zmiana w projekcie graficznym: przeprojektowanie kilku ekranów i wersji mobilnej, godziny.
3. Zmiana w zaprogramowanej stronie: przebudowa komponentów, testy, poprawki w panelu treści, dni.

Pominięcie makiety i prototypu rzadko skraca projekt. Częściej przesuwa dyskusje o układzie na etap, w którym każda decyzja jest droższa.

Ile to trwa i ile kosztuje

Makieta, prototyp i projekt graficzny zwykle nie są osobnymi usługami, tylko częścią projektu strony lub aplikacji. Ich zakres zależy od wielkości serwisu:

• landing page lub prosta strona firmowa: makieta strony głównej i jednej podstrony, potem projekt graficzny; całość mieści się w cenie strony (u nas landing page to orientacyjnie 1 900–3 900 zł netto, strona firmowa 3 900–7 500 zł netto),
• rozbudowany serwis lub sklep: makiety szablonów (strona główna, kategoria, produkt, koszyk, artykuł), klikalny prototyp ścieżki zakupu lub zapytania, projekt graficzny wszystkich szablonów,
• aplikacja webowa: prototyp każdej roli użytkownika i każdego głównego scenariusza, często testowany z przyszłymi użytkownikami przed wyceną programowania.

Czas także zależy od zakresu. Prosta strona przechodzi od makiety do zaakceptowanego projektu w kilka dni roboczych. Przy aplikacji z kilkoma rolami klikalny prototyp przygotowujemy zwykle po około 7 dniach, a cała aplikacja powstaje w 20–40 dni roboczych. Czas poświęcony na prototyp to zwykle najlepiej wydane dni w całym projekcie. Orientacyjny koszt dla swojego zakresu sprawdzisz w kalkulatorze wyceny.

Najczęstsze nieporozumienia

Przy akceptacji projektów powtarza się kilka sytuacji, których łatwo uniknąć:

• „Makieta wygląda biednie”. Tak ma wyglądać. Brak kolorów i zdjęć to nie zapowiedź końcowego efektu, tylko sposób na skupienie się na treści.
• „Prototyp nie działa”. Prototyp niczego nie zapisuje i nie wysyła maili. Pokazuje przejścia między ekranami, a nie prawdziwą logikę.
• „Projekt graficzny to już gotowa strona”. To obraz strony. Zanim zacznie działać, trzeba ją zaprogramować, podłączyć panel treści, formularze i analitykę.
• „Wersję mobilną zrobi się potem”. Na telefonie zmienia się kolejność treści, menu i sposób prezentacji tabel. To trzeba zaprojektować, a nie zostawić przypadkowi.

Jak dobrze ocenić makietę i prototyp

Kilka praktycznych wskazówek dla osoby, która dostaje projekt do akceptacji:

• Patrz najpierw na telefon. Większość klientów zobaczy stronę właśnie tam.
• Wczuj się w klienta. Przejdź ścieżkę od wejścia z Google do wysłania zapytania, jakby to była Twoja pierwsza wizyta.
• Wymagaj prawdziwych tekstów albo chociaż ich szkiców. Wypełniacz „lorem ipsum” ukrywa problemy z długością nagłówków i kolejnością argumentów.
• Pokaż prototyp 3–5 osobom spoza firmy i obserwuj, gdzie się zawahają. Nie podpowiadaj.
• Komentuj w pliku, przy konkretnym elemencie, zamiast w długim mailu. Figma pozwala zostawiać uwagi bezpośrednio na ekranie.
• Oddziel gust od celu. „Nie lubię zielonego” to inna uwaga niż „klienci nie widzą przycisku”.

Lista kontrolna przed akceptacją

Przed przejściem do programowania sprawdź, czy:

• znasz pełną listę podstron i wiesz, co jest na każdej,
• na pierwszym ekranie widać, co oferujesz, komu i gdzie,
• każda podstrona kończy się jasnym kolejnym krokiem,
• formularze mają tylko niezbędne pola,
• wersja mobilna jest zaprojektowana osobno, a nie „domyślnie się dopasuje”,
• w projekcie są stany błędów, potwierdzeń i pustych widoków,
• teksty są zbliżone do ostatecznych,
• kontrast tekstu i wielkość przycisków są wygodne.

Podsumowanie

Makieta pokazuje, co i gdzie znajdzie się na stronie. Prototyp pozwala przejść ścieżkę klienta, zanim powstanie kod. Projekt graficzny nadaje całości ostateczny wygląd. Przejście przez te etapy po kolei oszczędza czas i pieniądze, bo najważniejsze decyzje zapadają tam, gdzie zmiana kosztuje najmniej.

Zobacz, jak pracujemy przy projektowaniu UX/UI, albo napisz do nas. Pierwszy prototyp przygotujemy zwykle w ciągu kilku dni od ustalenia zakresu.