Wstęp

Przeglą­da­jąc dostępne blogi o tem­atyce użyteczności, pro­jek­towa­niu czy desig­nie w pol­skiej sieci nie natknąłęm się na porządne przed­staw­ie­nie tem­atu white­space, reguł stosowa­nia siatki czy poprawnej pros­to­cie, która nie prze­chodzi w prymitywizm.

White­space

Nazy­wana też przestrzenią negaty­wną czy światłem jest wol­nym obszarem pomiędzy ele­men­tami. W pro­jek­towa­niu użytkowym, prze­mysłowym, brandingu marek “white­space” jest często syn­on­imem czegoś wyszukanego, sub­tel­nego, z klasą. W pro­jek­towa­niu stron WWW white­space pomaga zachować równowagę pomiędzy treś­cią, pod­kreślić ważniejsze ele­menty. To nie jest tylko pusta przestrzeń, ma ona swoją rolę i cel, który trzeba wyko­rzys­tać. Przed rozpoczę­ciem dowol­nego pro­jektu widz­imy pustą kartkę, czy czystą przestrzeń. Pod­czas rysowa­nia na zwykłej kartce staramy się odd­zielić od siebie ele­menty, lub też zgrupować te, które tworzą spójną całość. To samo jest przy pro­jek­towa­niu stron WWW — aby pokazać, że ele­ment nie należy do innego, lub nie tworzy jed­ność, należy je rozdzielić. To robimy za pomocą whitespace.

Mikro i makro

“Białą” przestrzeń (od razu zaz­naczę, że nie musi ona być białego koloru) dzie­limy na makro i mikro. Makro jest między dużymi ele­men­tami, mikro — między mniejszymi (np. lista linków w nagłówku, pomiędzy wier­szami, obrazkami itd). Poniżej przykład — na czer­wono zaz­nac­zona jest przestrzeń mikro, na niebiesko makro.

Akty­wna i pasywna

Przestrzeń może być akty­wna lub pasy­wna. Akty­wną przestrzenią nazy­wam taką, która speł­nia pożyteczną funkcję dla użytkown­ika. Jest nią na przykład przestrzeń mikro stosowana w artykule, rozdziela­jąca tytuł, datę, autora, nagłówki mniejszej ważności i akapity. Pasy­wna treść wypeł­nia kanwę i sprawia, że ele­menty, które na niej się zna­j­dują są po prostu dobrze widoczne, log­icznie rozróżnione. Może być ona zarówno duża (makro) jak i mała (mikro).

Przykład

Proszę przyjrzeć się poniższemu przykład­owi. W pier­wszym przy­padku wys­tępuje tylko pasy­wna przestrzeń, w drugim wyko­rzys­tana została także aktywna.

Przy okazji drugiego zrzutu zahaczyłem o typografię.

Jak to stosować?

Wyrzućmy do lamusa wszys­tkie linie, podziel­niki, pio­nowe kreseczki między ele­men­tami naw­iga­cyjnym itp. Sto­su­jmy dziewicze czystą białą przestrzeń. Tylko z głową.

Dobrym przykła­dem strony z mądrym white­spacem jest strona główna agencji Adv.

Zachowane zostało pow­iązanie log­iczne pomiędzy ele­men­tami, czuć lekkość i przy­jem­ność pod­czas czy­ta­nia, jed­nocześnie strona nie jest prymi­ty­wna, lecz prosta — co oznacza dwie różne rzeczy.

Na pewno nie należy stosować białej przestrzeni, jeśli między ele­men­tami jest log­iczne pow­iązanie, aczkol­wiek nie wolno skle­jać związanych ze sobą. Można pom­inąć white­space jeśli między ele­men­tami strony ist­nieje nierozłączne pow­iązanie kon­cep­cyjne (graficzne, tematyczne).

Kole­jny przykład pokazuje jak należy mądrze wyko­rzys­tać white­space, aby zachować spójność.

Temat białej przestrzeni chęt­nie pode­jmę na spotka­niu *cam­powym przy następ­nej okazji.