Definicja
Wireframe to uproszczony schemat interfejsu użytkownika, pokazujący rozmieszczenie elementów (nawigacja, treść, przyciski) bez warstwy wizualnej.
Wireframe vs Mockup vs Prototyp
| Artefakt | Wierność | Interaktywny? | Cel |
|---|---|---|---|
| Wireframe | Niska (szary, boxy) | Nie | Układ, hierarchia informacji |
| Mockup | Wysoka (kolory, fonty) | Nie | Zatwierdzenie wyglądu |
| Prototyp | Wysoka | Tak (klikalny) | Testy użyteczności |
Co zawiera wireframe?
- Układ strony (header, sidebar, content, footer)
- Hierarchia informacji (co ważne, co drugorzędne)
- Nawigacja (menu, breadcrumbs, linki)
- Formularze (pola, przyciski, walidacja)
- Placeholder content (Lorem ipsum, szare boxy na obrazki)
Dlaczego to ważne?
Wireframe pozwala: - dyskutować o UX bez rozpraszania się designem ("nie lubię tego zielonego" → skupmy się na układzie) - szybko iterować — zmiana w wireframe = minuty, w kodzie = godziny - uzgodnić zakres z interesariuszem przed implementacją
Narzędzia
- Balsamiq — celowo "nieładne" wireframy (sketch style)
- Figma — wireframe + mockup + prototyp w jednym
- draw.io — darmowe, wystarczające do prostych wireframe'ów
- Papier — najszybszy wireframe na świecie