Grid sistem

Grid sistem je nevidljiva mreža kolona, razmaka i margina po kojoj se slažu tekst, slike i dugmad na stranici, letku ili katalogu. Na gotovom dizajnu se ne vidi, ali drži sve u redu.

Kad mreže nema, to posjetilac ne zna nazvati, ali osjeti. Naslov stoji malo lijevo od teksta ispod njega, kartice imaju različite razmake, a stranica djeluje kao da ju je slagalo više ljudi. Djeluje manje uredno, i firma s njom.

Od čega se sastoji

Mreža ima tri dijela. Kolone su vertikalne trake u koje ide sadržaj. Gutter je razmak između kolona. Margina je prostor između mreže i ruba ekrana ili papira.

Element na stranici zauzima jednu ili više kolona. Slika može zauzeti šest od dvanaest, tekst pored nje ostalih šest. Tri kartice u redu zauzimaju po četiri.

Na webu je najčešća mreža od dvanaest kolona, jer se dvanaest dijeli na dva, tri, četiri i šest. Isti sajt tako može imati sekciju s dvije kolone i sekciju s tri, a da sve stoji na istim linijama.

Zašto pomaže čitanju

Oko traži poredak. Kad lijeve ivice naslova, teksta i slika stoje u istoj liniji, stranica se čita brže, jer oko ne mora tražiti gdje počinje sljedeći dio.

Mreža radi zajedno s vizuelnom hijerarhijom. Ono što je važno dobije više kolona i više prostora, ono što je sporedno manje. I bijeli prostor dobija pravilo: razmak između sekcija je svugdje isti, umjesto da bude onoliki koliko je ostalo.

Na telefonu

Responsive dizajn se oslanja na mrežu. Na širokom ekranu stranica ima dvanaest kolona, na tabletu osam, na telefonu četiri ili samo jednu.

Tačke na kojima se raspored mijenja zovu se prelomne tačke. Tri kartice koje na računaru stoje u redu, na telefonu stanu jedna ispod druge. Kad je mreža postavljena kako treba, to se dešava samo od sebe. Kad nije, programer svaku sekciju popravlja posebno, i neka uvijek ostane slomljena.

Margine na telefonu su posebna stvar. Tekst koji dodiruje rub ekrana teško se čita, a dugme uz sam rub se teško pritisne.

Mreža počinje na skici

Mreža se ne dodaje na kraju, kad je dizajn gotov. Određuje se na početku, već na wireframeu, gdje se dogovara šta stoji gdje i koliko prostora dobija.

Na skici se tada odmah vidi i šta ne stane. Tekst od tri reda u kartici koja ima mjesta za jedan, tabela cijena koja na telefonu nema gdje da ode. To je mnogo jeftinije riješiti na skici nego u kodu. Kad dizajner kasnije pravi mockup s pravim bojama i fotografijama, mreža je već tu i ne mijenja se sa svakom novom stranicom.

Grid u štampi

Mreža je u štampi starija nego na webu. Katalog, brošura i jelovnik slažu se po kolonama, a margine moraju ostaviti mjesta za rez i povez.

Uz kolone se u štampi često koristi i bazna mreža: horizontalne linije na koje sjedaju redovi teksta. Tada redovi u dvije susjedne kolone stoje na istoj visini, što se na papiru vidi više nego na ekranu.

Grid u kodu i u dizajn sistemu

Dizajner mrežu odredi u alatu za dizajn, a programer je prenese u kod, danas najčešće kroz CSS Grid ili Flexbox. Brojevi moraju biti isti na oba mjesta: širina sadržaja, broj kolona, gutter, margina po veličini ekrana.

Ako firma ima dizajn sistem, mreža je jedan od prvih dijelova u njemu, uz razmake. Uz nju se obično dogovori i skala razmaka, recimo sve u koracima od osam piksela, pa se razmaci ne biraju svaki put iznova.

Kad se smije izaći iz mreže

Fotografija preko cijele širine ekrana, citat koji viri u marginu, naslov pomjeren udesno. Sve to može raditi.

Uslov je da je ostatak stranice u redu. Izuzetak privuče pažnju samo kad postoji pravilo od kojeg odstupa. Na stranici bez mreže, element koji izlazi iz nje izgleda kao još jedna greška.

Primjer iz prakse

Proizvođač obuće iz Gračanice ima sajt koji su kroz godine dopunjavali različiti ljudi. Stranice modela izgledaju jedna drugačije od druge: negdje slika lijevo, negdje desno, razmaci između fotografija od deset do šezdeset piksela, tekst ponegdje širi od slike iznad njega.

Kod redizajna se prvo odredi mreža od dvanaest kolona i skala razmaka, pa se po njoj složi jedan predložak za stranicu modela. Svi modeli se prebace u isti predložak. Nijedna fotografija nije nova, a sajt prvi put izgleda kao da pripada jednoj firmi.

Kad ovo nije vaša briga

Ako sajt pravite u gotovoj temi ili alatu za izradu stranica, mreža je u njih već ugrađena, i dovoljno je da je ne razbijate ručnim pomjeranjem elemenata. O mreži vrijedi razgovarati kod izrade sajta po mjeri, kataloga ili kad se sajt dugo dopunjavao bez pravila.

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

Najčešće su elementi poravnati okom umjesto po mreži, pa su ivice pomjerene za nekoliko piksela.

Česti su i razmaci koji se razlikuju od sekcije do sekcije.

Viđamo i tekst preko cijele širine velikog ekrana, s redovima koje je teško pratiti.

Tu je i mreža iz dizajna koja u kodu ima druge brojeve.

Na kraju, mobilna verzija u kojoj tekst dodiruje rub ekrana.

Lista za provjeru

• Stoje li lijeve ivice naslova, teksta i slika u istoj liniji?
• Jesu li razmaci između kartica i sekcija isti kroz cijeli sajt?
• Ima li tekst razumnu širinu na velikom ekranu?
• Ima li tekst marginu od ruba ekrana na telefonu?
• Jesu li mreža i razmaci zapisani u dizajn sistemu ili knjizi standarda?
• Slaže li se mreža u dizajnu s onom u kodu?

Pojmovi koje ćete čuti uz grid

• Kolona: vertikalna traka u koju ide sadržaj.
• Gutter: razmak između dvije kolone.
• Margina: prostor između mreže i ruba ekrana ili papira.
• Prelomna tačka: širina ekrana na kojoj se raspored mijenja.
• Bazna mreža: horizontalne linije na koje sjedaju redovi teksta, najčešće u štampi.