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.

Crowd­sourc­ing wkracza w dziedziny, w których o jego zas­tosowa­niu można tylko pomarzyć. Dobry przykła­dem jest pro­jekt Fontstruct — społecznoś­ciowe tworze­nie kro­jów czcionek.

W stan­dar­d­owej sytu­acji czcionki, które trafi­ają do mediowych domów czcionek, tworzą spec­jal­iści, których dzieła ofer­owane są w cenie śred­nio po 20–40$ od licencji. W sytu­acji, gdy zaj­mują się tym wybitni liter­nicy (np tacy jak Łukasz Dziedzic w Czy­taj dalej »

Pod­czas pro­jek­towa­nia (i pro­to­ty­powa­nia) pro­duk­tów o przez­nacze­niu inter­ne­towym często uży­wam MS Visio (z rozsz­erzeni­ami i wid­getami pod Web) i Free­Mind. O ile Free­Mind, który jest dostępny w wer­sji jar do uru­chomienia na plat­formie Java, o tyle o dobrą aplikację typu MS Visio pod Linux-em nie jest łatwo.

Pytany kilka razy, w końcu natknąłęm się na Dia — GNOME… Czy­taj dalej »

Sim­plic­ity, czyli pros­tota. Przestrzeń, porządek, czytel­ność, wystar­czal­ność. To są cechy użytecznych stron WWW. Ide­al­nie pod­sumowuje to cytat Antoine de Saint-Exupery:

Doskon­ałość osiąga się nie wtedy, kiedy nie można już nic dodać, ale kiedy nie można nic ująć.

Tutaj skończę, by w następ­nych postach opowiedzieć:

• Czym jest Web typografi(k)a i dlaczego jest ważna?
• Jak należy poprawnie stosować białą przestrzeń czyli tzw.

… Czy­taj dalej »

Natknąłem się na nieco komiczną inter­pre­tację o gru­pach docelowych produktu.

Przekłada­jąc na usabil­ity — tylko wiedza o użytkown­ikach koń­cowych, ich potrze­bach, przyzwycza­je­ni­ach, zain­tere­sowa­ni­ach, doświad­cze­niu itp. poz­woli stworzyć nam dobry pro­dukt, czy to ma być reklama, czy strona WWW czy automat parkingowy

Długo oczeki­wany update PageR­ank stał się rzeczy­wis­toś­cia. W przeszły week­end Google przeszedł się po stronkach i zwery­fikował, pod­niósł i obniżył wskaźnik PR (oso­biś­cie wciąż uważam, że ma on walory korzystne dla SEO). Blog WebQuatro.pl z 0 wskoczył na PR=4, co jest miłą niespodzianką (swoją drogą dowiedzi­ałem się… Czy­taj dalej »

Słowo wstępu

Pisząc o coworkingu mam na myśli współpracę za pomocą wszel­kich wirtu­al­nych narzędzi. Nie poj­muję tego jako spotkanie w kaw­iarni z łączem WiFi, lecz sposób na stworze­nie teamu z prawdzi­wego zdarzenia, biorąc pod uwagę ograniczenia wynika­jące z odległości, różnic stref cza­sowych, obyczajów.

Dobrze, kiedy mamy możli­wość zarządzać i pra­cować z ludźmi na miejscu, w biurze, w określonych godz­i­nach, wiedzieć,… Czy­taj dalej »

21–23 października, w Wiśle, w podob­nej for­mule jak w zeszłym roku, odbędą się XXIV Jesi­enne Spotka­nia PTI. Sesje tem­aty­czne zostaną utwor­zone w połowie przez Uczest­ników, których tem­aty zostaną obrane w drodze głosowa­nia. Cytu­jąc istotne punkty tego zgłaszania:

1) Podob­nie jak w zeszłym roku zwycięzca plebis­cytu otrzyma lap­top w nagrodę za najlep­szą propozycję.

2) Jedna z osób, które zarejestrowały

… Czy­taj dalej »