Bijeli prostor

Bijeli prostor je prazan prostor oko teksta, slika i dugmadi na stranici ili letku, koji odvaja dijelove jedan od drugog i daje oku mjesto da se odmori.

Ime zbunjuje. Pozadina može biti tamnoplava ili bež, a prostor se i dalje zove bijeli, jer je riječ o praznini, a ne o boji. Na engleskom se kaže white space, i dizajneri kod nas najčešće koriste baš taj izraz.

Zašto praznina nešto radi

Oko ne čita stranicu redom. Prvo je preleti i traži nešto za šta će se uhvatiti: naslov, cijenu, sliku, dugme. Ako je sve jednako gusto, nema za šta, pa čovjek ode.

Praznina je ono što pravi grupe. Dvije stvari blizu jedna drugoj oko čita kao cjelinu, a dvije stvari s prostorom između kao odvojene. Zato razmak radi posao koji bi inače radile linije, okviri i boje, i radi ga tiše.

Uz to, praznina određuje šta je važno. Naslov koji ima prostora iznad i ispod izgleda važnije od istog naslova stisnutog između dva pasusa. To je temelj vizuelne hijerarhije, i često jeftiniji alat od veće boje ili većih slova.

Mikro i makro razmak

Dizajneri ga dijele na dvije vrste, i korisno je znati razliku kad se razgovara s njima.

Mikro razmak je unutar teksta: razmak između redova, između pasusa, oko pojedinačnog dugmeta. On odlučuje o tome hoće li se tekst moći čitati bez napora. Ovdje se sreće s tipografijom, jer isto pismo s premalim razmakom između redova djeluje kao zid.

Makro razmak je između većih dijelova: sekcija, kolona, slike i teksta pored nje. On odlučuje o tome vidi li posjetilac strukturu stranice ili samo dugačak niz sadržaja.

Kako se to vidi na sajtu

Najčešći primjer kod nas je početna stranica koja pokušava reći sve. Pet usluga, tri slike, broj telefona, adresa, izjava o kvaliteti i dugme, sve u prvom ekranu. Vlasnik je sretan jer je sve vidljivo. Posjetilac ne vidi ništa, jer ne zna gdje da počne.

Ista stranica s jednim naslovom, jednom rečenicom ispod i jednim CTA dugmetom, sa zrakom oko svega, dovede više ljudi do upita. Ostalo nije nestalo, samo je spušteno niže, gdje ga čita onaj koga zanima.

Druga česta slika je cjenovnik u tabeli bez razmaka, gdje se redovi stope i čovjek ne zna koja cijena pripada kojoj usluzi. Tu razmak između redova nije ukras, nego razlika između pročitane i pogrešno pročitane cijene.

Na telefonu je drugačije

Na malom ekranu prostora nema viška, pa se praznina smanjuje. Pravilo je da se smanji srazmjerno, a ne da nestane.

Margine s lijeve i desne strane ostaju, inače tekst dodiruje rub ekrana. Razmak između sekcija se skrati, ali ostaje veći od razmaka između pasusa, da se i dalje vidi gdje jedno završava a drugo počinje. Dugmad i linkovi imaju dovoljno mjesta oko sebe da se ne pritisne susjedni.

Kod responsive dizajna se to rješava pravilima po veličini ekrana, a ne ručnim popravkama svake stranice.

Razmak kao pravilo, ne kao osjećaj

Na dobro postavljenom sajtu razmaci nisu slučajni brojevi. Postoji skala, najčešće zasnovana na nekoliko osnovnih vrijednosti koje se ponavljaju, i svaki razmak na sajtu je jedan od njih.

To zvuči kao sitnica, a razlika se vidi čim se stranice slože jedna pored druge. Sajt na kojem je svaka sekcija imala svoj razmak djeluje neuredno, iako niko ne može reći zašto. U dizajn sistemu se ta skala zapiše jednom i ugradi u sve dijelove sajta.

Papir traži isto, i gubi ga češće

Kod štampe se svaki centimetar plaća, pa se praznina prva žrtvuje. Letak se ispuni do ruba, katalog dobije šest proizvoda po strani umjesto četiri, a logo se smanji da stane još jedna rečenica.

Rezultat je materijal koji se ne čita. Letak u sandučetu ima nekoliko sekundi da kaže šta je i zašto bi nekome trebao. Manje stvari, jasno odvojenih, prođe taj test češće.

Kod štampe postoji i tehnička praznina: sigurnosna margina od ruba, jer rez nikad nije savršeno precizan. Tekst stavljen do samog ruba zna biti odrezan.

Kad ovo nije vaš problem

Ako stranica već ima jasan naslov, malo sadržaja po ekranu i ljudi dolaze do upita, razmaci nisu mjesto gdje se traži poboljšanje. Praznina ne može popraviti nejasnu ponudu, pogrešnu publiku ni spor sajt.

I obrnuto, neke stranice trebaju gustinu. Tabela s tehničkim specifikacijama ili spisak rezervnih dijelova koristi se tako što se traži jedan red, pa pretjerano prozračna tabela samo produži skrolanje. Tu je cilj čitljivost reda, a ne utisak prostranosti.

Greške koje najčešće viđamo

Najčešća je prvi ekran natrpan svime što firma radi, jer se vlasnik boji da će nešto ostati neviđeno.

Česta je i praznina na računaru koja na telefonu nestane, pa se sekcije slijepe jedna za drugu.

Tu je i tekst preko cijele širine velikog ekrana, s redovima toliko dugim da oko gubi red pri prelasku u sljedeći.

Viđamo i razmake koji se razlikuju od stranice do stranice, jer ih je svako upisivao ručno.

Kod štampe je to letak bez margine, s tekstom koji završi u rezu.

I kontakt dugme stisnuto uz drugi link, pa ljudi na telefonu pritisnu pogrešno.

Lista za provjeru

• Vidi li se u prvom ekranu jasno šta je glavna poruka?
• Ima li glavno dugme dovoljno prostora oko sebe?
• Je li razmak između sekcija veći od razmaka između pasusa?
• Može li se tekst čitati bez naprezanja, i na telefonu?
• Jesu li redovi teksta dovoljno kratki na širokom ekranu?
• Ponavljaju li se isti razmaci na svim stranicama?
• Imaju li letak i katalog marginu od ruba?
• Mogu li se linkovi i dugmad na telefonu pritisnuti bez promašaja?

Pojmovi koje ćete čuti uz bijeli prostor

• Margina: prazan prostor između sadržaja i ruba ekrana ili papira.
• Prored: razmak između redova teksta.
• Mikro razmak: razmak unutar teksta i oko malih elemenata.
• Makro razmak: razmak između sekcija i većih cjelina.
• Skala razmaka: unaprijed određen niz vrijednosti koje se koriste za sve razmake.
• UX dizajn: oblikovanje načina korištenja, u kojem je razmak jedan od osnovnih alata.