Basic layout – osnovni raspored i širine kolona u web dizajnu

Svaki početnik u web dizajnu uvijek postavi ista pitanja:

- koju širinu ima container?

- koje širine su kolone?

I dobro je ako postavi to pitanje, loše je ako napravi dizajn a o tome nema pojma.

Ovdje je pojednostavljeni primjer dizajna sličan jednom kojeg sam svojedobno dobila na kodiranje. Dizajnirao ga je grafički dizajner bez ikakvog iskustva sa web dizajnom. Na svakoj podstranici bile su drugačije slike različite širine, što je bespotrebno iskompliciralo kodove, a rezultat je izgledao neuredno.  (slika dolje)

primjer lošeg layout-a

Za razliku od grafičkog dizajna koji ide u tisak i dizajna za flash stranicu koja se animira – dizajn za statičnu web stranicu mora imati stabilnu strukturu koja će se moći lako ukodirati. (slika 1 i 2)

slika 1 - dvije kolone

slika 2 - tri kolone

Osnovna struktura statične web stranice :

Body (bijelo)

Bijelom bojom na slici je označena pozadina “body-a”.  Body zauzima površinu cijelog našeg monitora, bez obzira na njegovu širinu. Pozadina “body”-a može biti jednobojna, tekstura, slika ili kombinacija toga.

Container (sivo)

Kompletan sadržaj naše stranice smješta se u “container” uobičajene širine 960 px, centriran na sredini našeg monitora, a sadržaj ne smije prelaziti izvan dimenzija containera.

Monitori postaju sve veći i zato se danas izbjegavaju flexibilni layouti u kojima se “container” širi ovisno o veličini monitora. Naime, optimalna širina kolone teksta je do 620 px a sve više od toga je teško čitljivo.

Header (crno)

Unutar “container”-a, na samom vrhu nalazi se  “header”. U headeru, obično na lijevoj strani ili na sredini nalazi se logotip. Cjelokupan sadržaj headera biti će širine 940px, sa lijevom i desnom marginom po 10px.

Topnavigacija (crveno)

Ispod (a može i iznad) headera obično dolazi “topnavigacija” . I ona je ukupne širine max. 940 px (+margine) kao i header.

Kolone (zeleno i plavo)

Ispod topnavigacije dolaze obično dvije ili tri kolone. U širu kolonu dolazi glavni sadržaj stranice (tekst i slike) , a druga služi za navigaciju, search forme, obavijesti, bannere itd. U zadnje vrijeme sve češće se pomoćna navigacija stavlja u desnu kolonu, dok je prije uobičajena bila lijeva. Razni portali često imaju 3 kolone, a njihovu uobičajenu širinu možemo 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 sadržaja svuda je jednaka i iznosi 940px.

Šema za dizajn

Pri određivanju širina kolona pomoći će nam i 12-collon grid system. Korištenje je jednostavno, downloadiramo zip file, odzipamo, pronađemo 960_templates / templates / photoshop / 960_grid_12_col.psd koji otvorimo u photoshopu.  12-col-grid možemo  po želji isključiti /uključiti.

Naravno da postoje razigrani, neobični i netipični dizajni web stranica tzv “out of the box“, no za početnike u web dizajnu je ipak bolje da se drže ovih osnovnih pravila. Odstupanje od njih bolje je prepustiti iskusnim web dizajnerima koji dobro razumiju način na koji stranica funkcionira.

I da.. ako već dizajnirate web stranicu, radite to photoshopu!