Osnove Web dizajna

Web dizajn:
Web dizajn je planiranje, kreiranja izgleda i strukture,
izbor sadraja i izrada Web stranice.
Oblasti Web dizajna obuhvataju: Web i grafiki dizajn,
dizajn interfejsa i optimizaciju za Web pretraivae.
Prvi Web dizajner bio je Tim Berners-Lee, koji je 19901991. godine kreirao prvi Web sajt na Internetu
(info.cern.ch)

Alati za izradu Web stranica

(grafiki orijentisani HTML editori)
Microsoft
FrontPage
Exspression Web

Macromedia
HomeSite
DreamWeaver

Adobe
PageMill

Open source
Quanta Plus
Mozilla Composer

Tehnologije za izradu Web stranica

HTML
CSS
JavaScript
PHP
ASP
MySQL
Adobe FLASH
AJAX

Kreiranje Web sajta

Web sajtovi
World Wide Web je multimedijalni informacioni sistem koji se
izvrava na Internetu. Sastoji se od Web sajtova koji su smeteni
(hostovani) na serverima po itavom svetu.
Web sajtovi se sastoje od Web stranica:
svaka stranica (page) ima sopstvenu fiziku adresu (URL).

promena stranice se vri klikom na vezu (link: re, niz rei,

dugme ili sliku).
veza je dizajnirana i posebno oznaena na ekranu (osvetljena
u drugoj boji ili podvuena).
Web stranica su formatirane u HTML (HyperText Markup
Language) jeziku.

Postupak kreiranja Web sajtova

definisanje ciljeva i zadataka sajta

planiranje sajta
prikupljanje materjala za sajt
izrada sajta (dizajn)
proba i popravka sajta
promocija sajta
pradenje i odravanje sajta

Planiranje Web sajta

Planiranje Web sajta je najvaniji deo u procesu njegove izrade.
Bitno je da znate ta elite da prikaete posetiocima, kako Internet
funkcionie i da imate realna oekivanja o tome kako va sajt moe
da izgleda.
Prva stvar kod koje vedina pravi greku jeste da ponu izradu bez
planiranja.

Pre nego to ponete izradu sajta stavite na papir odgovore na

pitanja :

Da li postoji stvarna potreba za sajtom?

Koje poslove i zadatke elim da realizujem preko Web sajta?
Kako elim da izgleda moj sajt?
Kome je namenjen?
Koje su kljune rei i pojmovi koje najbolje opisuju sajt?
Kako treba biti dizajniran?
Da li de biti interaktivan ili ne?

Struktura Web sajta

Verovatno najvaniji deo planiranja sajta je struktura sajta,
odnosno kako rasporediti sadraj u logike jedinice (poetna
strana, ostale strane, meni, linkovi, slike , video materijal i dr. ).
Kada poinjete sajt morate imati u vidu na koji nain de biti
rasporeen sadraj (teks, slike , video...).

Uvek je poeljno kreirati grafiku emu, odnosno mapu sajta, to

de vam pomodi u sagledavanju logike hijerarhije, a takoe
ostalima pojasniti strukturu vaeg sajta.

Mapa Web sajta

Linearni tip

Hijerarhiski tip

Meoviti tip

Struktura sajta

Poetna strana

Home page (prva stranica) je poetna strana sajta

Browser je otvara kao prvu prilikom pristupa Web adresi
Obezbeuje linkove ka ostalim delovima sajta
Poetna stranica daje osnovne informacije o samom sajtu i
njegovom sadraju
Poetna strana se snima pod imenom index.htm

Imena strana
Poetna strana se uva pod imenom index.htm
Ostale strane se uvaju kao posebani fajlovi i treba im davati
imena prema sadraju stranice.
Primer: linkovi.htm ili biografija.htm
Nikada ne treba ostavljati razmake u imenima. Koristiti vierene
nazive sa velikim poetnim slovima.
Primer: ListaProizvoda.htm ili DetaljiProizvoda.htm

Root folder Web sajta

Pri izradi sajta sve fajlove koji ine sajt treba drati iskljuivo
unutar jednog foldera, tzv. Root foldera Web sajta.

Unutar root-a grupisati srodne sadraje unutar zasebnih foldera,

radi kasnijeg lakeg snalaenja i odravanja.
Uvek praviti posebne foldere za slike, tekstove, video zapise i sl.

Vreme uitavanja stranice

Vreme uitavanja stranice (loading time) je tehniki faktor od
presudnog znaaja za uspenost kreacije Web strane.
Najvanije je da korisnik dovoljno brzo vidi korisnu informaciju na
ekranu.
Stranice nikad ne bi trebale biti vede od maksimum 200 KB. Ali bez
obzira kolika je vaa stranica u bajtima morate proveriti koliko je
potrebno vremena da se uita vaa poetna stranica na najsporijoj
vezi (danas bi to jo uvek bilo 56Kbps). Ako posetilac otprilike za 4
sekunde ne moe videti o emu se radi na stranici velike su anse
da de je i napustiti.
Konana veliina stranice je manje znaajna ako korisnik moe brzo
da preduzme neku akciju.

Struktura Web stranice

Web stranica je elektronski (digitalni) sinonim ili ekvivalent
klasinom papiru, a obino sadri sledede elemente:
zaglavlje (header)
navigaciju (meni, menu)
sadraj stranice (content)
podnoje stranice (footer)
baner (banner)
bona traka (sidebar )
pozadina (backgorund)

Struktura Web stranice

Dimenzije elemenata sranice date su u pixelima

Primer Web stranice

Zaglavlje (Header)
Header predstavlja najvie pozicionirani element Web stranice.
Bitna karakteristika header-a je to je header element koji ostvaruje
prvi vizuelni kontakt sa posetiocem. U header-u se, kao to ste do
sada imali priliku da primetite, nalazi logo Web sajta, uvek sa leve
strane, slogan, fotografija i navigacija (meni).

Meni
Logo

Baner

Sadraj (Content)
U delu za sadraj se nalazi glavni sadraj stranice. U zavisnosti od
tipa stranice na kojoj se nalazite, to moe biti tekst sa slikama,
grupa proizvoda, samo jedan proizvod, i slino. Na primer, u
sadraju poetne stranice ovog sajta nalazi se spisak poslednjih
10 tekstova, dok se u Sadraj-delu ove stranice nalazi tekst koji
upravo itate.

Sadraj

Bona traka (Sidebar)

Jo nije sasvim ustanovljeno gde se bona traka zapravo treba
nalaziti. Na nekim sajtovima ona se nalazi sa leve, dok je na
ostalim sa desne strane. Ipak, ini se da sajtovi na kojima se
bona traka nalazi sa desne strane prevolauju kao noviji trend,
jer su se nekada bone trake na svim sajtovima nalazile iskljuivo
na levoj strani. Sadraj bone trake je esto raznolik. Uglavnom,
ne treba propustiti priliku da se u bonu traku ubace linkovi
(veze) ka profilima na drutvenim mreama, navigacija ka
popularnim sadrajima ili ak glavna navigacija (umesto u
zaglavlju), i zato da ne, deo sa reklamama (banerima). Bona
traka je element bez kog mnogi sajtovi funkcioniu
najnormalnije. Bona traka se u vedini sluajeva nalazi samo na
sajtovima koji imaju veliku koliinu sadraja.

Bona traka (Sidebar)

Bona
traka

Podnoje (Footer)
U footer-u svakog sajta nalazi se tekst o zatiti prava na
koridenje sadraja. U podnoju se takoe moe nadi navigacija,
kratke kontakt informacije o vlasniku sajta ili veze ka drutvenim
mreama.

Podnoje

Navigacija
Navigacija ili navigacioni meni je u stvari skup linkova koji
meusobno povezuju stranice Web sajta.
Navigacija na Web sajtu mora biti pregledna, laka za koridenje i
da omogudava korisniku da sa to manje klikova doe do eljene
stranice. Kada je god to mogude, dobro je rukovoditi se
principom da korisnik sa bilo koje stranice moe otidi na bilo koju
drugu stranicu samo jednim klikom. Treba izbegavati otvaranje
drugih stranica u novom prozoru, novom tab-u ili pop-up
prozoru.
Navigacija mora biti uoljiva, ali ne prenapadna da ne bi odvlaila
panju korisnika od sadraja.

Navigacija
Navigacija se najede smeta u levu ili gornju stranu, retko
sredemo reenja navigacije sa desne ili donje strane.

Vertikalni
meni

Horizontalni
meni

25

Standardni elementi Web stranice

Prema tipu medija
Tekst
Slika
Zvuk
Video
...

Prema vrsti HTML objekta

(HTML > 3.2)
Tekst
Okvir
Tabela
Forma
Slika
...

26

Boja pozadine i fontova

Boje pozadine i fontova su bitan faktor u grafikom dizajniranju
sajta. Boje zavise od teme sajta i ciljne grupi kome je sajt
namenjen. Na primer neki deji sajtovi imade boje koje su arene,
crvene, vesele i slino, dok recimo sajtovi firmi imade dve, do
najvie tri boja sa njihovim nijansama, bez arenila, itd.

Odnos izmedju boje pozadine i boje fonta je najbitniji za itljivost

teksta, da ne bi dolo do zamaranja posetilaca prilikom itanja.
Ukoliko se prilikom odabira pozadine teksta uzima neka slika,
napravite je manje transparentnom pomodu phptoshop-a.

Boja pozadine i fontova

Formatiranje teksta
Prezentacija teksta je vaan element u grafikom dizajnu stranica.
Osim na pravilan raspored slika i ostalih elemenata unutar teksta,
potrebno je obratiti panju i na koritenje praznina u obliku
margina, novih redova i paragrafa, proreda i sl. Vano je da tekst
sadri dovoljno praznina ili npr. okvira jer se na taj nain tekst
grupie u celine koje se lake pretrauju pogledom.
Vedina posetilaca koji se prvi put nau na nekoj stranici prvo
pogledom "prelete" po sadraju stranice i na taj nain odlue
sadri li ona ono to ih zanima. Zgusnuti tekst oteava takvo
pretraivanje.

Formatiranje teksta
Na ovoj slici levo je dobro uredjen tekst a na desnoj, taj isti tekst je
vrlo loe ureen. Primedujete da su slike na desnoj strani
"zamarajude" organizovane, kao i naslov i nema proreda. Sve to
rezultira loim utiskom i obeshrabruje posetioce da itaju tekst.

Fontovi
Kako nijedan korisnik nema instalirane iste fontove, to se pri izradi
Web stranica moraju koristiti samo oni fontovi za koje ste sigurni
da su prisutni na svakom raunaru. Ovo obino suava izbor na
Arial, Times New Roman, Verdana, Comic Sans Ms i Courier New.
Za stranice koje nastoje ostaviti ozbiljan utisak bi trebalo koristiti na
primer Times ili Courier a za zabavne i mladalake stranice Comic
Sans Ms.
Naslove i neke detalje za koje vam treba neki kitnjasti font koji
imate samo vi prikaite kao slike, ali umereno.
Na stranicama itavog sajta mora da se koristi jedan te isti font, a
nikako meati dve ili vrste fontova. Isto vai i za veliinu fonta.

31

Slike
O koridenju slika treba dobro razmisliti. Vie slika znai due
uitavanje, pa zato oprez! Bez slika se ne moe, inae bi sve
izgledalo kao tehniki prirunik, a ne kao dizajnersko delo.
Osnovnu stranicu nemojte preopteretiti, jer se ona uitava prva, a
due ekanje zna da nervira (znate po sebi - kada se neka stranica
ne uita u prvih pola minuta, verovatno dete otidi na neku drugu).

Kao orjentacija moe se uzeti da pojedini grafiki elementi ne bi

trebao biti vedi od 50 KB dok celoukupna stranica ne bi trebala
prelaziti 200 KB.
Koristite komprimovane slike u gif, jpg ili png formatu.

Animacije
Na stranicama su najrairenije Gif i Flash animacije. Najede se
radi o dugmadima ili banerima kojima se eli privudi panja
posetilaca. I dok jedan do dva takva elementa po stranici ne
smeta previe, vie od toga nije estetski lepo jer pravi prilino
arenila. Takvo arenilo za deje i zabavne sajtove moda i ne
smeta previe ali ako je u pitanju poslovni sajt to apsolutno nije
preporuljivo.
to se tie poslovnih sajtova nimalo nije preporuljivo koristiti
bilo kakvu animaciju u tekstualnom delu, ali ne smeta recimo u
top (gornjem) delu sajta gde je logo firme na primer.

Zvuk
Nimalo se ne preporuuje da se prilikom otvaranja internet stranice
automatski pokrene nekakva melodija. Nametati tako neto
posetiocima nije poeljno, jer to moe prilino usporiti otvaranje
stranica.
Ukoliko se ipak odluite na koridenje muzike, npr. tako neto nije
toliko iznenaujude kod stranica u Flash-u, uvek treba omoguditi
opciju za ukljuenje i iskljuenje zvukova, i to na jako vidnom mestu
u gornjem delu stranice.

Kompatibilnost sajta u raznim okruenjima

Prilikom grafikog dizajna potrebno je izgled stranice pogledati u
razliitim okruenjima, i to u skoro svim:
vrstama internet itaa, kao i u gotovo svim njihovim
verzijama
rezolucijama ekrana
brzinama interneta.
Morate napraviti grafiki dizajn tako da je sajt potpuno identino
vidljiv u svim preglednicima.
Rezolucija ekrana moe uveliko promeniti izgled stranice, ak dotle
da je stranica potpuno neitljiva. To se moe preduprediti na dva
naina. Prvi nain je da se koriste fiksne dimenzije (u pikselima) u
dizajniranju. Drugo reenje bi bilo fluidni grafiki dizajn stranice,
odnosno stranica koja se prilagoava veliini prozora brauzera.

Sklapanje sadraja u celinu

Spremili ste sve slike i tekstove koje dete staviti na sajt, razradili
dizajn i sada to elite pretoiti u oblik koji de browser prikazati.
Iako nije neophodno, jako je preporuljivo napraviti dobru
strukturu foldera po kojima dete razmetati datoteke.

slike dobijaju svoj folder

svaka rubrika sajta svoj folder

Web stranica - primer 1:

Web stranica - primer 2:

Web stranica - primer 3: