Wstęp

Przeglądając dostępne blogi o tematyce użyteczności, projektowaniu czy designie w polskiej sieci nie natknąłęm się na porządne przedstawienie tematu whitespace, reguł stosowania siatki czy poprawnej prostocie, która nie przechodzi w prymitywizm.

Whitespace

Nazywana też przestrzenią negatywną czy światłem jest wolnym obszarem pomiędzy elementami. W projektowaniu użytkowym, przemysłowym, brandingu marek “whitespace” jest często synonimem czegoś wyszukanego, subtelnego, z klasą. W projektowaniu stron WWW whitespace pomaga zachować równowagę pomiędzy treścią, podkreślić ważniejsze elementy. To nie jest tylko pusta przestrzeń, ma ona swoją rolę i cel, który trzeba wykorzystać. Przed rozpoczęciem dowolnego projektu widzimy pustą kartkę, czy czystą przestrzeń. Podczas rysowania na zwykłej kartce staramy się oddzielić od siebie elementy, lub też zgrupować te, które tworzą spójną całość. To samo jest przy projektowaniu stron WWW – aby pokazać, że element nie należy do innego, lub nie tworzy jedność, należy je rozdzielić. To robimy za pomocą whitespace.

Mikro i makro

“Białą” przestrzeń (od razu zaznaczę, że nie musi ona być białego koloru) dzielimy na makro i mikro. Makro jest między dużymi elementami, mikro – między mniejszymi (np. lista linków w nagłówku, pomiędzy wierszami, obrazkami itd). Poniżej przykład – na czerwono zaznaczona jest przestrzeń mikro, na niebiesko makro.

Aktywna i pasywna

Przestrzeń może być aktywna lub pasywna. Aktywną przestrzenią nazywam taką, która spełnia pożyteczną funkcję dla użytkownika. Jest nią na przykład przestrzeń mikro stosowana w artykule, rozdzielająca tytuł, datę, autora, nagłówki mniejszej ważności i akapity. Pasywna treść wypełnia kanwę i sprawia, że elementy, które na niej się znajdują są po prostu dobrze widoczne, logicznie rozróżnione. Może być ona zarówno duża (makro) jak i mała (mikro).

Przykład

Proszę przyjrzeć się poniższemu przykładowi. W pierwszym przypadku występuje tylko pasywna przestrzeń, w drugim wykorzystana została także aktywna.

Przy okazji drugiego zrzutu zahaczyłem o typografię.

Jak to stosować?

Wyrzućmy do lamusa wszystkie linie, podzielniki, pionowe kreseczki między elementami nawigacyjnym itp. Stosujmy dziewicze czystą białą przestrzeń. Tylko z głową.

Dobrym przykładem strony z mądrym whitespacem jest strona główna agencji Adv.

Zachowane zostało powiązanie logiczne pomiędzy elementami, czuć lekkość i przyjemność podczas czytania, jednocześnie strona nie jest prymitywna, lecz prosta – co oznacza dwie różne rzeczy.

Na pewno nie należy stosować białej przestrzeni, jeśli między elementami jest logiczne powiązanie, aczkolwiek nie wolno sklejać związanych ze sobą. Można pominąć whitespace jeśli między elementami strony istnieje nierozłączne powiązanie koncepcyjne (graficzne, tematyczne).

Kolejny przykład pokazuje jak należy mądrze wykorzystać whitespace, aby zachować spójność.

Temat białej przestrzeni chętnie podejmę na spotkaniu *campowym przy następnej okazji.

Crowdsourcing wkracza w dziedziny, w których o jego zastosowaniu można tylko pomarzyć. Dobry przykładem jest projekt Fontstruct – społecznościowe tworzenie krojów czcionek.

W standardowej sytuacji czcionki, które trafiają do…

Podczas projektowania (i prototypowania) produktów o przeznaczeniu internetowym często używam MS Visio (z rozszerzeniami i widgetami pod Web) i Czytaj dalej »

Simplicity, czyli prostota. Przestrzeń, porządek, czytelność, wystarczalność. To są cechy użytecznych stron WWW. Idealnie podsumowuje to cytat Antoine de Saint-Exupery:

Doskonałość osiąga się nie

…