Definicja
Prototyp to wstępna wersja rozwiązania służąca do wizualizacji koncepcji i zbierania feedbacku od użytkowników przed rozpoczęciem implementacji.
Typy prototypów
| Typ |
Opis |
Koszt |
Czas |
Kiedy stosować |
| Paper prototype |
Szkice na papierze |
Bardzo niski |
30 min |
Wczesna faza, warsztaty |
| Wireframe |
Schematy ekranów (bez grafiki) |
Niski |
1-2h |
Układ i nawigacja |
| Mockup |
Projekt wizualny z grafiką |
Średni |
1-2 dni |
Zatwierdzenie wyglądu |
| Hi-fi (interaktywny) |
Klikalny prototyp |
Wysoki |
3-5 dni |
Testy użyteczności |
Dlaczego to ważne?
Prototyp pozwala:
- pokazać interesariuszowi wizję zamiast opisywać ją słowami,
- zebrać feedback zanim napiszesz linijkę kodu,
- wykryć problemy UX na etapie projektowania, nie testowania,
- zaoszczędzić czas — poprawka w Figmie = minuty, w kodzie = godziny.
Kiedy stosować?
- Niejasne wymagania dotyczące UI/UX
- Skomplikowane przepływy ekranowe
- Nowy produkt / redesign
- Walidacja koncepcji z użytkownikami
- Rozmowa z interesariuszem, który "woli zobaczyć"
Narzędzia
| Narzędzie |
Typ |
Darmowe? |
Mocne strony |
| Figma |
Online |
Freemium |
Kolaboracja, design systems |
| Miro |
Online |
Freemium |
Tablice, warsztaty, wireframes |
| Balsamiq |
Desktop |
Trial |
Szybkie lo-fi wireframes |
| Adobe XD |
Desktop |
Freemium |
Prototypy interaktywne |
| Pen & paper |
Offline |
Tak |
Najszybsze! |
Prototyp vs MVP
| Aspekt |
Prototyp |
MVP |
| Cel |
Test koncepcji/UX |
Test rynku/wartości |
| Działa? |
Nie musi |
Tak — działający produkt |
| Użytkownicy? |
Testerzy/interesariusze |
Realni użytkownicy |
| Kod? |
Brak |
Działający kod |
Powiązane pojęcia
