Makieta strony internetowej — jak zrobić wireframe, zanim wydasz pieniądze na projekt

Najdroższe zmiany w projekcie strony to te, które przychodzą za późno. Przesunięcie sekcji na makiecie zajmuje pięć minut. Ta sama zmiana po wdrożeniu to kilka godzin pracy i rozmowa o dodatkowym kosztorysie. Makieta istnieje właśnie po to, żeby wszystkie trudne decyzje podjąć wtedy, kiedy są tanie. Poniżej praktyka: jak ją zrobić, w czym i na co uważać. Cały proces projektowy, którego makieta jest jednym z etapów, opisujemy osobno w tekście o procesie UX/UI przy projektowaniu stron.

Czym makieta różni się od projektu graficznego

To rozróżnienie warto mieć w głowie przy każdej rozmowie z wykonawcą:

Makieta jest w szarościach celowo. Gdy pokażesz klientowi kolorowy projekt, rozmowa natychmiast zejdzie na odcień przycisku — zamiast na to, czy formularz jest we właściwym miejscu. Brak koloru wymusza rozmowę o strukturze.

Krok 1. Zacznij od celu podstrony, nie od układu

Zanim narysujesz pierwszy prostokąt, odpowiedz na trzy pytania dla każdej podstrony:

1. Kto tu trafia i skąd? (z Google, z reklamy, z menu, z newslettera)
2. Czego szuka w pierwszych pięciu sekundach?
3. Co ma zrobić przed opuszczeniem strony? — jedna główna akcja, nie trzy równorzędne.

Podstrona bez jasnej odpowiedzi na punkt trzeci nie potrzebuje makiety, tylko decyzji biznesowej.

Krok 2. Ustal inwentarz treści

Wypisz wszystko, co ma się znaleźć na stronie: nagłówek, opis, korzyści, cennik, opinie, FAQ, formularz. Potem uszereguj od najważniejszego do najmniej ważnego — z perspektywy odwiedzającego, nie firmy.

To najczęstsze źródło konfliktu: właściciel chce zacząć od historii firmy, a klient chce wiedzieć, czy dana usługa w ogóle jest w ofercie i ile kosztuje. Kolejność na makiecie rozstrzyga ten spór raz, zanim wejdzie w grę projekt.

Krok 3. Rysuj od telefonu

Zacznij od szerokości 320–390 px. Powód jest praktyczny: na wąskiej kolumnie wszystko układa się w jedną linię, więc kolejność musi być podjęta świadomie. Robiąc odwrotnie — od desktopu — dostajesz układ trzykolumnowy, który potem trzeba „jakoś” rozłożyć na telefonie, i decyzje zapadają przypadkowo.

Zasady projektowania od najmniejszego ekranu rozpisaliśmy w poradniku mobile-first.

Krok 4. Nałóż siatkę i system odstępów

Dwa parametry, które odróżniają makietę od bazgroła:

• Siatka kolumnowa — 12 kolumn na desktopie, 4–6 na tablecie, 1–2 na telefonie. Wszystko wyrównuje się do kolumn.
• System odstępów oparty na jednej jednostce bazowej (najczęściej 8 px): odstępy to 8, 16, 24, 32, 48, 64 px. Nigdy „na oko”.

Efekt jest niewidoczny, dopóki go nie ma. Strona bez systemu odstępów zawsze wygląda na poskładaną, nawet gdy każdy element z osobna jest poprawny.

Krok 5. Wpisz prawdziwe treści, nie „lorem ipsum”

To jedna zmiana, która najbardziej poprawia jakość makiet. Zamiast tekstu zastępczego wpisz realne nagłówki i realne długości opisów. Wtedy od razu widać:

• że nagłówek, który brzmiał świetnie w prezentacji, ma trzy linijki na telefonie,
• że nazwy sześciu usług nie mieszczą się w menu,
• że opis produktu ma 40 znaków w jednym przypadku i 400 w innym.

Makieta z „lorem ipsum” wygląda pięknie i rozpada się przy wdrożeniu.

Krok 6. Zaznacz stany, nie tylko widok domyślny

Prawdziwy układ musi obsłużyć sytuacje, o których łatwo zapomnieć:

• pusty stan (brak wyników wyszukiwania, pusty koszyk),
• stan błędu (niepoprawnie wypełniony formularz),
• stan ładowania,
• długa treść (nazwa produktu na cztery linijki),
• brak zdjęcia.

Każdy z tych stanów pominięty na makiecie wróci jako pytanie w trakcie wdrożenia — albo jako błąd na produkcji.

W czym to robić

Nie potrzebujesz drogiego narzędzia. Potrzebujesz takiego, w którym szybko wyrzucisz wersję do kosza. Przywiązanie do makiety, nad którą siedziałeś sześć godzin, to realne ryzyko projektowe.

Jak weryfikować makietę

Trzy testy, które zajmują łącznie kwadrans i wyłapują większość problemów:

1. Test pięciu sekund. Pokaż makietę komuś spoza projektu na pięć sekund, potem zapytaj: czym zajmuje się ta firma i co można tu zrobić? Brak jasnej odpowiedzi = problem z hierarchią.
2. Test kciuka. Na widoku mobilnym sprawdź, czy wszystkie kluczowe akcje są w zasięgu kciuka — dolna połowa ekranu. Główny przycisk w prawym górnym rogu to projekt zrobiony na desktopie.
3. Test bez obrazków. Zasłoń wszystkie miejsca na zdjęcia. Czy strona nadal się komunikuje? Jeśli nie, treść jest zbyt uzależniona od grafiki, która na wolnym łączu doładuje się jako ostatnia.

Po wdrożeniu warto sprawdzić, czy założenia się potwierdziły — do tego służą nagrania sesji i mapy kliknięć, o których piszemy w tekście o czytaniu heatmap.

Pięć błędów, które kosztują najwięcej

1. Makieta tylko strony głównej. Ruch z Google trafia najczęściej na podstrony ofertowe i wpisy — a te często nie mają zaprojektowanego układu w ogóle.
2. Pominięcie widoku mobilnego. Ponad połowa ruchu, a często pierwszy kontakt z firmą.
3. Trzy przyciski o równej wadze wizualnej. Wybór między trzema równorzędnymi opcjami to najczęściej wybór żadnej.
4. Menu z dwunastoma pozycjami. Jeśli wszystko jest ważne, nic nie jest. Grupuj.
5. Akceptacja makiety mailem, bez rozmowy. „OK, wygląda dobrze” nie oznacza, że ktoś to przeanalizował. Przejdź makietę na żywo, klikając ścieżkę użytkownika.

[DO UZUPEŁNIENIA] — zrzut wireframe’u z Waszego projektu obok wersji finalnej. Zestawienie „makieta → wdrożenie” to najlepszy możliwy materiał ilustracyjny do tego tekstu.

Kiedy przekazać to projektantowi

Makietę własnej strony możesz zrobić sam i to dobra inwestycja — nawet szkic na kartce skraca później rozmowę z wykonawcą o połowę i sprawia, że wycena jest trafniejsza (o tym, co jeszcze warto przygotować, piszemy w tekście o briefie na stronę internetową).

Projektanta warto włączyć, gdy pojawia się złożona architektura informacji, wiele typów podstron albo proces sprzedażowy do zaprojektowania. W naszych projektach stron makieta jest osobnym, akceptowanym etapem — właśnie po to, żeby zmiany działy się wtedy, kiedy są tanie.

FAQ — makieta i layout strony internetowej

Czy makieta jest potrzebna przy małej stronie? Przy pięciu podstronach wystarczy szkic na kartce, ale sam etap warto zachować. Nawet prosta strona ma hierarchię i główną akcję — a te trzeba świadomie ustalić.

Ile kosztuje wykonanie makiety? Jeśli jest częścią projektu strony, zwykle mieści się w wycenie całości. Zamawiana osobno — najczęściej kilkaset do kilku tysięcy złotych, zależnie od liczby unikalnych układów podstron.

Czym różni się wireframe od prototypu? Wireframe jest statyczny — pokazuje układ. Prototyp jest klikalny — pozwala przejść ścieżkę użytkownika i przetestować ją, zanim powstanie kod. Figma robi jedno i drugie.

Czy mogę zrobić makietę w Canvie albo PowerPoincie? Możesz i to lepsze niż nic. Ograniczeniem jest brak siatki i systemu odstępów, więc makieta trudniej przekłada się na wdrożenie. Do pierwszej rozmowy z wykonawcą w zupełności wystarczy.

Kto powinien akceptować makietę? Osoba decyzyjna po stronie firmy — nie zespół w trybie głosowania. Makieta akceptowana przez komitet zwykle kończy się układem, w którym każdy dostał swoją sekcję, a klient nie dostał nic.

Autor: Adrian Kamiński — Websky Studio, Poznań. Makieta, projekt i wdrożenie u jednej osoby — bez etapu „przekazania” i utraty założeń po drodze.