GIMNAZIJA

Informatika

ANALIZA WEB SJEDITA

 SADRAJ

1. UVOD.....................................................................................................................................3
2. PROBLEMATIKA..................................................................................................................3
3. RAZRADA.............................................................................................................................3
3.1. BOJA....................................................................................................................................3
3.2. SLIKE..................................................................................................................................4
3.3. GUMBI................................................................................................................................6
3.4. NAVIGACIJA......................................................................................................................7
4. ZAKLJUAK.........................................................................................................................8
5. POPIS SLIKA.........................................................................................................................8

2
1.UVOD

Web dizajn je proces izrade i razvoja web sjedita (web site) koji ukljuuje osmiljavanje,
koncept, izradu i odravanje istog. Web dizajn treba utjeloviti, prenositi i promovirati ukupne
ciljeve web sjedita kao i naglaavati funkcionalnost istog. Dizajn web stranice (eng. web
page) treba biti privlaan i atraktivan istodobno omoguavajui korisnicima percepciju
odnosno koritenje sadraja. Dizajn treba biti spona izmeu korisnika i informacija na
stranici. Treba omoguiti korisnicima prepoznavanje svake stranice kao dio jedne cjeline (web
sjedita) i jednostavno koritenje navigacije web stranice. Konano, web dizajn treba
maksimalno iskoristiti naela i principe web upotrebljivosti i vizualnog dizajna. Web sjedita
se dijele po odreenim kriterijima, npr. podjela na osnovi izgleda ili podjela po svrsi. Bitan je
nain na koji biramo boje, slike, gumbe, navigaciju i dr.

2. PROBLEMATIKA
Zanima nas kako izgledaju dobra, odnosno loa web sjedita. to web sjedite mora imati
kako bismo ga nazvali dobrim? Koji elementi najvie utjeu na to?

3. RAZRADA
Uzevsi u obzir objektivne kriterije svakog dobrog web sjedita, odabrala sam kao primjer web
sjedite www.vichy.hr. To je sjedite za poslovanje jer privlai potencijalne kupce francuske
kozmetike. Za primjer loeg web sjedita uzela sam www.dpgraph.com. To je sjedite 3D
programa za matematike i fizike vizaulizacije.

3.1. BOJA
Vichy
Dizajner je uskladio tekst s pozadinom. Napravio je najbolju kombinaciju, odnosno crni/sivi
tekst na bijeloj podlozi. Takvim postupkom privlai posjetitelje jer stranica izgleda
sofisticiranije.
Slika 1 dobar odnos pozadine i teksta

3
DPGraph
Pozadina se sastoji od animacija koje se cijelo vrijeme okreu i oduzimaju panju. Sve je
puno arenih boja koje odbijaju korisnika. Posjetitelj se ne moe koncentirati na tekst jer mu
koncentraciju oduzimaju mnogobrojne slike koje rotiraju u razliitim smjerovima.

Slika 2 lo odnos pozadine i teksta

Slika 3 sitan tekst

3.2. SLIKE

Vichy
Uz svaki tekst dolazi grafiki prikaz kako bismo mogli vizualizirati ono o emu tekst govori.
Logotip nam omoguava snalaenje, odnosno povratak na poetnu stranicu pritiskom na
njega.

Slika 4 dobar logotip

DPGraph

4
DPGraph je napisano obinim fontom bijele boje. Pritiskom na njega ne vraamo se na
poetku stranicu.

Slika 5 lo logotip

Vichy
Slike su kvalitetne, odnose se na jedan proizvod. Lako je proitati to na proizvodu pie. Uz
svaki opis proizvoda dolazi slika.

DPGraph
Moda na prvi pogled ne izgleda loe. No, u stvarnosti se te sve slike vrte u razliitim
smjerovima. Posjetitelj poeli napustiti stranicu istog trena.

Slika 6 dobra slika

Slika 7 loa slika

Vichy
esto se koriste strelice za pomak (na drugi proizvod).
5
Slika 6 - metafora

DPGraph
Ne koriste se metafore.

Vichy (dodatan plus)

Posjetitelji mogu ocijeniti proizvod i napisati svoje miljenje o tome.

Slika 8 mogunost recenzije

Slika 7 mogunost vlastitog
miljenja

3.3. GUMBI

Gumbi nam omoguavaju snalaenje na blogu. Bitno je da se gumb nekako promijeni kada ga
stisnemo.

Vichy (dodatan plus)

Uglavnom pravilo glasi da se pritisnuti gump promijeni na nain da postane svjetliji za razliku
na ostale gumbe. Ovdje se gumb podrcta, a svi ostali sadraji na toj stranici se zasjene, jedino
je padajui izbornik naglaen. To smatram jo boljim nainom.

Slika 11 aktivan gumb

6
 DPGraph
Gumbi ne postoje. Postoje samo linkovi.

Slika 9 odsutnost gumbiju

3.4. NAVIGACIJA

Navigacija nam pokazuje gdje smo u odreenom trenutku i osigurava na povratak na poetnu
stranicu.
Vichy

Slika 10 breadcrump navigacija

Slika 11 navigacija

Padajui su izbornici najee popraeni slikama.

Slika 12 padajui izbornik

7
Postoji trailica koja nam omoguuje promalazak najblie ljekarne u kojoj moemo pronai
Vichy proizvode.

Slika 13 - trailica
DPGraph
Navigacija ne postoji.

4. ZAKLJUAK

Smatram da je www.vichy.hr vrlo kvalitetno web sjedite. Ono to ga ini jo posebnijim je

odstupanje od pravila, odnosno individualnost. On ima svoj poseban dizajn koji pozitivno
djeluje na svakog kupca. Kvalitetno web sjedite nas uvjerava i u kvalitetu nekog proizvoda.
Dobro je to svaki kupac koji je koristio odreen proizvod moe napisati recenzije o njemu
kako bi se drugi lake odluili za odreen proizvod. Sjeditu www.dpgraph.com treba dosta
dorade. Nedostaje mu osnovni elementi poput navigacije, gumbiju, logotipa i dr. Smatram da
bi svaka tvrtka trebala imati kvalitetno web sjedite jer to puno govori o njenoj ozbiljnosti i
kvaliteti ponude.

5. POPIS SLIKA
Slika 1 dobar odnos pozadine i teksta......................................................................................3
Slika 2 lo odnos pozadine i teksta..........................................................................................4
Slika 3 sitan tekst.....................................................................................................................4
Slika 4 dobar logotip................................................................................................................4
Slika 5 lo logotip....................................................................................................................5
Slika 6 dobra slika....................................................................................................................5
Slika 7 loa slika......................................................................................................................5
Slika 8 metafora.......................................................................................................................6
Slika 9 mogunost recenzije....................................................................................................6
Slika 10 mogunost vlastitog miljenja...................................................................................6
Slika 11 akitvan gumb..............................................................................................................6
Slika 12 odsutnost gumbiju......................................................................................................7
Slika 13 breadcrump navigacija...........................................................................................7
Slika 14 navigacija...................................................................................................................7
Slika 15 padajui izbornik.......................................................................................................7
Slika 16 trailica......................................................................................................................8

8
9