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.
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!
Slični sadržaj:
- Zašto trebamo koristiti "blending options" u WEB dizajnu (Jako slično)
- Višestruki "span" u CSS-u (jedan jako zanimljivi logo) (Jako slično)
- Naručiti web stranicu od majstora ili naučiti kako je napraviti sami? (Jako slično)
- Search box - HTML basic + Css styles (Slično)
- Login & register form - basic HTML + Css styles (Slično)
9 komentara
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.
Super objašnjeno, thanx
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 🙂
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.
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 🙂
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.
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 🙂
Č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 🙂
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.
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.