Osnove Web dizajna

Web dizajn:
− Web dizajn je planiranje, kreiranja izgleda i strukture,
izbor sadržaja i izrada Web stranice.
− Oblasti Web dizajna obuhvataju: Web i grafički dizajn,
dizajn interfejsa i optimizaciju za Web pretraživače.
− Prvi Web dizajner bio je Tim Berners-Lee, koji je 1990-
1991. godine kreirao prvi Web sajt na Internetu
(info.cern.ch)
 Alati za izradu Web stranica
(grafički orijentisani HTML editori)
• Microsoft • Open source
– FrontPage – Quanta Plus
– Exspression Web – Mozilla Composer
• Macromedia –…
– HomeSite
– DreamWeaver
• Adobe
– PageMill
 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

izvršava na Internetu. Sastoji se od Web sajtova koji su smešteni
(hostovani) na serverima po čitavom svetu.
Web sajtovi se sastoje od Web stranica:
− svaka stranica (page) ima sopstvenu fizičku adresu (URL).
− promena stranice se vrši klikom na vezu (link: reč, niz reči,
dugme ili sliku).
− veza je dizajnirana i posebno označena na ekranu (osvetljena
u drugoj boji ili podvučena).
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 održavanje sajta
 Planiranje Web sajta
Planiranje Web sajta je najvažniji deo u procesu njegove izrade.
Bitno je da znate šta želite da prikažete posetiocima, kako Internet
funkcioniše i da imate realna očekivanja o tome kako vaš sajt može
da izgleda.
Prva stvar kod koje vedina pravi grešku jeste da počnu izradu bez
planiranja.
Pre nego što počnete 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 ključne reči i pojmovi koje najbolje opisuju sajt?
− Kako treba biti dizajniran?
− Da li de biti interaktivan ili ne?
 Struktura Web sajta
Verovatno najvažniji deo planiranja sajta je struktura sajta,
odnosno kako rasporediti sadržaj u logičke jedinice (početna
strana, ostale strane, meni, linkovi, slike , video materijal i dr. ).

Kada počinjete sajt morate imati u vidu na koji način de biti

raspoređen sadržaj (teks, slike , video...).

Uvek je poželjno kreirati grafičku šemu, odnosno mapu sajta, što

de vam pomodi u sagledavanju logičke hijerarhije, a takođe
ostalima pojasniti strukturu vašeg sajta.
 Mapa Web sajta

Linearni tip

Hijerarhiski tip

Mešoviti tip
Struktura sajta
 Početna strana
− Home page (prva stranica) je početna strana sajta
− Browser je otvara kao prvu prilikom pristupa Web adresi
− Obezbeđuje linkove ka ostalim delovima sajta
− Početna stranica daje osnovne informacije o samom sajtu i
njegovom sadržaju
− Početna strana se snima pod imenom index.htm
 Imena strana
Početna strana se čuva pod imenom index.htm
Ostale strane se čuvaju kao posebani fajlovi i treba im davati
imena prema sadržaju stranice.
Primer: linkovi.htm ili biografija.htm
Nikada ne treba ostavljati razmake u imenima. Koristiti višerečne
nazive sa velikim početnim slovima.
Primer: ListaProizvoda.htm ili DetaljiProizvoda.htm
 Root folder Web sajta
Pri izradi sajta sve fajlove koji čine sajt treba držati isključivo
unutar jednog foldera, tzv. Root foldera Web sajta.

Unutar root-a grupisati srodne sadržaje unutar zasebnih foldera,

radi kasnijeg lakšeg snalaženja i održavanja.

Uvek praviti posebne foldere za slike, tekstove, video zapise i sl.

 Vreme učitavanja stranice
Vreme učitavanja stranice (loading time) je tehnički faktor od
presudnog značaja za uspešnost kreacije Web strane.
Najvažnije 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 vaša stranica u bajtima morate proveriti koliko je
potrebno vremena da se učita vaša početna stranica na najsporijoj
vezi (danas bi to još uvek bilo 56Kbps). Ako posetilac otprilike za 4
sekunde ne može videti o čemu se radi na stranici velike su šanse
da de je i napustiti.
Konačna veličina stranice je manje značajna ako korisnik može brzo
da preduzme neku akciju.
 Struktura Web stranice
Web stranica je elektronski (digitalni) sinonim ili ekvivalent
klasičnom papiru, a obično sadrži sledede elemente:
− zaglavlje (header)
− navigaciju (meni, menu)
− sadržaj stranice (content)
− podnožje stranice (footer)
− baner (banner)
− bočna traka (sidebar )
− pozadina (backgorund)
 Struktura Web stranice

Dimenzije elemenata sranice date su u pixelima

Primer Web stranice
 Zaglavlje (Header)
Header predstavlja najviše 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 Baner
Logo
 Sadržaj (Content)
U delu za sadržaj se nalazi glavni sadržaj stranice. U zavisnosti od
tipa stranice na kojoj se nalazite, to može biti tekst sa slikama,
grupa proizvoda, samo jedan proizvod, i slično. Na primer, u
sadržaju početne stranice ovog sajta nalazi se spisak poslednjih
10 tekstova, dok se u Sadržaj-delu ove stranice nalazi tekst koji
upravo čitate.

Sadržaj
 Bočna traka (Sidebar)

Još nije sasvim ustanovljeno gde se bočna 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
bočna traka nalazi sa desne strane prevolađuju kao noviji trend,
jer su se nekada bočne trake na svim sajtovima nalazile isključivo
na levoj strani. Sadržaj bočne trake je često raznolik. Uglavnom,
ne treba propustiti priliku da se u bočnu traku ubace linkovi
(veze) ka profilima na društvenim mrežama, navigacija ka
popularnim sadržajima ili čak glavna navigacija (umesto u
zaglavlju), i zašto da ne, deo sa reklamama (banerima). Bočna
traka je element bez kog mnogi sajtovi funkcionišu
najnormalnije. Bočna traka se u vedini slučajeva nalazi samo na
sajtovima koji imaju veliku količinu sadržaja.
Bočna traka (Sidebar)

Bočna
traka
 Podnožje (Footer)
U footer-u svakog sajta nalazi se tekst o zaštiti prava na
korišdenje sadržaja. U podnožju se takođe može nadi navigacija,
kratke kontakt informacije o vlasniku sajta ili veze ka društvenim
mrežama.

Podnožje
 Navigacija
Navigacija ili navigacioni meni je u stvari skup linkova koji
međusobno povezuju stranice Web sajta.

Navigacija na Web sajtu mora biti pregledna, laka za korišdenje i

da omogudava korisniku da sa što manje klikova dođe do željene
stranice. Kada je god to mogude, dobro je rukovoditi se
principom da korisnik sa bilo koje stranice može 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 uočljiva, ali ne prenapadna da ne bi odvlačila

pažnju korisnika od sadržaja.
 Navigacija
Navigacija se najčešde smešta u levu ili gornju stranu, retko
sredemo rešenja navigacije sa desne ili donje strane.

Horizontalni
meni
Vertikalni
meni

25
 Standardni elementi Web stranice

• Prema tipu medija • Prema vrsti HTML objekta

– Tekst (HTML > 3.2)
– Slika – Tekst
– Zvuk – Okvir
– Video – Tabela
– ... – Forma
– Slika
– ...

26
 Boja pozadine i fontova

Boje pozadine i fontova su bitan faktor u grafičkom dizajniranju

sajta. Boje zavise od teme sajta i ciljne grupi kome je sajt
namenjen. Na primer neki dečji sajtovi imade boje koje su šarene,
crvene, vesele i slično, dok recimo sajtovi firmi imade dve, do
najviše tri boja sa njihovim nijansama, bez šarenila, itd.
Odnos izmedju boje pozadine i boje fonta je najbitniji za čitljivost
teksta, da ne bi došlo 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 važan element u grafičkom dizajnu stranica.
Osim na pravilan raspored slika i ostalih elemenata unutar teksta,
potrebno je obratiti pažnju i na korištenje praznina u obliku
margina, novih redova i paragrafa, proreda i sl. Važno je da tekst
sadrži dovoljno praznina ili npr. okvira jer se na taj način tekst
grupiše u celine koje se lakše pretražuju pogledom.
Vedina posetilaca koji se prvi put nađu na nekoj stranici prvo
pogledom "prelete" po sadržaju stranice i na taj način odluče
sadrži li ona ono što ih zanima. Zgusnuti tekst otežava takvo
pretraživanje.
 Formatiranje teksta
Na ovoj slici levo je dobro uredjen tekst a na desnoj, taj isti tekst je
vrlo loše uređen. Primedujete da su slike na desnoj strani
"zamarajude" organizovane, kao i naslov i nema proreda. Sve to
rezultira lošim 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 računaru. Ovo obično sužava 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 mladalačke stranice Comic
Sans Ms.
Naslove i neke detalje za koje vam treba neki kitnjasti font koji
imate samo vi prikažite kao slike, ali umereno.
Na stranicama čitavog sajta mora da se koristi jedan te isti font, a
nikako mešati dve ili vrste fontova. Isto važi i za veličinu fonta.

31
 Slike

O korišdenju slika treba dobro razmisliti. Više slika znači duže

učitavanje, pa zato oprez! Bez slika se ne može, inače bi sve
izgledalo kao tehnički priručnik, a ne kao dizajnersko delo.
Osnovnu stranicu nemojte preopteretiti, jer se ona učitava prva, a
duže čekanje zna da nervira (znate po sebi - kada se neka stranica
ne učita u prvih pola minuta, verovatno dete otidi na neku drugu).
Kao orjentacija može se uzeti da pojedini grafički 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 najraširenije Gif i Flash animacije. Najčešde se

radi o dugmadima ili banerima kojima se želi privudi pažnja
posetilaca. I dok jedan do dva takva elementa po stranici ne
smeta previše, više od toga nije estetski lepo jer pravi prilično
šarenila. Takvo šarenilo za dečje i zabavne sajtove možda i ne
smeta previše ali ako je u pitanju poslovni sajt to apsolutno nije
preporučljivo.
Što se tiče poslovnih sajtova nimalo nije preporučljivo 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 preporučuje da se prilikom otvaranja internet stranice

automatski pokrene nekakva melodija. Nametati tako nešto
posetiocima nije poželjno, jer to može prilično usporiti otvaranje
stranica.
Ukoliko se ipak odlučite na korišdenje muzike, npr. tako nešto nije
toliko iznenađujude kod stranica u Flash-u, uvek treba omoguditi
opciju za uključenje i isključenje zvukova, i to na jako vidnom mestu
u gornjem delu stranice.
 Kompatibilnost sajta u raznim okruženjima
Prilikom grafičkog dizajna potrebno je izgled stranice pogledati u
različitim okruženjima, i to u skoro svim:
− vrstama internet čitača, kao i u gotovo svim njihovim
verzijama
− rezolucijama ekrana
− brzinama interneta.
Morate napraviti grafički dizajn tako da je sajt potpuno identično
vidljiv u svim preglednicima.
Rezolucija ekrana može uveliko promeniti izgled stranice, čak dotle
da je stranica potpuno nečitljiva. To se može preduprediti na dva
načina. Prvi način je da se koriste fiksne dimenzije (u pikselima) u
dizajniranju. Drugo rešenje bi bilo fluidni grafički dizajn stranice,
odnosno stranica koja se prilagođava veličini prozora brauzera.
 Sklapanje sadržaja u celinu

Spremili ste sve slike i tekstove koje dete staviti na sajt, razradili
dizajn i sada to želite pretočiti u oblik koji de browser prikazati.
Iako nije neophodno, jako je preporučljivo napraviti dobru
strukturu foldera po kojima dete razmeštati datoteke.

– slike dobijaju svoj folder

– svaka rubrika sajta svoj folder
Web stranica - primer 1:
Web stranica - primer 2:
Web stranica - primer 3: