fbpx

Biała przestrzeń (white space) – na co i po co to komu ?

[ 30 kwietnia 2019 ]

Co jest biała przestrzeń?

Termin biała przestrzeń wywodzi się ze sztuki tradycyjnej i oznacza dokładnie “przestrzeń negatywną”.

Właściwie biała przestrzeń nie musi być wcale kolorze białym – każdy rodzaj pustej przestrzeni, może być nazywany w ten sposób. Dlatego niech nie zmylą Was pojęcia, które można stosować zamiennie:  biała przestrzeń, white space czy też przestrzeń negatywna. Tak naprawdę nie mają one związku z faktycznym kolorem białym. Oznaczenie to odnosi się do obszarów w projekcie, na których nie znajdują się inne elementy np. tekst czy grafika. Biała przestrzeń może być czarna, biała, różowa, zielona, może mieć teksturę i wzorki. Stanowo ona tło projektu. Białą przestrzeń znajdziesz między poszczególnymi elementami projektu czyli teksty i grafika ale również między akapitami czy jako odstępy między literami.

Biała przestrzeń jest bardzo ważnym punktem projektu, podobnie jak wszystkie inne elementy: zdjęcia, fonty, grafiki. Często projektanci muszą tłumaczyć swoim klientom, że puste miejsce w projekcie nie oznacza braku pomysłu i jest ono potrzebne. Niedoświadczeni graficy oraz klienci, którzy nie znają zasad designu bardzo często chcą wykorzystać każdy skrawek na projekcie i wypełnić każde jego miejsce. Niestety taki projekt nigdy nie będzie udany.

Kiedy widzisz dużo białej przestrzeni w projekcie, to nie dlatego, że projektant nie wiedział, co tam umieścić. To wolne miejsce zostało stworzone celowo, by podkreślić inne elementy projektu lub zachować minimalizm.

 

Biała przestrzeń pomaga w:

  • szybszym zrozumienie projektu
  • zwiększeniu czytelności
  • tworzeniu nastroju projektu
  • podniesieniu estetyki

 

Podobnie jak w przypadku sztuki tradycyjnej, obiekty w cyfrowych projektach wymagają negatywnej przestrzeni – grafiki, tekst, przyciski, logo oraz inne obiekty potrzebują miejsca na oddech. Wszystkie dobre projekty zawierają odpowiednią ilość wolnego miejsca między elementami oraz między bocznymi , dolnymi i górnymi marginesami.  White space to:

  • Marginesy boczne, górne i dolne
  • Przestrzeń wokół grafik i tekstów
  • Odstępy między wierszami i odstępy między literami w treści tekstu, odstęp między kolumnami

 

 

 

Dlaczego biała przestrzeń jest tak ważna?

Projektanci używają białej przestrzeni jako integralnej części swojego projektu z ważnych powodów. Dobrze wykorzystana wpływa na to czy projekt będzie dobrze zrozumiany, czytelny i estetyczny. Biała przestrzeń zwiększa nie tylko kwestie wyglądu strony, aplikacji czy interfejsu użytkownika (User Interface), ale także wpływa na pozytywne interakcje użytkownika z projektem (User Experience).  Przyjrzyjmy się kolejnym ważnym czynnikom, do których na pewno należą:

 

 

Lepsze zrozumienie

Równomierne wykorzystanie białej przestrzeni sprawia, że ​​treść projektu jest łatwo “skanowalna” wzrokiem i znacznie poprawia się jej czytelność. Przeprowadzone badania wskazują, że właściwe użycie białej przestrzeni między wierszami akapitów oraz marginesami pozwala zwiększyć zrozumienie tekstu do 20%. Takie małe przestrzenie między literami, akapitami lub między elementami menu są również nazywane jako Micro White Spaces. Taka mikro przestrzeń powinna sprawić, że zarówno pobieżne skanowanie, jak i czytanie tekstu będzie łatwiejsze i bardziej przewidywalne.

Ważne rzeczy, o których należy pamiętać podczas optymalizacji treści tekstowej, to odpowiednie marginesy akapity i odstępy między wierszami. Odstępy między wierszami mogą znacznie poprawić czytelność tekstu. Ogólnie rzecz biorąc, im większy odstęp, tym lepsze będzie odczucie użytkownika podczas czytania, chociaż zbyt duży może sprawić, że czytelnik przestanie czytać ze zrozumieniem. Dlatego tak ważne jest znalezienie idealnej równowagi.

 

 

 Przyciągnięcie uwagi

Kolejny typ to makro przestrzeń czyli wolne miejsce między większymi elementami jak tekst, zdjęcia, grafika. Ten typ wolnego obszaru pomaga w prowadzeniu użytkowników przez projekt i nadaje priorytet wybranemu obszarowi, przyciągając skupienie. Na pewno nie raz widzieliście projekt strony, ulotki czy plakatu gdzie było tyle różnych elementów, że nie wiadomo gdzie skupić wzrok. Im więcej elementów w projekcie i mniej zachowanej wolnej, pustej przestrzeni, tym gorszy jest jego odbiór. Niestety mimo czasów gdzie modny jest minimalizm wciąż wiele stron, aplikacji oraz reklam cierpi z powodu zbyt dużego natłoku informacji bez zachowania wystarczającej ilości wolnego miejsca dookoła.

Analogicznie, jeśli zaśmiecanie projektu zbyt wieloma informacjami odwraca uwagę, to zmniejszenie bałaganu poprawi jego zrozumienie. Odbiorca będzie wiedział na czym ma skupić największą uwagę, ponieważ najważniejszy element będzie widoczny od samego początku.

 


 

 

Zwiększona szybkość interakcji

Zgodnie z badaniami, średni czas skupienia uwagi internauty na stronie wynosi około 6 sekund. Tyle czasu użytkownik jest w stanie poświęcić na przeskanowanie strony internetowej. Jeśli w tym czasie nie znajdzie tam ważnych dla siebie wiadomości, z pewnością opuści witrynę.  Efektywne wykorzystanie białej przestrzeni na stronie pomaga szybko przekazać użytkownikowi najważniejsze informacje i zwiększa prawdopodobieństwo interakcji. Przykładem może być przycisk interakcji np. pobierz lub złóż zamówienie. Jeśli będzie on otoczony wieloma innymi informacjami, grafikami, zdjęciami, czy zbędnym tekstem to spada prawdopodobieństwo, że internauta w niego kliknie.  Spójrz na stronę główną giganta czyli wyszukiwarkę Google. Użycie negatywnej przestrzeni jest bardzo widoczne i wyraźnie informuje o celu tej strony; Szukaj!

 

 

 

Poprowadź użytkownika przez logiczne grupowanie

W świecie wizualnego chaosu jednym z aspektów wykorzystywanych przez nasz umysł do organizowania informacji wizualnych jest tzw. prawo bliskości. Okazuje się, że nasz umysł postrzega obiekty blisko siebie jako podobne i tworzące całość.

Wykorzystują to graficy jako jedną z zasad projektowania, ustawiając podobne elementy blisko siebie, tak by tworzyły zwartą grupę. Biała przestrzeń pomaga użytkownikom w logicznym zrozumieniu przedstawionych im informacji. Wielkość odstępów między elementami projektu, tworzy spójną grupę. W kontekście stron, aplikacji czy reklam oznacza to, że obiekty znajdujące się w pobliżu postrzegane są jako spójna „jednostka”. Na przykład, w kontekście formularzy internetowych, dobrze jest umieścić etykiety opisowe blisko odpowiednich pól, aby utworzyć pojedynczą jednostkę.

Biała przestrzeń dostarcza wskazówek co do tego, jakie elementy należą do której grupy. Pomaga również oddzielić elementy indywidualne od grup. Podczas grupowania elementów, projektanci wykorzystują zarówno makro i mikro przestrzeń. Makro przestrzeń służy do oddzielania z osobna grup, natomiast mikro przestrzeń do oddzielenia elementów w tej samej grupie.

 

 

 

Uspokaja

Dobry projekt cechuje przede wszystkim jasny i czytelny komunikat. Jeśli oko czytelnika będzie przeskakiwać z jednego elementu na drugi szukając punktu zaczepienia, to mózg po krótkiej chwili zrezygnuje z szukania w projekcie tego co jest w nim naprawdę ważne. Pusta przestrzeń pozwala odetchnąć oczom i dać chwilę wytchnienia podczas skanowania wzrokiem poszczególnych elementów. Uspokaja i pomaga odpocząć w zalewie przytłaczających informacji.

 

 

 

Przykłady white space w różnych mediach

A teraz prześledźmy z kilka przykładów gdzie dobrze wykorzystano pojęcie white space.

 

 

Biała przestrzeń w projektowaniu stron internetowych

Biała przestrzeń jest niezwykle pomocna w tworzeniu stron internetowych, gdyż może pomóc programistom i projektantom stworzyć proste w obsłudze strony. Biała przestrzeń pozwala użytkownikowi na łatwe i szybkie skanowanie oraz zrozumienie nawigacji po stronie. Jest to bardzo ważne ponieważ w dzisiejszych czasach ludzie nie czytają treści. Skanują obrazy oraz nagłówki artykułów i dopiero gdy uznają, że wyglądają one na wartościowe, wgłębiają się w lekturę strony.

Dzisiaj strony internetowe cechuje minimalizm, który uzyskujemy przede wszystkim wolną przestrzenią, w przeciwieństwie do projektów 10 czy 15 lat temu, kiedy na stronie było dosłownie wszystko. Począwszy od liczników, księgę  gości, widżety pogodę, kursy walut po wszędobylskie bannery. Trend minimalizmu nabrał jeszcze większego znaczenia za sprawą tzw. landig page czyli pojedynczych stron, które mają zazwyczaj za cel nakłonienie do podjęcia określonego działania jak rejestracja, wypełnienie formularza, pobranie ebooka czy zakup produktu. Dlatego strony docelowe muszą być proste i prowadzić użytkownika do jasno określonego celu.

 

 

 

 

Biała przestrzeń w reklamach

Znów warto zagłębić się w dawne lata, by zobaczyć jak zmieniło się projektowanie. Zobaczcie sobie projekty reklam, bannerów, ulotek z lat 90. Projektanci stali przed nie lada wyzwaniem, ponieważ zleceniodawcy chcieli w projektach ująć wszystko na temat firmy. Dzisiaj reklamy to głównie przekonywujący slogan reklamowy, czasem logo oraz hasło wzywające do działania.

IKEA jest przykładem firmy, która idealnie wykorzystuje wolną przestrzeń w swoich materiałach graficznych. Można porównać je do produkowanych przez firmę mebli, które są minimalistyczne. Biała przestrzeń zyskała dużą popularność w ostatnim czasie i co raz więcej marek widzi potencjał prostoty i nie zaśmiecania swoich projektów.

 

 

 

 

Biała przestrzeń w wizytówkach

W przypadku wizytówek, biała przestrzeń pozwala pokazać kogoś jako eksperta w swojej dziedzinie. Umieszczenie na wizytówce tylko najważniejszych informacji kreuje firmę na pewną siebie, godną zaufania. Wizytówka bez zbędnych rozpraszaczy nie krzyczy do klienta: hej, zobacz jaki jestem super, jaką mam super ofertę. A sprawdź jeszcze to ! Pamiętaj, że projektując wizytówkę posługiwanie się wolną przestrzenią jest bardzo ważne, wszak masz mało miejsca na dodatkowe elementy. Wolna przestrzeń zestawiona z odpowiednimi barwami pozwala pokazać, że oferowane produkty są najwyższej jakości, czasem luksusowe.

 

 

 

 

Biała przestrzeń w billboardach

Ponieważ są one ogromne, billboardy oferują doskonałą okazję do umieszczenia wielu elementów. Jednak to tylko złudzenie, ponieważ tak jak w innych projektach zaśmiecanie powierzchni billboardów sprawi, że nie będzie on czytelny. Pamiętaj, że billboardy często czytane są w ułamku sekund przez Twoich klientów, którzy akurat jadą samochodem, tramwajem, pociągiem. Zastosowanie białej przestrzeni pozwoli na ekspresowe przeskanowanie całego projektu. Nie wypisuj tam wszystkich zalet i cech reklamowanego produktu. Wystarczy slogan reklamowy oraz przyciągające uwagę zdjęcie. Na poniższym zdjęciu McDonalds za pomocą reklamy oraz fragmentu swojego logo pokazał drogę do najbliższej restauracji.

 

 

 

 

Biała przestrzeń na opakowaniach

Dobre opakowanie powinno mieć moc zachęcenia kogoś do zakupu produktu. W tym temacie jednak pojęcie wolnej przestrzeni nadal kuleje. Być może spowodowane jest to wymogami, które musi spełniać takie opakowanie. Wiadomo, że musi znaleźć się na nim skład, opis, producent i wiele innych rzeczy. Jednak jeśli ograniczysz elementy i zastosujesz białą przestrzeń Twoje opakowanie może sugerować, że klient ma do czynienia z produktem premium o bardzo wysokiej jakości. Jeśli dopełnisz to odpowiednio dobranym fontem oraz grafiką to uzyskasz nowoczesny, elegancki styl.

 

 

 

Biała przestrzeń realnie

Wybrałem poniższy przykład, aby zilustrować jak white space może pomagać w realnym życiu. Nie tylko przykuwa uwagę na logo, ale również oddaje atmosferę elegancji i wysokiej jakości tego miejsca/

Jak widać, biała przestrzeń może być stosowana we wszystkich aspektach życia. Począwszy od projektowania graficznego po urządzanie mieszkania. Pozwala przyciągnąć uwagę na dany element i sprawia, że można go szybko zrozumieć. Często przez umiejętnie zastosowanie pustej przestrzeni można uzyskać luksusowy i nowoczesny wygląd. Biorąc pod uwagę wzrost zalewających nas informacji w ostatnich latach, biała przestrzeń staje się elementem ważniejszym niż kiedykolwiek.