Przy budowaniu strony instynkt podpowiada, by wypełniać miejsce. Dodać kolejną sekcję, kolejne wyróżnienie funkcji, kolejny wiersz tekstu. Instynkt, który daje lepsze strony, jest odwrotny: zostaw miejsce. Biała przestrzeń to nie pustka. To ona sprawia, że wszystko inne na podstronie jest czytelne, wiarygodne i łatwe do wykonania.
Biała przestrzeń (whitespace) w projekcie oznacza puste obszary między elementami podstrony i wokół nich. Obejmuje odstęp między wierszami tekstu, wypełnienie wewnątrz przycisku, przerwę między nagłówkiem a akapitem pod nim oraz marginesy wokół sekcji. Nic z tego nie jest zmarnowane. Wszystko pracuje.
Nazwa jest nieco myląca: biała przestrzeń nie musi być biała. To każdy obszar podstrony niezajęty przez treść. Ciemne tło z hojnymi odstępami między sekcjami wykorzystuje białą przestrzeń równie skutecznie jak białe tło.
Dlaczego biała przestrzeń jest ważna na stronie?
Biała przestrzeń wpływa na to, jak odwiedzający postrzegają treść i ją przetwarzają. Podstrony z hojnymi odstępami są łatwiejsze do czytania, bardziej profesjonalne i budzą większe zaufanie. Podstrony z małymi odstępami wydają się zagracone i trudniejsze w nawigacji, bez względu na to, jak dobra jest treść.
Powód poznawczy jest prosty. Gdy elementy są blisko siebie, mózg musi więcej pracować, by rozpoznać, gdzie kończy się jeden, a zaczyna drugi. Gdy elementy mają wokół siebie miejsce, wzrok przesuwa się po podstronie naturalnie, bez wysiłku. Mniej wysiłku odwiedzającego oznacza więcej uwagi na właściwą treść i wezwania do działania.
Biała przestrzeń komunikuje też pozycjonowanie marki. Marki premium i luksusowe konsekwentnie używają więcej białej przestrzeni niż marki budżetowe lub nastawione na cenę. Skojarzenie hojnych odstępów z jakością jest głęboko zakorzenione. Strona firmowa, która wygląda na zatłoczoną, nieświadomie sygnalizuje coś o marce, niezależnie od tego, co mówi tekst.
Jakie są rodzaje białej przestrzeni w projektowaniu stron?
Biała przestrzeń makro
Biała przestrzeń makro to przestrzeń w dużej skali między głównymi sekcjami podstrony. Przerwa między sekcją główną a sekcją funkcji, marginesy po obu stronach treści, miejsce między ostatnią sekcją a stopką. Biała przestrzeń makro daje podstronie ogólny oddech i decyduje o tym, jak otwarty lub gęsty wydaje się układ na pierwszy rzut oka.
Biała przestrzeń mikro
Biała przestrzeń mikro to odstępy w małej skali wewnątrz treści: odstęp między wierszami tekstu (interlinia), przerwa między etykietą a polem formularza, wypełnienie wewnątrz przycisku. Biała przestrzeń mikro decyduje o czytelności poszczególnych elementów. Akapit z ciasnymi odstępami między wierszami czyta się trudniej niż ten sam akapit z hojnymi odstępami, nawet przy identycznym rozmiarze czcionki.
Biała przestrzeń aktywna
Biała przestrzeń aktywna to miejsce umieszczone celowo, by kierować uwagę lub tworzyć nacisk. Na przykład duża ilość miejsca wokół przycisku wezwania do działania wizualnie go izoluje i sprawia, że wyróżnia się na tle otaczającej treści. To biała przestrzeń używana jako narzędzie projektowe, a nie tylko jako oddech.
Biała przestrzeń pasywna
Biała przestrzeń pasywna to naturalne miejsce wokół treści, które powstaje w wyniku układu, a nie jako celowa decyzja projektowa. Przerwa między końcem akapitu a krawędzią kolumny treści, miejsce na dole podstrony przed stopką. Jest potrzebna, ale nie strategiczna.
Ile białej przestrzeni wystarczy?
Nie ma stałej reguły, ale najczęstszym błędem jest użycie jej zbyt mało, a nie zbyt dużo. W razie wątpliwości zwiększ odstępy i zobacz, czy podstrona wygląda lepiej. Prawie zawsze tak jest.
Ilość białej przestrzeni, która działa, zależy od rodzaju treści i odbiorców. Serwis z dokumentacją dla użytkowników technicznych może być gęstszy niż strona główna skierowana do ogółu odwiedzających. Strona luksusowego produktu potrzebuje więcej oddechu niż tabela porównawcza. Właściwa ilość to taka, dzięki której treść jest najłatwiejsza do czytania, a najważniejsze elementy najłatwiejsze do zauważenia.
Praktyczny test: jeśli zmrużysz oczy na podstronę i wszystko zlewa się w jedno, białej przestrzeni jest za mało. Jeśli Twój wzrok od razu znajduje nagłówek i wezwanie do działania, gdy patrzysz na podstronę jako całość, odstępy działają. Artykuł czym jest hierarchia wizualna wyjaśnia, jak odstępy współpracują z rozmiarem, kolorem i kontrastem, by kierować wzrok odwiedzającego.
Częste błędy z białą przestrzenią na stronach firmowych
Sekcje upchnięte razem bez wizualnego oddzielenia to najczęstszy problem. Gdy sekcja główna, sekcja funkcji, opinie i wezwanie do działania zlewają się bez oddechu, odwiedzający nie wiedzą, gdzie kończy się jeden temat, a zaczyna drugi. Dodanie pionowych odstępów między sekcjami to zwykle pojedyncza zmiana, która najbardziej poprawia zagraconą stronę główną.
Ciasne odstępy między wierszami tekstu podstawowego utrudniają czytanie akapitów, zwłaszcza na telefonie, gdzie wiersze są krótsze, a wzrok musi częściej zmieniać kierunek. Odstęp między wierszami wynoszący co najmniej 1,5 rozmiaru czcionki to powszechnie stosowany standard czytelności w internecie.
Przyciski ze zbyt małym wypełnieniem wydają się małe i trudne do dotknięcia. Przycisk, który technicznie ma właściwy rozmiar, ale minimalne wypełnienie wokół tekstu, wygląda na mniejszy, niż jest, i dostaje mniej kliknięć. Hojne wypełnienie sprawia, że przyciski wydają się ważne i łatwe do użycia.
Treść biegnąca od krawędzi do krawędzi bez marginesów bocznych jest niewygodna do czytania i sprawia, że podstrona wygląda na niedokończoną. Każdy obszar treści zyskuje na stałym marginesie, który trzyma tekst z dala od krawędzi ekranu, zwłaszcza na telefonie. Artykuł jak dostosować stronę do telefonów opisuje odstępy jako część szerszego zestawu zagadnień projektowania mobilnego.
Jak biała przestrzeń wpływa na SEO?
Biała przestrzeń wpływa na SEO pośrednio, przez sygnały doświadczenia użytkownika, które tworzy. Podstrony łatwiejsze do czytania mają niższy współczynnik odrzuceń i dłuższy czas na podstronie. Te sygnały behawioralne mówią wyszukiwarkom, że podstrona dobrze służy odwiedzającym, co z czasem wpływa na pozycje.
Istotna jest też szybkość strony. Sama biała przestrzeń nie ma rozmiaru pliku, więc dodanie większych odstępów nie spowalnia podstrony. Ale decyzje projektowe, które czasem towarzyszą gęstym układom, czyli duże obrazy ułożone blisko siebie, ciężkie animacje między sekcjami i nadmiar treści, mogą wpływać na czas ładowania. Czystszy, bardziej przestronny układ często idzie w parze z szybszym. Artykuł czym jest SEO opisuje, jak doświadczenie użytkownika i wydajność techniczna łączą się z pozycjami w wyszukiwarce.
Jak WEMASY podchodzi do białej przestrzeni
Szablony w kreatorze stron WEMASY mają spójne domyślne odstępy, które tworzą czytelny, profesjonalny układ bez ręcznej konfiguracji. Wypełnienie sekcji, interlinia i odstępy między elementami są ustawione na wartości, które działają na różnych urządzeniach. Edytor wizualny pozwala dostosować odstępy w poszczególnych sekcjach, gdy ustawienie domyślne nie pasuje do treści, dając kontrolę bez konieczności zaczynania od zera.
Zobacz, co jest w zestawie, na stronie kreatora stron WEMASY albo sprawdź plany na stronie z cennikiem.
Najczęściej zadawane pytania
Czy więcej białej przestrzeni oznacza mniej treści?
Niekoniecznie. Biała przestrzeń dotyczy odstępów między elementami i wokół nich, a nie usuwania treści. Możesz mieć podstronę bogatą w treść, która nadal skutecznie używa białej przestrzeni: wyraźnie grupuje powiązane treści, daje sekcjom oddech i nie próbuje pokazać wszystkiego naraz. Przekonanie, że dodanie białej przestrzeni oznacza usunięcie treści, to jeden z powodów, dla których strony firmowe bywają zbyt gęste. Więcej białej przestrzeni zwykle oznacza lepiej uporządkowaną treść, a nie jej mniej. W kreatorze stron WEMASY możesz to ustawić bezpośrednio na swojej stronie.
Czy biała przestrzeń jest ważna na telefonie?
Tak, i wręcz bardziej niż na komputerze. Na małym ekranie zbyt gęsta treść jest trudniejsza do czytania i trudniejsza do dokładnego dotknięcia. Obszary dotyku potrzebują wokół siebie odstępów, by działały niezawodnie. Interlinia musi być hojna, by krótkie, zawinięte wiersze tekstu pozostały czytelne. Mniejsza szerokość ekranu na telefonie sprawia, że każda decyzja o odstępach wpływa na doświadczenie bardziej bezpośrednio niż na szerokim układzie na komputerze. Przed publikacją sprawdź wszystkie odstępy na prawdziwym telefonie.
Czy biała przestrzeń może spowolnić moją stronę?
Nie. Biała przestrzeń to odstępy w CSS, które nie mają istotnego rozmiaru pliku. Dodanie większego wypełnienia, marginesu lub interlinii nie wydłuża czasu ładowania. Na czas ładowania może wpływać treść wypełniająca przestrzeń: duże obrazy, osadzone wideo, ciężkie skrypty. Przestronny układ ze zoptymalizowaną treścią ładuje się tak samo szybko jak gęsty z tą samą treścią i zwykle znacznie przyjemniej się z niego korzysta.
Skąd wiem, że moja strona ma za mało białej przestrzeni?
Najwyraźniejszy znak to wrażenie, że podstrona jest zatłoczona lub trudna do czytania, gdy patrzysz na nią jako całość. Konkretne wskaźniki to tekst biegnący blisko krawędzi ekranu, sekcje zlewające się wizualnie bez wyraźnej przerwy, przyciski, które wyglądają na małe, choć technicznie są wystarczająco duże, i akapity, które męczą w czytaniu. Pokazanie podstrony komuś, kto jej wcześniej nie widział, i obserwowanie, gdzie najpierw trafia jego wzrok, to jeden z najpewniejszych sposobów wykrycia problemów z białą przestrzenią, bo znajomość treści może uczynić gęstość niewidoczną dla projektanta.
Czym różni się wypełnienie (padding) od marginesu w projektowaniu stron?
Wypełnienie (padding) to przestrzeń wewnątrz elementu, między jego treścią a obramowaniem. Margines to przestrzeń na zewnątrz elementu, między nim a otaczającymi go elementami. W praktyce oba wpływają na białą przestrzeń. Wypełnienie wewnątrz przycisku decyduje o tym, ile miejsca otacza tekst przycisku. Margines pod nagłówkiem decyduje o tym, jak blisko znajduje się następny akapit. Obie właściwości są ustawiane tak, by stworzyć odstępy, które sprawiają, że podstrona jest czytelna i dobrze uporządkowana.