1. Analiza web sjedišta
(primjer dobrog i lošeg dizajna)
Kolegij: Multimedijski i hipermedijski sustavi
Studentice: Mirela Hodžić, Nikolina Matić,
Aleksandra Milevoj, Nataša Volarić
2. Analiza po stavkama
• Općenite informacije
• Dizajn informacija
• Grafički dizajn
• Dizajn sučelja
• Dizajn navigacije
• Multimedija
• Tehničke i ostale karakteristike
3. Primjer dobrog dizajna
• Naziv: McDonald's
• URL: http://www.mcdonalds.hr/
• Vrsta: orijentirano na dokumente, bogato
grafikom, namjenjeno poslovanju
• Svrha i tema: pružanje informacija o poduzeću
• Korisnici: postojeći i budući gosti, potencijalni
zaposlenici
4. Dizajn informacija
• struktura je hijerarhijska
• informacije organizirane u kategorije i
podkategorije
• glavni elementi: Ponuda, Gdje smo, McCafé,
Kvaliteta, Rođendani, Obitelj&djeca, Sport, U
zajednici
• elementi globalne navigacije: Newsletter,
Najčešća pitanja, O nama, Posao, Press,
Kontakt
6. Grafički dizajn (2)
• logotip: zaobljeno žuto slovo M na crvenoj
pozadini
• odabir boja u skladu s pravilima dobrog
dizajna
• font: Arial
• slike su prikazane pomoću fancybox-a
• mogućnost gledanja video zapisa: lightbox
i Adobe Flash player
8. Dizajn sučelja (2)
• promjenom rezolucije izgled web sjedišta
se prilagođava ekranu
• korišten broj slika/videa je prema pravilu
7+/-2
• raspodjela elemenata pomoću div tagova
• stiliziranje pomoću CSS-a
• korištene metafore
11. Multimedija
• slike
(JPG, PNG, GIF), animacije, hipertekst i
video zapisi
• prelaskom kursora miša podrhtavanje
logotipa i slide-ova za odabir ispod slidera
12. Tehničke i ostale karakteristike
• sjedište izrađeno u WordPress-u
• korišteni su HTML, CSS, PHP i JavaScript
• sjedište ispravno funkcionira u nekoliko
isprobanih pretraživača
• Web 2.0 alati: Facebook
13. Primjer lošeg dizajna
• Naziv: Hrvatska udruga za zaštitu
potrošača
• URL: http://www.huzp.hr/
• Vrsta: orijentirano na dokumente, fokusirano na
tekst, informativno
• Svrha i tema: pružanje informacija potrošačima
• Korisnici: građani RH
14. Dizajn informacija
• informacije prikazane tablicama
• česte gramatičke i pravopisne pogreške
• nepotrebno isticanje kontakt informacija
• postoji samo jedna navigacija- teško
razlučiti glavne od sekundarnih dijelova
• sjedište organizirano hijerarhijski
• ne nudi mogućnost interakcije
16. Grafički dizajn (2)
• pozadinska boja: plavo-sivi gradient
• font Arial
• neusklađene veličine oblikovanja i
poravnanja
• rubovi tablica nisu skriveni- loš vizualan
dojam
• logotip je loše dizajniran
17. Dizajn sučelja
• ne prilagođava se različitim rezolucijama
• stranica podijeljena pomoću 2 okvira
• klizač za pregled navigacije
• nekoliko korištenih metafora
18. Dizajn navigacije
• navigacija u tablici
• panel
• nema poveznice na
početnu stranicu
• trenutna pozicija nije
posebno naznačena
