Najczęstsze błędy w web designie to brak hierarchii treści, przeładowana nawigacja, słabe CTA, za długie formularze i pominięcie wersji mobilnej. Wszystkie powstają na długo przed wdrożeniem i wszystkie można wykryć na etapie makiety strony internetowej, gdzie poprawka zajmuje godziny, a nie tygodnie. Poniżej znajdziesz 12 błędów designu z testem „jak to sprawdzić na makiecie”, checklistę odbioru w 10 krokach i metody testów, które działają jeszcze przed projektem graficznym.
Tekst jest dla właścicieli firm i marketerów, którzy zamówili stronę i dostali do akceptacji makietę, oraz dla początkujących projektantów, którzy chcą mieć listę do samokontroli, zanim projekt strony trafi do grafika i programisty.
Czym jest błąd w web designie i dlaczego „ładna strona” to za mało?
Błąd w web designie to decyzja projektowa, która utrudnia użytkownikowi osiągnięcie celu (znalezienie informacji, kontakt, zakup) albo utrudnia firmie realizację celu biznesowego, czyli konwersji. Estetyka strony nie jest tu kryterium. Design może być dopracowany, a strona i tak nie działa, bo nikt nie wie, gdzie kliknąć, a formularz ma dziewięć pól.
Dobry web design to web design dla użytkownika: łączy estetykę z użytecznością (usability), a nie zastępuje jednego drugim. Jeśli musisz wybierać, wybierz użyteczność. Typografia, kolory i elementy wizualne da się poprawić w projekcie graficznym. Zły layout strony i złą architekturę informacji poprawia się już z programistą.
Co to jest makieta strony internetowej i dlaczego to najtańszy moment na poprawki?
Makieta strony internetowej (ang. wireframe) to uproszczony, zwykle czarno-biały schemat układu strony. Pokazuje layout, czyli gdzie jest nawigacja, jakie sekcje następują po sobie, gdzie znajdą się teksty i przyciski. Nie ma na niej kolorów, zdjęć ani docelowej typografii. Makieta służy do sprawdzenia struktury i ścieżek użytkownika, a nie do oceny wyglądu. Większość nieporozumień przy odbiorze makiety bierze się z oczekiwania, że „będzie ładnie”.
Wireframe, makieta i prototyp – czym się różnią?
Wireframe to angielska nazwa makiety, oba słowa oznaczają to samo. Różnice pojawiają się między poziomami szczegółowości. Prototyp strony internetowej to makieta klikalna, w której można przejść ścieżkę użytkownika od wejścia do formularza. Prototypowanie to etap, na którym design po raz pierwszy zaczyna zachowywać się jak strona.
| Poziom | Co pokazuje | Do czego służy |
| Lo-fi (szkic) | prostokąty i linie, bez proporcji | szybkie porównanie kilku wariantów layoutu |
| Mid-fi | realne proporcje, przybliżone teksty, kolejność sekcji | weryfikacja hierarchii, nawigacji i długości treści |
| Hi-fi | układ bliski projektowi graficznemu, nadal w szarościach | dopracowanie szczegółów przed projektem graficznym |
| Prototyp | makieta klikalna, przejścia między ekranami | testy ścieżek i testy z użytkownikami |
Makieta UX, makieta strony www i wireframe to w ofertach określenia tego samego produktu. Ważne jest to, czy dostajesz statyczne plansze, czy prototyp, w którym da się kliknąć.
Ile kosztuje ten sam błąd na makiecie, w projekcie graficznym i po wdrożeniu?
Koszt tego samego błędu rośnie o rząd wielkości z każdym etapem. W branży nazywa się to regułą 1-10-100. Traktuj ją jako heurystykę, a nie wynik precyzyjnych badań, bo proporcje zależą od projektu. Kierunek jest jednak zawsze ten sam.
| Etap | Kto poprawia | Ile trwa zmiana układu menu |
| Makieta | projektant UX | około 30 minut |
| Projekt graficzny | projektant UX i grafik | kilka godzin, przerobienie layoutów podstron |
| Po wdrożeniu (web development) | programista, tester, projektant | kilka dni: zmiany w HTML, CSS i JavaScript, testy, ponowne wdrożenie |
Nie ma przy tym znaczenia, czy strona powstaje w kodzie, w CMS (Content Management System) takim jak WordPress z Elementor Pro, czy w kreatorze jak Wix. Poprawka na makiecie zawsze jest tańsza niż poprawka na gotowej stronie, bo zmienia się jeden plik zamiast całego wdrożenia.
12 najczęstszych błędów w web designie – i jak je rozpoznać na makiecie
Każdy błąd opisuję według tego samego schematu: na czym polega, jaki ma skutek i jak go sprawdzić na makiecie.
1. Brak jasnej hierarchii treści
Brak hierarchii w designie to sytuacja, w której wszystko na stronie jest „równie ważne”: trzy nagłówki tej samej wielkości, cztery przyciski, brak jednego dominującego komunikatu nad linią zgięcia. Above the fold to część strony widoczna bez przewijania. Jeśli w tym miejscu nie ma odpowiedzi na pytanie „co ta firma robi i co mam zrobić”, użytkownik wychodzi.
Skutek: niższa konwersja, mimo że design strony „wygląda profesjonalnie”.
Jak sprawdzić na makiecie: zrób test 5 sekund. Pokaż makietę osobie spoza projektu na 5 sekund, potem ją schowaj i zapytaj, co firma oferuje i co ma zrobić użytkownik. Jeśli odpowiedź jest niepewna, hierarchia wizualna nie działa. Sprawdź też, czy w sekcji hero jest dokładnie jeden nagłówek H1 i jeden główny komunikat.
2. Przeładowana lub nieczytelna nawigacja
Przeładowana nawigacja to menu z 9 czy 12 pozycjami, etykiety w rodzaju „Rozwiązania” albo „Oferta 2” i brak logiki grupowania. Użytkownik nie czyta menu, tylko je skanuje. To błąd architektury informacji, a nie grafiki.
Skutek: użytkownicy nie trafiają do kluczowych podstron i odchodzą do konkurencji.
Jak sprawdzić na makiecie: policz pozycje w menu głównym, powyżej 7 to sygnał do grupowania. Przeczytaj same etykiety bez kontekstu i zapytaj, czy każda mówi jasno, co jest pod spodem. Sprawdź, czy każda kluczowa podstrona jest maksymalnie 3 kliknięcia od strony głównej. Przy większych serwisach zrób card sorting albo tree testing, czyli test samych etykiet bez grafiki.
3. Słabe lub konkurujące ze sobą CTA
Call to Action (CTA), czyli wezwanie do działania, to przycisk prowadzący do celu strony: „Zamów wycenę”, „Umów rozmowę”, „Dodaj do koszyka”. Błąd w designie polega na braku głównego CTA, kilku równorzędnych przyciskach obok siebie albo jedynym CTA na samym dole strony.
Skutek: użytkownik ma trzy opcje i nie wybiera żadnej.
Jak sprawdzić na makiecie: policz przyciski w sekcji hero. Powinno być jedno główne CTA i maksymalnie jedno drugorzędne, wyraźnie słabsze wizualnie. Sprawdź, czy CTA powtarza się po każdej sekcji, która ma przekonać do działania (korzyści, opinie, cennik), i czy tekst przycisku mówi, co się stanie po kliknięciu.
4. Za długie formularze bez przewidzianych stanów
Za długi formularz to element designu, w którym pola pojawiły się „na wszelki wypadek”: NIP, stanowisko, skąd o nas wiesz. Do tego brak informacji, co się stanie po wysłaniu, oraz brak zaplanowanej walidacji i komunikatów o błędach.
Skutek: każde dodatkowe pole obniża liczbę wysłanych formularzy, a brak komunikatów błędów sprawia, że użytkownik rezygnuje.
Jak sprawdzić na makiecie: przy każdym polu zapytaj, do czego ta informacja jest potrzebna w pierwszym kontakcie. Sprawdź, czy makieta przewiduje trzy stany formularza: pusty, z błędem przy konkretnym polu i po wysłaniu. Zwróć uwagę na miejsce na klauzulę RODO.
5. Projektowanie tylko pod desktop
Projektowanie tylko pod desktop to makieta wyłącznie w wersji szerokiej. Menu z 8 pozycjami, tabela z 6 kolumnami i sekcja z czterema kolumnami kart wyglądają dobrze na monitorze, a na telefonie rozjeżdżają się albo znikają. Responsywność nie powstaje sama w kodzie, trzeba ją zaplanować.
Skutek: w wielu branżach większość ruchu pochodzi z telefonów, a layout zaprojektowany pod monitor nie ma na nich sensu. Strona bez wersji mobilnej traci większość odwiedzających. Google indeksuje strony internetowe w pierwszej kolejności w wersji mobilnej, więc wpływa to także na SEO.
Jak sprawdzić na makiecie: wymagaj wersji mobile dla kluczowych podstron, minimum strony głównej, oferty i kontaktu. Sprawdź, jak menu składa się na telefonie i co dzieje się z tabelami. Podejście mobile-first, czyli design od wersji mobilnej, samo wymusza priorytety w treści.
6. Lorem ipsum zamiast realnych treści
Lorem ipsum to tekst zastępczy, który zawsze pasuje do layoutu, bo design dopasowuje się do niego, a nie do realnej treści. Realny nagłówek ma 9 słów zamiast 4, opis usługi trzy akapity zamiast dwóch linii, a zdjęcia produktów są pionowe, a nie poziome.
Z praktyki: klient zaakceptował makietę strony głównej z lorem ipsum. Po wdrożeniu realne nagłówki usług nie mieściły się w kartach sekcji hero. Skończyło się tygodniem poprawek w kodzie.
Jak sprawdzić na makiecie: stosuj podejście content-first, najpierw treść, potem układ. Nagłówki powinny mieć docelową długość, opisy przybliżoną objętość. Jeśli tekstów jeszcze nie ma, wstaw treści z obecnej strony. Zarządzanie treścią zaczyna się na makiecie, nie w CMS po wdrożeniu.
7. Ignorowanie dostępności
Ignorowanie dostępności (accessibility) to design wyłącznie dla osoby z dobrym wzrokiem, myszką i szybkim internetem. Typowe objawy: za mały kontrast, za małe elementy klikalne, brak logicznej kolejności czytania, treść tylko w obrazkach.
Skutek: część użytkowników nie skorzysta ze strony wcale. Od 28 czerwca 2025 r. obowiązuje w Polsce ustawa wdrażająca Europejski Akt o Dostępności, która obejmuje m.in. e-commerce i wybrane usługi.
Jak sprawdzić na makiecie: elementy dotykowe powinny mieć minimum około 44×44 px (wytyczne Apple) lub 48×48 dp (wytyczne Google). Sprawdź strukturę nagłówków H1–H3, kolejność czytania i to, czy każda ważna informacja z grafiki ma wersję tekstową. Punktem odniesienia jest WCAG 2.2 na poziomie AA. Design z kontrastem i czytelną typografią sprawdzisz dopiero w projekcie graficznym, ale na makiecie możesz wymagać, żeby był zaplanowany.
8. Brak stanów pustych, błędów i strony 404
Brak stanów to makieta, która pokazuje tylko „szczęśliwą ścieżkę”: wyszukiwarka zawsze coś znajduje, koszyk zawsze ma produkty. W realnym serwisie użytkownik trafia na brak wyników, pusty koszyk, wolne ładowanie i nieistniejący adres.
Skutek: programista wymyśla te ekrany sam w trakcie web developmentu, więc wyglądają przypadkowo albo nie istnieją.
Jak sprawdzić na makiecie: dla każdego dynamicznego komponentu wypisz stany: domyślny, pusty, ładowanie, błąd, sukces. Zapytaj o stronę 404 i o to, dokąd prowadzi. W sklepie na WooCommerce sprawdź, co widzi użytkownik, gdy filtr nie zwraca żadnego produktu.
9. Niespójne komponenty na podstronach
Niespójność elementów designu to trzy rodzaje przycisków, różne layouty kart na różnych podstronach, inne odstępy między sekcjami. Każda podstrona projektowana osobno dryfuje w swoją stronę.
Skutek: użytkownik uczy się interfejsu (UI) od nowa na każdej podstronie, a programista koduje trzy przyciski zamiast jednego.
Jak sprawdzić na makiecie: poproś o prostą bibliotekę komponentów już na etapie wireframe: przycisk główny i drugorzędny, karta, formularz, nagłówek sekcji. Przejrzyj podstrony i policz warianty każdego elementu. W Figmie komponent tworzy się raz i wstawia wielokrotnie, więc spójny layout nie jest dodatkową pracą.
10. Ciężkie elementy zaplanowane w strukturze (wideo, karuzele, pop-upy)
Ciężkie elementy w designie to decyzje, które później psują wydajność: wideo w tle sekcji hero, karuzela z pięcioma slajdami, galeria 40 zdjęć, pop-up zaraz po wejściu. Na makiecie to prostokąty, na stronie sekundy ładowania, których nie naprawi ani lepszy hosting, ani optymalizacja kodu.
Skutek: słabe wyniki Core Web Vitals, czyli wskaźników, którymi Google mierzy działanie strony: LCP (do 2,5 s), INP (do 200 ms) i CLS (do 0,1). Karuzele mają dodatkowy problem: interakcje z drugim i kolejnymi slajdami są rzadkie.
Jak sprawdzić na makiecie: przy każdym ciężkim elemencie zapytaj, co użytkownik zyskuje i czy nie da się tego pokazać statycznym zdjęciem. Interaktywność ma sens tam, gdzie pomaga w zadaniu, a nie tam, gdzie zdobi. Karuzelę w hero zamień na jeden komunikat, pop-up przesuń do momentu, gdy użytkownik przewinie połowę strony.
11. Brak elementów budujących zaufanie
Brak elementów zaufania to struktura bez opinii klientów, logotypów, danych kontaktowych w widocznym miejscu i polityki prywatności. Użytkownik, który Cię nie zna, szuka dowodów, zanim wypełni formularz.
Skutek: dobre CTA bez społecznego dowodu (social proof) obok konwertuje słabiej.
Jak sprawdzić na makiecie: sprawdź, czy przy głównym CTA jest miejsce na opinię, ocenę albo logotypy klientów. Zobacz, czy stopka ma dane firmy, telefon i linki do polityki prywatności oraz regulaminu. Jeśli nie masz jeszcze opinii, zostaw na nie miejsce.
12. Brak miejsca na treść i SEO w strukturze
Brak myślenia o SEO (Search Engine Optimization) w strukturze to strona zbudowana z pełnoekranowych sekcji z jednym hasłem każda. Taki layout wygląda nowocześnie, ale nie ma na nim treści, którą Google mógłby zaindeksować, ani linków między podstronami.
Skutek: strona nie pojawia się w wynikach na frazy inne niż nazwa firmy albo domena. Dopisywanie treści po wdrożeniu oznacza przeprojektowanie sekcji, czyli powrót do błędu z kosztem 100.
Jak sprawdzić na makiecie: dla każdej podstrony wypisz H1 i planowane H2. Sprawdź, czy sekcje mają miejsce na 2–3 akapity tekstu. Zaplanuj linkowanie wewnętrzne w treści, nie tylko w menu. Jeśli planujesz bloga, upewnij się, że makieta wpisu w ogóle istnieje.
TL;DR: 12 błędów web designu do sprawdzenia na makiecie to: brak hierarchii treści, przeładowana nawigacja, konkurujące CTA, za długie formularze, brak responsywności, lorem ipsum, pominięta dostępność, brak stanów i strony 404, niespójne komponenty, ciężkie elementy w strukturze, brak elementów zaufania i brak miejsca na treść pod SEO. Każdy wykryjesz przed projektem graficznym, jeśli wiesz, na co patrzeć.
Jak sprawdzić makietę krok po kroku? Checklista odbioru w 10 punktach
Makietę sprawdzasz w ustalonej kolejności, od celu strony do zebrania uwag. Listę możesz skopiować i przejść punkt po punkcie przy każdej iteracji.
- Zdefiniuj cel każdej podstrony i jej główne CTA. Jedno zdanie na podstronę: „Strona oferty ma doprowadzić do wysłania zapytania o wycenę”.
- Sprawdź hierarchię testem 5 sekund. Pokaż makietę komuś z zewnątrz i zapytaj, co firma robi i co ma zrobić użytkownik.
- Przejdź ścieżki użytkownika klik po kliku. Od wejścia z Google, z reklamy i z social mediów aż do konwersji.
- Zweryfikuj nawigację i etykiety. Maksymalnie 7 pozycji w menu, jasne nazwy, kluczowe podstrony do 3 kliknięć od strony głównej.
- Sprawdź wersję mobilną. Menu, tabele, sekcje wielokolumnowe i formularze na szerokości telefonu.
- Wstaw realne treści. Docelowe nagłówki, przybliżone opisy, zdjęcia o właściwych proporcjach.
- Przejrzyj formularze i stany. Uzasadnienie każdego pola, stany pusty/błąd/sukces, ekrany pustych wyników i 404.
- Sprawdź dostępność. Rozmiar elementów klikalnych, struktura nagłówków, kolejność czytania, WCAG 2.2 AA jako punkt odniesienia.
- Zaplanuj miejsce na SEO i social proof. H1 i H2 każdej podstrony, bloki tekstu, linki wewnętrzne, opinie przy CTA.
- Zbierz uwagi w jednym dokumencie i zamknij iterację. Jedna lista z priorytetami zamiast komentarzy rozsianych po mailach.
Jakie metody i testy pomagają wyłapać błędy na makiecie?
Do sprawdzenia makiety wystarczą cztery metody, które nie wymagają budżetu na badania.
Test 5 sekund. Sprawdza hierarchię wizualną i jasność komunikatu. Trwa kilka minut, można go zrobić z kimkolwiek spoza projektu.
Walkthrough ścieżek użytkownika. Sprawdza, czy da się dojść od wejścia do konwersji bez zastanawiania. Wybierasz 3–5 scenariuszy („chcę wycenę”, „szukam cennika”) i przechodzisz je na klikalnym prototypie. Trwa od 30 minut do 2 godzin.
Heurystyki Nielsena. To 10 zasad użyteczności Jakoba Nielsena: widoczność statusu systemu, zgodność z rzeczywistością, kontrola i swoboda użytkownika, spójność i standardy, zapobieganie błędom, rozpoznawanie zamiast przypominania, elastyczność i efektywność, estetyka i minimalizm, pomoc w naprawianiu błędów oraz pomoc i dokumentacja. Przegląd heurystyczny makiety zajmuje projektantowi 2–4 godziny. Pełny opis: Nielsen Norman Group.
Testy z 5 użytkownikami. Sprawdzają realne doświadczenie użytkownika (UX, User Experience). Według badań Nielsena 5 osób wykrywa około 85% problemów użyteczności. Sesja trwa 30–45 minut i wymaga klikalnego prototypu.
Tu wiele osób popełnia ten sam błąd: odkłada testy do momentu, gdy strona jest „gotowa”. Wtedy każda uwaga to zmiana w kodzie. Test prototypu daje te same wnioski, tylko poprawki są tańsze.
Jakich narzędzi użyć do makiet i testów prototypów?
Do makiet wystarczy jedno narzędzie główne i jedno lub dwa pomocnicze.
| Narzędzie | Do czego | Poziom makiety |
| Figma | makiety, klikalne prototypy, biblioteki komponentów, komentarze klienta; obecnie standard rynkowy | mid-fi, hi-fi, prototyp |
| Sketch, Adobe XD | starsze alternatywy dla Figmy, nadal spotykane w zespołach | mid-fi, hi-fi, prototyp |
| Balsamiq | szkice o wyglądzie odręcznym, celowo „brzydkie”, żeby nikt nie oceniał wyglądu | lo-fi |
| Whimsical, Miro | szkice układów, mapy stron, flow użytkownika | lo-fi, architektura informacji |
| Maze, UsabilityHub | zdalne testy prototypów, test 5 sekund, testy pierwszego kliknięcia | prototyp |
| Stark i wtyczki do kontrastu | sprawdzanie kontrastu i symulacja wad wzroku | projekt graficzny |
| PageSpeed Insights | wydajność, dopiero po wdrożeniu | strona testowa |
Jeśli zamawiasz stronę i masz wybrać jedno, poproś wykonawcę o prototyp w Figmie z dostępem do komentowania. Uwagi zostają wtedy przy konkretnym elemencie, a nie w mailu bez kontekstu. Nie ma znaczenia, czy strona powstanie później w kodzie, w WordPressie z WooCommerce, czy w kreatorze takim jak Wix. Makieta jest wspólnym językiem klienta, projektanta i webmastera niezależnie od technologii, a dobry design zaczyna się właśnie od niej.
Czego makieta nie wykryje – i co zostaje na później?
Makieta wykrywa błędy strukturalne w designie, ale nie wizualne. Na etapie wireframe nie sprawdzisz:
- kolorów i kontrastu – ich ocena zaczyna się w projekcie graficznym, wtedy też robi się test kontrastu według WCAG,
- typografii w web designie – czy tekst jest czytelny w docelowym kroju i rozmiarze, zwłaszcza na telefonie,
- zdjęć, wizualizacji i grafik – makieta pokazuje proporcje, nie jakość i spójność materiałów,
- mikrointerakcji – animacji przycisków i reakcji formularza w czasie rzeczywistym,
- realnej wydajności – Core Web Vitals mierzy się dopiero na stronie testowej.
Projekt graficzny sprawdzasz więc pod kątem kontrastu, typografii, elementów wizualnych i zgodności layoutu z makietą. Stronę testową pod kątem wydajności, działania formularzy i wersji mobilnej na prawdziwym telefonie. Makieta zdejmuje z tych etapów błędy najdroższe do poprawienia, ale ich nie zastępuje. Dobre przykłady projektowania stron internetowych łączą wszystkie trzy etapy, a nie tylko ostatni.
FAQ – najczęstsze pytania o błędy w web designie i makiety
Co to jest makieta strony internetowej? Makieta strony internetowej (wireframe) to uproszczony schemat układu strony bez kolorów, zdjęć i docelowych fontów. Pokazuje nawigację, kolejność sekcji, miejsce na treści i przyciski. Służy do sprawdzenia struktury przed projektem graficznym i kodowaniem.
Czym różni się wireframe od prototypu? Wireframe to statyczny schemat ekranu. Prototyp to zestaw makiet połączonych klikalnymi przejściami. Prototyp jest potrzebny do testów z użytkownikami, statyczne makiety wystarczą do przeglądu hierarchii i treści.
Ile kosztuje makieta strony? Zależy od liczby podstron, poziomu szczegółowości i tego, czy obejmuje wersję mobilną i prototyp. Makieta kilku kluczowych podstron to zwykle kilka do kilkunastu godzin pracy projektanta UX, czyli ułamek kosztu profesjonalnego projektowania strony.
Czy makieta powinna zawierać realne treści? Tak, przynajmniej przybliżone. Nagłówki w docelowej długości i opisy o docelowej objętości pokazują, czy layout strony pomieści prawdziwą treść.
Ile pozycji powinno mieć menu strony? Praktyczna granica w designie nawigacji to około 7 pozycji w menu głównym. Większą liczbę podstron grupuje się w kategorie z menu rozwijanym.
Jak sprawdzić, czy strona będzie dobrze działać na telefonie, zanim powstanie? Poproś o wersję mobilną makiety dla kluczowych podstron. Najlepiej otworzyć klikalny prototyp na prawdziwym telefonie, Figma pozwala na to przez aplikację mobilną.
Czy makieta wystarczy do sprawdzenia dostępności? Nie w całości. Na makiecie sprawdzisz strukturę nagłówków, rozmiar elementów klikalnych i kolejność czytania. Kontrast i typografię sprawdzisz w projekcie graficznym, a działanie z czytnikiem ekranu na stronie testowej.
Kto powinien akceptować makietę po stronie klienta? Osoba odpowiedzialna za cel biznesowy strony, najczęściej właściciel lub marketing manager, plus ktoś, kto rozmawia z klientami na co dzień. Ta druga osoba najszybciej wychwyci, że w menu brakuje tego, o co klienci pytają.
