+ 381 64 17 39 157 office@cyclopdesign.com

Whitespace, vizualna hijerarhija, kolor, tipografija, čitljivost

Prazan prostor, beli papir, whitespace…

Ova vrsta nevolje je dobro poznata svima koji su se našli u prilici da nešto pišu, da im je to pisanje uzgred i izvor prihoda, a da se rok ozbiljno primiče isticanju. Izvesna fina ironija leži u tome što je na kraju ipak pobeđujemo, skoro bez ikakvog prostora ostavljenog između reči.

Verovatno ste daleko zainteresovanji za whitespace upotrebu u web dizajnu, nego u kreativnom pisanju. Nije to ni loše, ni čudno. Ipak je web dizajn ono što nas sve zanima.

Whitespace je dobro poznata i visoko rangirana tehnika koja je poslednjih godina često primenjivan trend. Svi najatraktivniji layout-i web sajtova danas odlikuju se jedinstvenom minimalističkom estetikom, a whitespace je uvek glavni činioc svega oslonjenog na minimalizam. Otvoreno govoreći to je prazan prostor na stranici, koji nije neophodno toliko bled koliko mu ime kaže. Whitespace u stvari može biti bilo koje boje, verovatno je preciznije zvati ga negativnim prostorom, ali to ne zvuči tako dobro. A i nedostaje mu veza sa pomenutom ironijom.

U svakom slučaju upotrebljavamo ga da bismo naglasili sadržaj i privukli pažnju na najvažnije poruke na web stranici. Whitespace nam pomaže da razvijemo hijerarhiju vizuelnih elemenata na stranici. Drugim rečima, zajedno sa svim ostalim elementima dizajna kao što su boja, tipografija i slike, whitespace nam pomaže u definisanju prioriteta sadržaja stranice. Takođe pojačava čitljivost, smanjuje nered i minimalizuje prezasićenost. Čak može stvoriti utisak plemenitosti, stila i klase.

Jednostavno rečeno whitespace je ključni element u postizanju ravnoteže vašeg celokupnog dizajna.

Naravno čak iako sve ovo znate to ne znači da ćete uspešno iskoristiti prazan prostor koji okružuje sadržaj vašeg sajta. Zato uronimo u prazninu, da bismo otkrili kako na najbolji način možemo da iskoristimo whitespace tehnike, i kako da ih efikasno primenimo.

 

Poboljšanje upotrebljivosti

Pored toga što vašem sajtu daje zavidnu dozu elegantne minimalističke mistike, whitespace ima i daleko praktičniju svrhu. On pobojšava upotrebljivost. Inteligentnom primenom razmaka između paragrafa i margina možete podići razumevanje teksta od strane čitaoca za više od 20% ( izvor:  Smashing Magazine back in 2009). Svakako da postoji još mnogo zanimljivih aspekata efekata koje whitespace ima na upotrebljivost, ali prvi i najvažniji se odnosi na čitljivost.

 

Čitljivost

Kada je tekst ili sadržaj nabijen na gomilu, tesno postavljen, ili preterano nabacan, rezultat obično bude sve to zajedno, što svakako nije dobro.

prazan-prostor

Oh dear God…

Dragi Bože…

Problem nedostatka praznog prostora je u tome što to za posledicu ima preplavljujuću količinu neinteligentnog, nevidljivog, besmislenog i svakog drugog sadržaja koji nas odvraća od suštine.

Uporedimo ovaj bujični vrtlog slika i teksta sa primerom koji nam još uvek prikazuje obilje stvari koje biste možda poželeli da nabavite tokom praznika:

prazan-prostor-2

Kontrast između ova dva sajta je vrsta olakšanja. Dramatično generalizovane i namerno zapaljive izjave, a ipak svaka stavka na stranici ima dovoljno vazduha za sebe. Sve je jasno vidljivo i lako čitljivo. Slike su pravilno postavljene, dok je tekstu ostavljeno dovoljno prostora da bi bio savršeno razumljiv.

Ovi ljudi ne prave tone dolara godišnje slučajno.

Jedan od razloga koji čine ovaj dizajn toliko efektnim je intuitivna klikabilnost svih elemenata. Whitespace i ovde igra značajnu ulogu.

 

Određivanje prioriteta sadržaja

Svrha posedovanja sopstvenog delića prostora na webu je mogućnost posvećivanja tog prostora distribuciji vašeg sadržaja. Pitanje je na koji način taj prostor najefikasnije iskoristiti u smislu pokazivanja najvažnijih poruka koje želite da prenesete? Odgovor glasi: dozvolite im da se istaknu.

Zapravo protok korisnika vašeg sajta možete direktno da ukočite zagušivanjem količinom sadržaja. Očito je iz primera da web stranica bez primene whitespace-a postaje uniformno nečitljiva. Nemoguće je izdvojiti važne stvari iz gomile u kojoj sve izgleda isto. Takođe je onemogućeno i uspostavljanje hijerarhije važnosti. Ako želite da se ono što je bitno ističe onda ga morate izolovati, kao ostrvo na otvorenom moru.

Ovo će doprineti čitljivosti, kao što smo već rekli. Dodatna prednost za vaše posetioce je što će do željenog sadržaja doći lako i brzo. Na ovaj način je moguće i usmeravati pažnju korisnika sa jedne sekcije sajta na drugu. Upotreba whitespace-a u svrhu manipulacije korisničkog protoka je poznata kao active whitespace. Sve margine i razmaci upotrebljeni unutar tipografije spadaju u ono što nazivamo passive whitespace.

Efikasnim korišćenjem obe tehnike dajemo dizajnu elegantni izgled koji će ostaviti utisak na posetioce i obuhvatiti njihovu pažnju.

Osećaj prefinjenosti

Kredibilnost i kvalitet idu ruku pod ruku, tako da kada dizajn vašeg sajta koristi whitespace tehnike efikasno, njegovi posetioci povezuju ove osobine direktno sa vašim brendom. Minimalistička estetika ostavlja mašti na volju da uveća vrednost ponuđenog sadržaja. Davanjem prostora za disanje vašem sadržaju ostavljate utisak elegancije, prefinjenosti, pa možda i ozloglašenosti (ne u negativnom smislu).

Primer je ovoga puta malo prefinjeniji od Walmart-a.

prazan-prostor-3

Zar vas ne mami, ne… bolje reći primorava, da ispitate fini nakit sakriven ispod one klikabilne slike? Ukoliko je odgovor na ovo pitanje bilo šta osim krotkog da, biće da ste sačinjeni od čistog kamena. Ili vas možda samo ne zanima ženski nakit.

Pokušajte sa ovim primerom potrošačkog porno uživanja:

prazan-prostor-4

Verovatno sada želite da prekrečite stan. Ukoliko niste u Italiji, ili niste stvarno bogati, ovo vam je verovatno nedostupno. Ostaje nam da gledamo ove radove i da zavidimo.

Poenta priče je da sav ovaj negativni prostor prosto vrišti stilom, milošću i uvek spokojnom pribranošću. Uz to ovi layout-i uspevaju da ostanu lepi odakle god im pristupili, što nas dovodi do sledeće teme.

 

Whitespace i RWD

prazan-prostor-6

 

izrada-web-stranice

Stalna briga koja zadaje muke dizajnerima je kako efikasno primeniti trend ili tehniku a da sadržaj ostane responsivan. Whitespace može imati veliki uticaj na dizajn sadržaja namenjenog mobilnim uređajima, mada je često potisnut usled prostornih ograničenja nametnutih malim ekranima nekih smartphone modela. Postoji mnogo načina za efikasnu primenu RWD tehnika, ali ponekad može biti teško objasniti klijentu odluku o dodeljivanju vrednog prostora odsustvu sadržaja. U tom slučaju je korisno istaći intuitivnu komponentu koja kod uspešno primenjenog whitespace-a na mobilnom uređaju može biti i važnija nego što je to normalno.

Ovo je stoga što je mobilni viewport već prepunjen, tako da pasivni i aktivni whitespace mogu da doprinesu ogromnoj razlici u izgledu i osećaju mobilnog korisničkog interfejsa. Pasivni whitespace igra važnu ulogu u čitljivosti, a na ekranima koji teraju ljude da čkilje ovo je od velike važnosti. Slično tome, ako želite da prsti korisnika skroluju kroz celokupan sadržaj vašeg sajta, morate biti sigurni da ste im ponudili najvažnije elemente izolovano, uz jasno određene klikabilne dugmiće.

Ako mislite da pretrpan i prezasićen tekst izgleda loše na vašem monitoru, pokušajte da zamislite kako bi to izgledalo na ekranu nečega što držite u šaci.

Web dizajn je skup složenih tema. Postoji milion stvari koje možete primeniti na vašoj web stranici, i hiljade načina da to uradite. U svetu toliko ispunjenom složenošću lepo je znati da je jedno od glavnih pravila koje dizajneri koriste u svom poslu ono posvećeno jednostavnosti

Share this:

Pin It on Pinterest

Share This