Volite web dizajn?

Zašto ne podijelite svoje znanje s cijelim svijetom? Svatko može pisati za Kroativ i na taj način se promovirati.

Pomoć potrebitima

http://www.hck.hr

Hrvatski Crveni križ

u službi humanosti od 1878.

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

Autor/ica Weberica

Završila fotografiju na ŠPU, a nakon toga grafički i web dizajn. Rođena, živi i radi u epicentru Zagreba. Stalni član Kroativ mreže i autor mnogih korisnih članaka, radi kao stalni suradnik Web Inkubator studija.

Oglas

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 web dizajn layout-a

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

slika 1 - dvije kolone

slika 2

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!

Označeno s: , , , , ,
Za ovaj članak možete glasati na CroPortalu i tako pomoći u njegovoj promociji. Ako članak još nije objavljen vi možete biti prvi!
Stavovi i mišljenja izrečena u ovome članku i/ili komentarima odnose se samo na autora/icu članka i/ili komentara, a ne i cijele Kroativ mreže. Zabranjeno je neovlašteno prenošenje članaka u cjelosti bez prethodnog dogovora ili bez istaknutog povratnog linka na www.kroativ.net stranicu te imena autora.
Oglas

9 komentara

  • Ines kaže:

    Super objašnjeno, thanx

  • Ana kaže:

    Ovaj članak je velika pomoć za nas početnike :)!

    Molila bih samo za savjet, zanima me kolike trebaju biti dimenzije containera budući da bih željela stranicu čiji se sadržaj neće protezati od ruba do ruba ekrana već će container biti u centru ekrana (sa uočljivim marginama s lijeve i desne strane).
    Hvala puno :)

  • weberica kaže:

    Ana , piše ti gore – uobičajena širina containera je 960 px sa 10px paddinga sa obje strane (ili 980 sa po 20px paddinga) Na skici je sive boje.

  • Ana kaže:

    Hvala na brzom odgovoru :). Baš sam smotana, krivo sam postavila pitanje. Da li je moguće da rubne margine (lijeva i desna) budu veće,npr. 100 px, tj. da li je to protivno pravilima?
    Naime, na stranici koju ste preporučili (out of box) jako mi se svidio design za wonderbra (example 5) gdje je cjelokupni sadržaj u sredini a lijeva i desna margina su poprilično velike…
    Oprostite na gnjavaži :)

  • weberica kaže:

    Prvo idi na stranicu https://addons.mozilla.org/en-US/firefox/search/?q=measureit&cat=1%2C0&x=29&y=21 i downloadiraj si dodatak za firefox – measureit. Pojaviti će ti se ikonica u donjem lijevom uglu prozora. Klikneš na nju, zatim u prozoru i vučeš od ruba do ruba onoga što želiš izmjeriti (mjeri visinu i širinu). Na primjer, na wonderbra stranici izmjeri širinu bijele police (ili kolona s tekstom) i vidjeti ćeš da joj je širina 940 px, znači standardna širina containera.

    Pozadina top navigacije (crno) je šira od toga, no ona je u BODY BACKGROUNDU veličine 2000×700 px a NE u containeru
    http://www.wonderbra.co.uk/assets/images/global/body.jpg
    sami linkovi (tekst) u top navigaciji su unutar 940 px, tj containera

    Ogledalo je posebna slika, pozicionirana apsolutno- background-position: 0 0;
    http://www.wonderbra.co.uk/assets/images/content/collections/c-products-s-i-i.png

    Dakle, navedena stranica ima standardnu širinu containera od 960px sa velikom slikom u body backgroundu.
    Kada je širina containera određena tada je 960 ev. 980 px jer bi se u suprotnom na rezoluciji šir. 1024 px (još uvijek u čestoj upotrebi) pojavio vodoravni scroler a to svi želimo izbjeći.

    Međutim, postoje tzv. flexible layouts gdje širina containera nije definirana pa se sadržaj uvijek proteže cijelom širinom prozora, bez obzira na kojoj rezoluciji gledamo.

  • Ana kaže:

    Još jednom hvala puno! Sve sam skužila! Pogotovo je korisno to što background photo može biti tako velikih dimenzija a to nisam znala. Mislila sam da mora biti 960 (980) x “nešto”. Stvarno ste odličan sajt i od velike pomoći za nas početnike :)

    • weberica kaže:

      Čini mi se da si pobrkala “body” i “container”. Body nema određenu širinu , tj širi se ovisno o rezoluciji monitora. Container ako ima određenu širinu tada je 940-980 px, ovisno o širini paddinga/margina sa strane
      Ajd, drago nam je da smo mogli pomoći, prati nas i dalje :)

  • TrioLatice kaže:

    Bezbroj puta mi postavljaju pitanja dali svoje stranice radim u Photoshopu. Da to je jedan od desetak alata koji koristim. Pa kako to misliš ? Neke stvari radim u Ilustratoru, Notepadu, Dreamwearu , Fireworks i niz drugih. Svaki ima svojih posebnosti, i jedna ne može zamjeniti drugoga. Za layount isključivo koristim 12-collon grid system. kao što se gore spominjalo. Korištenjem takvog sustava prilično mi je olakšan posao za dizajn CMS predložaka koji imaju u konačnici jedan fleksibilan izgled , gdje dizajner u početku ne određuje kako će stranica na kraju izgledati. Budete li koristili isti sustav moja prepuruka je da koristite širinu 1020 px za vaš predložak i unutar njega grid 960 px.

  • Saša kaže:

    960_grid_12_col je izmislio pametan covjek da pomogne ljenčinama.
    Ne volim taj princip i nikad ga neću koristiti (1 000 000 je razloga).

    Pozdrav i sve najbolje za odličan sajt.

Trackbacks & Pingbacks

Ostavite komentar

Autori s više od 10 komentara nemaju tag nofollow na svojim linkovima! Zabranjeno je vrijeđanje, omalovažavanje ili na bilo koji drugi način ometanje normalnog toka komentara. Također je zabranjeno oglašavanje u komentarima i sve druge vrste spam-a.

(*) polja su obavezna

XHTML: Možete koristiti: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">