lalala

1. Marko Dupor
Licia Ljubisavljević
Damir Vičević
Analiza web sjedišta

2. Porin – dobar dizajn

3. Porin – dizajn informacija (1/8)
 Anketa na
naslovnoj
stranici

4. Porin – dizajn informacija (2/8)
 Informacije su podjeljene u sljedeće
glavne kategorije:

5. Porin – dizajn informacija (3/8)
 Informacije na svim stranicama organiziranje su
kronološki od novijih prema starijima i na način da
posjetiteljima nude sažet pregled u određenu
novost, najavu ili događanje.

6. Porin – dizajn informacija (4/8)
 Starije informacije nalaze se na samom dnu
stranice i ne nude sažet pregled već samo
naziv vijesti/najave/događanja i taj naziv
ujedno predstavlja poveznicu na koju
posjetitelj može kliknuti i koja ga
preusmjerava na opširniji opis dotične
novosti.

7. Porin – dizajn informacija (5/8)
 Na samom dnu svih
stranica nalaze se
neke novosti koje
sadrže multimedijske
sadržaje (video ili
fotogalerije).

8. Porin – dizajn informacija (6/8)
 Na samom dnu svih stranica nalaze se i poveznice na YouTube i
društvene mreže Facebook i Twitter, te poveznica na Institut
hrvatske glazbe.

9. Porin – dizajn informacija (7/8)
 S desne strane nalaze
se 3 do 4 nasumičnih
vijesti, najava ili
događaja koji sadrže
fotografiju, opis i
poveznicu na opširniji
sadržaj.

10. Porin – dizajn
informacija (8/8)
 S desne strane u svakom
trenutku nalaze se i
rubrike Medijski
partneri, Pogledajte
još..., Utemeljitelji
Porina, Gradovi domaćini i
Partneri.

11. Porin – grafički dizajn (1/3)
 Kvalitetan raspored elemenata, te upotrebu boja koje ne iskaču iz
kompletnog ugođaja stranice.
 Opći vizualni dojam je ugodan, boje nisu napadne i ne odvraćaju
pažnju od sadržaja.
 Na samom vrhu nalazi se pretraživač sadržaja, funkcionalan i
diskretan ukoliko nam ne treba.
 Prostor ispod toga zauzima transparentni banner koji sadrži logo
(ovogodišnjeg) 19. Porina, gradove domaćine, te zgodno odbrojavanje
dana do održavanja, izvedeno preko flasha.

12. Porin – grafički dizajn (2/3)
 Glavni dio stranice je klasična kombinacija crnog na bijelom, Calibri font veličine 11 koji se
lijepo uklapa u sadržaj.
 Postoje samo dvije varijacije fonta kroz cijelu stranicu, a to je font podebljanog tipa (bold)
koji se upotrebljava ne bi li se istaklo nešto u tekstu, te plava boja fonta za poveznice.
 Glavni dio stranice je podijeljen u dva paralelna stupca, od kojih je lijevi namijenjen sadržaju
pojedine stranice, i sukladno s tim je i širi, a desni je dio za medijske
pokrovitelje, nasumične vijesti i dr.

13. Porin – grafički dizajn (3/3)
 Reklamni baneri su
diskretni te ne
odvraćaju pažnju od
sadržaja web sjedišta.

14. Porin – dizajn sučelja (1/3)

15. Porin – dizajn sučelja (2/3)

16. Porin – dizajn sučelja (3/3)
 Dio stranice u kojem se prikazuje sav sadržaj je fiksne širine i iznosi
točno 1000 px, te se ne mjenja promjenom veličine prozora web
preglednika.
 Sučelje je izvedeno kroz klasičnu upotrebu HTML-a, te CSS-a za
oblikovanje stranica.
 Krećući se kroz web sjedište, može se primjetiti da je dizajn sučelja
konzistentan, te da se za grupiranje elemenata uglavnom koristi
pravilo 7 (plus/minus 2).
 Jedina metafora na cijelom web sjedištu nalazi se na samom dnu
stranice i predstavlja poveznicu na vrh stranice.

17. Porin – dizajn navigacije (1/2)
 Navigacija se odvija podjednako preko menija na vrhu
stranice, te preko poveznica koji prate svaku pojedinu
stranicu.
 Horizontalni meni na vrhu stranice je padajući te sadrži 6
glavnih kategorija. Do dodatnih poveznica dolazi se
prelaskom strelice miša preko naziva kategorije.

18. Porin – dizajn navigacije (2/2)
 Kretanjem kroz sadržaj web sjedišta pomaže nam i
breadcrumb navigacija koja se nalazi iznad naslova
sadržaja kojeg pregledavamo.

19. Porin – multimedija (1/4)
 Primjer
fotogalerije

20. Porin – multimedija (2/4)
 Baner na vrhu koji odbrojava
dane izveden je pomoću
flash animacije.

21. Porin – multimedija (3/4)
 Primjer zvučnih datoteka

22. Porin – multimedija (4/4)
 Primjer video broja
implementiranog na
web sjedište pomoću
YouTube-a

23. Porin – tehničke karakteristike
 Web sjedište je isprobano u tri popularna web
preglednika (Mozilla Firefox, Google
Chrome, Internet Explorer) i u svakom funkcionira
odlično!!!

24. Osnovna škola Bakar – LOŠ DIZAJN

25. DIZAJN INFORMACIJA
 Informacije su
podijeljene u
kategorije:
 O nama
 Informacije
 Vijesti
 Projekti
 Dokumenti
 Korisni linkovi

26. GRAFIČKI DIZAJN (1/2)
 Sjedište je jako siromašno
grafičkim dizajnom.
 Cijelo web sjedište je sive
boje
 Tekst je pisan različitim
fontovima, ne samo u
različitim sadržajima, već i
unutar jednog nailazimo na
različit font.

27. GRAFIČKI DIZAJN (2/2)
 Elementi od kojih se
sastoji dizajn su u
najvećem dijelu
hipertekstualne
veze, pokoja slika i
kratki tekst.
 Od ponešto složenijih
elemenata tu su razne
gif animacije
smještene u kut
stranica, koje nemaju
nikakve veze sa
sadržajem.

28. DIZAJN SUČELJA (1/2)
 Sučelje, ako ga možemo uopće tako nazvati, je nepregledno i
nekonzistentno.
 Za kompletnu analizu sučelja, bilo bi potrebno analizirati svaku
pojedinu stranicu zasebno, jer je svaka drugačije organizirana.
 Ugrubo možemo podijeliti sučelje na naslovni dio na vrhu koji nam
daje informacije o trenutnoj lokaciji.

29. DIZAJN SUČELJA (2/2)
 S desne strane se nalazi meni, a središnji dio bi trebao služiti kao
prostor za sadržaj, iako je prepun linkovima i loše razmještenim
slikama.

30. DIZAJN NAVIGACIJE (1/2)
Navigacija na ovom web sjedištu nije dobro riješena. Kada se
nalazimo na bilo kojoj stranici koja nije naslovna, ne možemo reći
kojem web sjedištu ona pripada (nigdje se ne pojavljuje logo/naziv
same stranice).
Navigacija je organizirana pomoću
vertikalnog bloka, te vidimo podjelu
samo na glavne kategorije.
Pojavljuju se na svakoj stranici, uz
dodatnu poveznicu na Home
stranicu.

31. DIZAJN NAVIGACIJE (2/2)
 Ne postoje veze između
stranica jednakih
hijerarhijskih
razina, kao ni mapa
sjedišta koja bi olakšala
navigaciju.
 Sa svake podrazine na
višu razinu nije se
moguće vratiti, niti
postoji prikaz putanje
gdje se trenutno
nalazimo, već je
dostupna veza samo na
naslovnu stranicu.

32. MULTIMEDIJA
 Nisu prisutni skoro nikakvi elementi multimedije.
 Logo, baner i ostali, inače korišteni grafički elementi ne postoje.
Postoji nekoliko fotografija same škole, te učenika u pojedinim
člancima, te već spomenute nepotrebne i sadržajno nebitne gif
animacije na svakoj zasebnoj stranici.

33. TEHNIČKE I OSTALE KARAKTERISTIKE
 Web 2.0. alati ne postoje.
 “Funkcionira” u svim web preglednicima 
 Izvršni kod stranice nam otkriva lošu programersku
stranu, HTML kod je sastavljen bez ikakve "dublje"
organizacije, i jedino se on od web programerskog dijela i
koristi.

34. Kraj 
HVALA NA PAŢNJI!