Podstawy projektowania: white space, marginesy

Podstawy projektowania: white space, marginesy

Pamiętam, że kiedy stawiałam swoje pierwsze kroki w grafice, miałam tendencję do przesadyzmu. Na każdej, choćby najmniejszej powierzchni próbowałam wepchnąć „coś”. Czy zdjęcie, ilustrację, gifa, tekst, ozdobnik czy inny pierdolnik. Żeby było, a właściwie żeby nie było – czego spytacie? No pustego miejsca… Dlatego dzisiaj opowiem Wam o pewnym bardzo ważnym zagadnieniu – tak zwanym white space, roli przestrzeni i marginesów w naszych projektach. No to zaczynamy!

Czym jest white space w projektowaniu

Czym jest tytułowy „white space”? No to nic innego jak pusta przestrzeń. I niech nie zwiedzie Was słówko „white” w nazwie, bo „white space” zastosować można również tam, gdzie znajdziemy inne barwy, a także wszelkiej maści tekstury i wzorki. Jak widzicie nie do końca musi być też taka pusta.

white space nie musi być biały

Mówimy o niej w kontekście całej kompozycji, ale także poszczególnych elementów – linii między wierszami w tekście albo całymi akapitami, odległościami między wpisami blogowymi albo zdjęciami w galerii czy poszczególnymi sekcjami na stronie internetowej.

Jeżeli nie stosowalibyśmy zabiegów związanych z budowaniem przestrzeni, nasze projekty stałyby się chaotyczne i bardzo ciężkie w odbiorze.

Marnowanie miejsca w projekcie?

Pracując dla różnych klientów, prawdopodobnie kiedyś traficie na komentarz, o marnowaniu miejsca, o tym, że jest za dużo pustego miejsca i żeby to wszystko jakoś razem upchnąć. I o ile na stronie internetowej nie ma to większego sensu, tak w druku będzie już o wiele trudniej dyskutować z takim argumentem. Zwłaszcza, kiedy stosowanie przestrzeni wpływa na wydłużenie publikacji, a w efekcie zwiększenie liczby stron (a to równa się wyższe koszty). Warto jednak rozmawiać z klientem i tłumaczyć, że ok, może wydrukujemy dwie strony mniej, ale kosztem nie tyle co estetyki, a użyteczności i komfortu czytelnika. Jak to? A tak to, bo przestrzeń to nie tylko kwestia tego czy jest ładniej.

white space w grafice

No to zastanówmy się jeszcze co taka przestrzeń projektowi może dać.

Chwila odpoczynku dla naszych oczu

Przestrzeń pomiędzy elementami działa trochę jak pauza. Sprawia, że użytkownik na chwilę się zatrzymuje i dopiero po chwili zaczyna analizować kolejne treści. Bez niej, nasz wzrok będzie miotał się od elementu do elementu, a tym samym sprawi, że nie będziemy mogli skupić uwagi na jednej rzeczy. To taki odpoczynek dla oczu i naszego mózgu, który jest przeciążony zbyt dużą ilością informacji na raz.

Skupienie uwagi na najważniejszych elementach

Warto zadbać o to, by od początku użytkownik wchodząc na stronę, zrozumiał co jest na niej najważniejsze i na co zwrócić uwagę. A co się do tego świetnie nadaje? Właśnie stosowanie przestrzeni! Patrzcie co zrobiło Google ze swoją wyszukiwarką – cała masa zmarnowanego miejsca, które przecież można by wykorzystać na reklamy chociażby (ha).

skupienie uwagi czytelnika

Tymczasem mamy tylko pole wyszukiwania i wchodząc na stronę automatycznie widzimy tylko to (mimo, że to nie jedyny element na stronie). W ten sposób możemy wyróżniać ważne przyciski czy najważniejsze informacje i kierować wzrokiem użytkownika po tych elementach, na których zależy nam najbardziej.

Grupowanie informacji

Marginesy to również sposób na wydzielanie i grupowanie połączonych ze sobą informacji. Jeżeli zerkaliście kiedyś na mój wpis o psychologii Gestalt (ten tutaj: www.zebza.net/gestalt-projektowanie) to opisywałam tam Zasadę bliskości. Zasada mówi, że elementy ułożone blisko siebie będą odczytywane jako jedna grupa.

grupowanie informacji

Dlatego margines między zdjęciem, a jego opisem zrobimy na przykład mniejszy, niż między kolejnym opisem, który dotyczy już czegoś innego. Nawigację na stronie poukładany obok siebie żeby użytkownik zrozumiał, że ten zbiór elementów ma wspólne cechy i będzie działać podobnie.

Podsumowując

Przestrzeń jest mocnym narzędziem w rękach projektanta, dlatego warto zwracać na nią uwagę od pierwszych projektów, które tworzycie. Nie zostawiajcie sobie ustawiania marginesów na sam koniec – pracujcie z przestrzenią w ten sam sposób, w jaki pracujecie ze skalowaniem elementów, nadawaniem im barw i ustawianiem względem siebie. Odległości – marginesy i stosunek pustej przestrzeni do contentu może być jak najbardziej elementem brandingu.

Pamiętajcie przy tym, by nie przesadzić – w budowaniu przestrzeni nie chodzi o to by dodać jak najwięcej pustego miejsca. Jeżeli damy zbyt dużo przestrzeni, projekt faktycznie może wydawać się pusty i nieskończony. Z kolei jeżeli zaoszczędzimy na miejscu, wkradnie się chaos i brak oddechu. Szukajmy więc balansu i harmonii w naszych projektach, a na pewno będą coraz lepsze.

Film na kanale o white space