UVOD U WEB DIZAJN

Multimedijski sustavi, PITUP, FOI

Doc.dr.sc. Dijana Plantak Vukovac
DIZAJN ILI RAZVOJ WEB MJESTA?
▪ Terminologija
▪ web dizajn (eng. web design) – u užem smislu riječi označava grafički
aspekt dizajna pojedine web stranice i cijelog web mjesta
▪ razvoj weba (eng. web development)
▪ u užem smislu riječi odnosi na programski dio izrade web mjesta
▪ u širem smislu, web development (razvoj weba, razvoj web mjesta, izrada
web mjesta) je proces koji uključuje sve faze razvoja web mjesta, od faze
planiranja do faze aktivacije
▪ web mjesto (eng. web site) – skup fizički, sadržajno, estetski i
arhitekturalno povezanih web stranica percipiran kroz različite razine
složenosti (jednostavno web mjesto → web aplikacija → web sustav)
PRISTUPI RAZVOJU WEB MJESTA
▪ Pristupi s obzirom na proces razvoja web mjesta

▪ ad hoc pristup – intuitivni, quick & dirty pristup: “implementiraj, testiraj,

aktiviraj”

▪ inženjerski pristup – sustavan pristup koji uključuje sve faze razvoja

web sustava, od planiranja do održavanja, te se bavi različitim aspektima
razvoja weba da bi se zadovoljile potrebe korisnika
ASPEKTI RAZVOJA WEB MJESTA
▪ Grafički dizajn – prikaz sadržaja web mjesta na estetski privlačan način (web
dizajn)
▪ Dizajn informacija – organizacija sadržaja
▪ Dizajn navigacije – oblikovanje korisničkog web sučelja i definiranje interakcije
korisnika sa sučeljem
▪ Programski dizajn – razvoj funkcionalnosti web mjesta temeljen na principima
programskog inženjerstva
▪ Dizajn mreže i poslužitelja – tehnička implementacija
▪ Ostali aspekti:
▪ upotrebljivost – jednostavnost i lakoća korištenja web stranica
▪ pristupačnost – omogućen pristup putem razičitih uređaja i različitim
korisnicima, uključujući osobe s invaliditetom
DIZAJN INFORMACIJA
▪ ili informacijska arhitektura
▪ opisuje organizaciju informacija koje trebaju biti jasno
prezentirane, dane sa značenjem i u kontekstu
▪ uključuje organizaciju svih multimedijskih elemenata (teksta, slika,
animacija, videa, zvuka) i programskih elemenata na logičan način

▪ važno: potrebno poznavati teoriju hiperteksta i razne modele

hiperteksta da bi se dizajnirala efikasna struktura web mjesta

▪ postoje četiri glavne organizacijske sheme hiperteksta: linearna,

mrežna, hijerarhijska i čista web shema
DIZAJN INFORMACIJA
▪ danas većina web mjesta koristi miješanu hijerarhijsku
strukturu informacija koja je bliska mnogim korisnicima
weba
DIZAJN NAVIGACIJE
▪ dizajn navigacije odnosi se na oblikovanje korisničkog web sučelja s ciljem
da korisnik jednostavno kreće kroz web mjesto
▪ navigacija mora biti jasna i nedvosmislena:
▪ korisnik ne smije pogađati gdje će ga odvesti poveznica, već to mora biti jasno iz
naziva poveznice ili izgleda izbornika
▪ obavezno: povratak na početnu stranicu sa svake stranice
▪ primjer zbunjujuće navigacije (stari web Sveučilišta u Zagrebu):
Uobičajeno:
linkovi su
podcrtani

Ali ovo nije

link!

Ovo su
linkovi! Ovakvim načinom označavanja linkova
narušeno je prethodno korisničko iskustvo
DIZAJN NAVIGACIJE
▪ visok je udio neuspjeha u pronalaženju određenih
informacija na webu i izvršavanja određenih zadataka
▪ istraživanja pokazuju da mali broj ispitanika (42%)
pronalazi zadanu web stranicu krećući od početne web
stranice

▪ postoji nekoliko pristupa dizajniranju web sučelja i

nekoliko različitih navigacijskih modela
NAVIGACIJA: DIZAJN WEB SUČELJA

Web sučelja
Tekstualna Grafička web
bazirana na
web sučelja sučelja
metaforama
NAVIGACIJA: DIZAJN WEB SUČELJA
▪ tekstualno
orijentirana
web sučelja

▪ http://haw.nsk.hr
NAVIGACIJA: DIZAJN WEB SUČELJA
▪ grafički
orijentirana
web sučelja

▪ http://www.joons
world.no/
NAVIGACIJA: DIZAJN WEB SUČELJA
▪ web sučelja
bazirana na
metaforama

▪ http://www.cbee
bies.com/
NAVIGACIJA: NAVIGACIJSKI MODELI
▪ lijevo
orijentiran
navigacijski
model -

▪ http://www.national
geographic.com.hr/
NAVIGACIJA: NAVIGACIJSKI MODELI
▪ vršno
orijentiran
navigacijski
model -

▪ http://www.apple.
com/
NAVIGACIJA: NAVIGACIJSKI MODELI
▪ podnožno
orijentiran
navigacijski
model

▪ http://www.thesimp
sons.com/
(2014.)
NAVIGACIJA: NAVIGACIJSKI MODELI
▪ navigacijski
model mape

▪ http://map.tzzadar.
hr/
(2014.)
NAVIGACIJA: NAVIGACIJSKI MODELI
▪ centrirani
navigacijski
model

▪ http://www.lauba.hr
NAVIGACIJA: NAVIGACIJSKI MODELI
▪ na većini web mjesta (složenih) koristi se kombinacija
različitih navigacijskih modela, npr.

▪ vršni navigacijski model često je kombiniran je s podnožnim

navigacijskim modelom ili lijevo orijentiranim navikacijskim modelom

▪ navigacijski model mape koji je na početnoj stranici ima na stranicama

niže razine vršni ili neki drugi kombinirani navigacijski model
KOMBINIRANI NAVIGACIJSKI MODELI
▪ top-oriented
i left-oriented
navigacijski Primarna

model –
navigacija

▪ http://www.mfin.hr

Sekundarna
navigacija
KOMBINIRANI NAVIGACIJSKI MODELI
▪ left-oriented i
right-oriented
navigacijski model

▪ http://www.unizg.hr
(stranice iz 2012.)
Primarna Sekundarna
navigacija navigacija
Kombinirane navigacije Sekundarna
navigacija

▪ top-oriented i
right-oriented
navigacijski
model –

Primarna
▪ http://www.ffzg. navigacija
unizg.hr/
KOMBINIRANI NAVIGACIJSKI MODELI
▪ kombinacije raznih modela navigacije – karakteristično za novinske portale

http://www.vecernji.hr/, 04/2013. http://www.vecernji.hr/, 06/2016.

KOMBINIRANI NAVIGACIJSKI MODELI
▪ kombinacije raznih modela navigacije – karakteristično za novinske portale

http://www.vecernji.hr/, 04/2018.
GRAFIČKI DIZAJN
▪ grafički ili vizualni aspekt razvoja web mjesta omogućuje prikaz cjelokupnog
sadržaja web mjesta na estetski privlačan način
▪ daje smislenost web mjestu i ima ne samo funkciju dekoracije, već i
učinkovitog prenošenja poruke
▪ najbolji je onaj pristup u kojem se vizualizacija sadržaja i navigacije
primjenjuju ovisno o situaciji
▪ grafički dizajn web mjesta treba počivati na učinkovitoj primjeni teorije boja
(karakteristike boja i načini njihovog kombiniranja)
GRAFIČKI DIZAJN: KATEGORIZACIJA
▪ sa stanovišta vizualizacije sadržaja, web mjesta najčešće
spadaju u tri kategorije:

Ilustrativna Fotorealistična Tipografska

web sučelja web sučelja web sučelja
GRAFIČKI DIZAJN: ilustrativna sučelja
▪ ilustrativna web mjesta
GRAFIČKI DIZAJN: fotorealistična sučelja
▪ fotorealistična web mjesta
GRAFIČKI DIZAJN: tipografska sučelja
▪ tipografska web mjesta
GRAFIČKI DIZAJN: prilagodba web mediju
▪ kada se dizajnira grafički aspekt web mjesta, treba voditi računa o
određenim grafičkim pitanjima s obzirom na ograničenja koja ima web kao
medij:
▪ veličina datoteke (web stranice) – dugo vrijeme učitavanja stranica glavni je
nedostatak mnogih web mjesta. Istraživanja pokazuju da bi veličina datoteke svakako
trebala biti manja od 34 KB.
▪ boje na web stranicama – nekada je broj boja na web stranicama je bio ograničen na
216 web sigurnih boja (eng. web safe color). Ako se koristila boja izvan palete web
sigurnih boja, a sustav nije podržavao prikaz te boje, on je prikazao neku približnu
boju. Danas više ne postoji to ograničenje.
GRAFIČKI DIZAJN: tipografija
▪ fontovi – obično se specificira obitelj sličnih fontova, npr. font-family: Arial, Helvetica,
sans-serif; preporuča se koristiti sistemske fontove ili online fontove poput Google
fonts.
▪ smjernice za korištenje fontova:
▪ tekst lijevo poravnat na web stranici (izbjegavati centrirani tekst, on ima specifičnu namjenu,
npr. pozivnice za vjenčanje ☺)
▪ izbjegavati korištenje previše različitih fontova, preporuka: dva do tri usklađena fonta
▪ Comic Sans nije poželjan (osim za web stranice namijenjene djeci ili stripovski orijenirane
web stranice)
GRAFIČKI DIZAJN: prilagodba ekranu
▪ rezolucija monitora i veličina vidljive regije web stranice – monitori u pravilu
prikazuju 72 točke po inču (72 dpi) pa dimenzije slika moraju biti veće ako želimo
prikazati detalje (što povlači pitanje veličine grafičke datoteke).
▪ također treba uzeti u obzir efektivnu vidljivost web stranice s obzirom na rezoluciju ekrana,
npr. za rezoluciju ekrana 1024x768 obično se dizajnira širina web stranice od 960 px
▪ prilagodljivost različitim ekranima (responsive web design)
PROGRAMSKI DIZAJN
▪ programski dizajn odnosi se na metodologije koje se koriste u razvoju
funkcionalnosti web mjesta (npr. web trgovine), a počivaju na principima
programskog inženjerstva

▪ strukturni pristup: u početku se ideja formulira i prikaže pomoću dijagrama

tijeka. Zatim se svaki dio dijagrama dalje dekomponira u zasebne elemente
poput stranica ili programskih objekata. Na taj način cijeli sustav je razbijen
na module na različitim razinama
PROGRAMSKI DIZAJN
▪ primjer strukturnog pristupa
DIZAJN MREŽE I POSLUŽITELJA
▪ korisnik percipira web mjesto ovisno o brzini učitavanja web stranica. Ako se
stranica presporo učitava (dulje od 10 sekundi), korisnik će pokušati učitati
drugu stranicu ili napustiti web mjesto.
▪ mreža gdje se nalazi web poslužitelj treba biti dizajnirana tako da podnese
promet koji se očekuje na web mjestu (internetu, intranetu ili ekstranetu).

▪ poslužitelju web mjesta treba instalirati određeni operativni sustav,

prilagoditi ga i ukloniti potencijalna uska grla (npr. spori tvrdi disk).
▪ također, treba voditi računa o troškovima administracije poslužitelja i mreže
OSTALI ASPEKTI RAZVOJA WEB MJESTA
▪ važno je voditi računa i o "psihološkoj razini" web mjesta, tj. o posjetiteljima
naših web stranica kako bi se poboljšalo njihovo korisničko iskustvo (user
experience, UX)

▪ dizajn orijentiran korisniku (user-centered design, UCD)

▪ dvije karakteristike dizajna koje se fokusiraju na korisnika i povećavaju

kvalitetu web mjesta su:
▪ upotrebljivost web stranica (web usability) - jednostavnost korištenja web stranice te
točnost obavljanja određenih zadataka na stranici
▪ pristupačnost web stranica (web accesibility) - omogućuje osobama s invaliditetom
percipiranje, razumijevanje, navigaciju i interakciju s web stranicama
KORACI IZRADE WEB STRANICA
 ANATOMIJA WEB STRANICE
Rezolucija ekrana: npr. 1024*768
▪ trend i potreba u širina web stranice: 960 px
web dizajnu:
responzivnost
(prilagodba stranice
različitim veličinama U responzivnom dizajnu pomoću CSS-a i
ekrana) mediaquery-a definira se točka prijeloma i
dizajnira se za nekoliko rezolucija, tipično za:
• mobitele (manje od 768 px),
• tablete (768-1024 px) i
• desktop ekrane (više od 1024 px)
 ANATOMIJA WEB STRANICE
Rezolucija ekrana: npr. 1024*768
▪ tipični elementi: širina web stranice: 960 px
▪ zaglavlje: naziv web
NAZIV WEB MJESTA
mjesta, logotip, slike Logo ili
u zaglavlju, navigacija slika
Zaglavlje
NASLOV WEB STRANICE<h1>
▪ središnji dio: naslov i Primarna navigacija
podnaslovi stranice, Breadcrumbs > Lokacija web stranice
Sekundarna
strukturirani sadržaj Podnaslov <h2> navigacija
Content

Podnaslov <h2>
▪ podnožje: podnožna Content
navigacija, impressum
Podnožje
TEHNIKE I ALATI U DIZAJNU WEB
STRANICA
Prezentacija koja slijedi za 10 min.
IZRADA WEB STRANICA U MS
EXPRESSION WEB-u
Upute na Moodlu