Basic layout osnovni raspored i irine

kolona u web dizajnu

Autor/ica Weberica
Zavrila fotografiju na PU, a nakon toga grafiki i web dizajn. Roena, ivi i radi u epicentru
Zagreba. Stalni lan Kroativ mree i autor mnogih korisnih lanaka, radi kao stalni suradnik
Web Inkubator studija.
Oglas
Svaki poetnik u web dizajnu uvijek postavi ista pitanja:
- koju irinu ima container?
- koje irine su kolone?

I dobro je ako postavi to pitanje, loe je ako napravi dizajn a o tome nema pojma.
Ovdje je pojednostavljeni primjer dizajna slian jednom kojeg sam svojedobno dobila na
kodiranje. Dizajnirao ga je grafiki dizajner bez ikakvog iskustva sa web dizajnom. Na svakoj
podstranici bile su drugaije slike razliite irine, to je bespotrebno iskompliciralo kodove, a
rezultat je izgledao neuredno. (slika dolje)

primjer loeg layout-a

Za razliku od grafikog dizajna koji ide u tisak i dizajna za flash stranicu koja se
animira dizajn za statinu web stranicu mora imati stabilnu strukturu koja e se moi
lako ukodirati. (slika 1 i 2)

slika 1 - dvije kolone

slika 2 - tri kolone

Osnovna struktura statine web stranice :
Body (bijelo)

Bijelom bojom na slici je oznaena pozadina body-a. Body zauzima povrinu cijelog
naeg monitora, bez obzira na njegovu irinu. Pozadina body-a moe biti jednobojna,
tekstura, slika ili kombinacija toga.
Container (sivo)

Kompletan sadraj nae stranice smjeta se u container uobiajene irine 960 px, centriran
na sredini naeg monitora, a sadraj ne smije prelaziti izvan dimenzija containera.

Monitori postaju sve vei i zato se danas izbjegavaju flexibilni layouti u kojima se container
iri ovisno o veliini monitora. Naime, optimalna irina kolone teksta je do 620 px a sve vie
od toga je teko itljivo.
Header (crno)

Unutar container-a, na samom vrhu nalazi se header. U headeru, obino na lijevoj strani
ili na sredini nalazi se logotip. Cjelokupan sadraj headera biti e irine 940px, sa lijevom i
desnom marginom po 10px.
Topnavigacija (crveno)

Ispod (a moe i iznad) headera obino dolazi topnavigacija . I ona je ukupne irine max.
940 px (+margine) kao i header.
Kolone (zeleno i plavo)

Ispod topnavigacije dolaze obino dvije ili tri kolone. U iru kolonu dolazi glavni sadraj
stranice (tekst i slike) , a druga slui za navigaciju, search forme, obavijesti, bannere itd. U
zadnje vrijeme sve ee se pomona navigacija stavlja u desnu kolonu, dok je prije
uobiajena bila lijeva. Razni portali esto imaju 3 kolone, a njihovu uobiajenu irinu
moemo vidjeti na slikama 1 i 2, a esto se koristi i 300+300+300 px.
Footer (uto)

Ispod obje kolone dolazi footer iste irine kao i header odnosno topnavigacija.
******************
Pogledamo li strukturu stranice na kojoj se upravo nalazimo, vidjeti emo da i ona ima
header, dvije topnavigacije, zatim dio za reklamni banner , dvije kolone i na dnu je footer .
irina sadraja svuda je jednaka i iznosi 940px.
ema za dizajn
Pri odreivanju irina kolona pomoi e nam i 12-collon grid system. Koritenje je
jednostavno, downloadiramo zip file, odzipamo, pronaemo 960_templates / templates /
photoshop / 960_grid_12_col.psd koji otvorimo u photoshopu. 12-col-grid moemo po elji
iskljuiti /ukljuiti.
Naravno da postoje razigrani, neobini i netipini dizajni web stranica tzv out of the box, no
za poetnike u web dizajnu je ipak bolje da se dre ovih osnovnih pravila. Odstupanje od njih
bolje je prepustiti iskusnim web dizajnerima koji dobro razumiju nain na koji stranica
funkcionira.
I da.. ako ve dizajnirate web stranicu, radite to photoshopu!