Projektowanie layoutu strony internetowej — zasady, które zawsze działają
F-pattern, siatka 8px, hierarchia wizualna. Zasady, które sprawiają, że strony internetowe są intuicyjne i estetyczne.
Dobry layout strony internetowej jest niewidzialny — użytkownik nie myśli "jaki ładny układ", po prostu sprawnie znajduje to, czego szuka. Zły layout jest jak sklep z towarami porozkładanymi losowo — można znaleźć wszystko, ale przy okazji wycierpimy. Projektowanie layoutu to inżynieria percepcji.
Siatka — fundament każdego layoutu
Siatka (grid) to niewidoczna struktura definiująca szerokości kolumn, rynny między nimi i marginesy. Standardem w web designie jest siatka 12-kolumnowa z maksymalną szerokością kontenera 1440px. Siatka 8px (wszystkie elementy są wielokrotnościami 8px) zapewnia matematyczną spójność i harmonię proporcji. Elementy "przyklejone" do siatki wyglądają schludnie; elementy poza siatką — chaotycznie.
Hierarchia wizualna — co oko widzi pierwsze
- Rozmiar — większy element przyciąga wzrok jako pierwszy
- Kontrast — ciemne na jasnym lub odwrotnie wyróżnia się z tła
- Kolor — nasycone kolory przykuwają uwagę przed stonowanymi
- Pozycja — górna część strony i lewą stronę użytkownicy skanują pierwsze
- Pusta przestrzeń — element otoczony białą przestrzenią wydaje się ważniejszy
- Ruch — animacje i elementy dynamiczne przyciągają wzrok niemal zawsze
F-pattern i Z-pattern — jak użytkownicy czytają strony
Badania eye-trackingowe pokazują, że użytkownicy skanują strony w kształcie litery F lub Z — nie czytają każdego słowa. Wzrok przebiega po nagłówku poziomo, potem niżej po następnym nagłówku, a potem w dół po lewej krawędzi. Dlatego najważniejsze informacje powinny być w nagłówkach i na początku akapitów — nie zakopane w środku. Dlatego CTA (przycisk akcji) powinien być widoczny "above the fold".
Białe przestrzenie — nie bój się pustki
Jednym z najczęstszych błędów klientów zamawiających strony jest chęć "wypełnienia" każdego centymetra treścią. Tymczasem puste przestrzenie (negative space) są aktywnym elementem projektu: grupują powiązane elementy, oddzielają sekcje, dają oczom odpoczynek i sprawiają, że ważne elementy "oddychają". Mniej to więcej — nie tylko w projektowaniu graficznym.
Mobile first — projektowanie od najmniejszego ekranu
Ponad 60% ruchu w internecie pochodzi z urządzeń mobilnych. Projektowanie "mobile first" oznacza, że zaczynam od layoutu 375px (iPhone 14) i stopniowo rozszerzam do tabletów i desktopów — zamiast tworzyć desktop i "obcinać" do mobile. To zmiana filozofii: zamiast pytać "co usunąć na mobile?", pytasz "co absolutnie musi być widoczne na ekranie 375px?".
