• Like
Analiza web sjedišta - Grupa 3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Analiza web sjedišta - Grupa 3

  • 951 views
Published

 

Published in Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
951
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Sveučilište u Rijeci
    Odjel za informatiku
    Analiza web sjedištaPrimjeri dobrog i lošeg dizajna2. seminarski rad
    GRUPA 3:
    Falan Sandro
    Meštrović Bojan
    Moretti Andrea
    Švaglić Andrea
  • 2. Primjer dobrog dizajna: sz.ffri.hr/vodic
    Vodič za brucoše 2008./2009. godine
    Sjedište orijentirano na dokumente
    Sjedište bogato grafikom
    Informativno web sjedište
  • 3. Primjer dobrog dizajna: sz.ffri.hr/vodic
    Svrha: pomoć novim studentima u vezi studiranja na Filozofskom fakultetu i općeniti prikaz života studenata u Rijeci
    Namijenjeno je prvenstveno brucošima i studentima koji nisu iz Rijeke
  • 4. Primjer dobrog dizajna:Dizajn informacija
    Struktura: hijerarhijska - 2 razine
    Glavni elementi su kategorije:
    Informacije organizirane po vrsti
    Interakcija: pisanje komentara u "shoutboxu“
  • 5. Primjer dobrog dizajna:Grafički dizajn
    Ugodan opći vizualan dojam
    Teskt pregledan i lako čitljiv – crne boje, Calibri, 11px, poravnanje: lijevo
    Naslovi i podnaslovi naglašeni
    U svakoj glavnoj kategoriji dominira određena boja na pozadinskoj podlozi svijetlo-smeđeg drva
  • 6. Primjer dobrog dizajna:Grafički dizajn
    Kategorija u kojoj se trenutno nalazimo, promijeni boju u bijelu, a tekst se oboji bojom karakterističnom za tu kategoriju
    Aktivni linkovi su crne boje i podvučeni
  • 7. Primjer dobrog dizajna:Grafički dizajn
    Svaka kategorija ima posebno dizajniranu sliku u zaglavlju
  • 8. Primjer dobrog dizajna:Dizajn sučelja
  • 9. Primjer dobrog dizajna:Dizajn sučelja
    Za organizaciju sučelja korišten CSS - div elementi
  • 10. Primjer dobrog dizajna:Dizajn sučelja
    Širina stranica prilagodljiva
    Stranica je centrirana
    Većina stranica zauzima do 5 ekrana
    Obrasci sučelja za cijelo web sjedište ujednačeni
    Metafora:
  • 11. Primjer dobrog dizajna:Dizajn navigacije
    Navigacija i hiperveze jasno istaknute
    Svi elementi za navigaciju dosljedni kroz cijelo web sjedište
    U slučaju nesnalaženja postoje mapa i tražilica:
  • 12. Primjer dobrog dizajna:Dizajn navigacije
    Link na početnu stranicu preko logotipa
    Globalna navigacija: panel xtras
    Glavna navigacija: linkovi na glavne kategorije
    Sekundarna navigacija: podkategorije glavnih kategorija
  • 13. Primjer dobrog dizajna:Dizajn navigacije
    Navigacija vrh-dno:
  • 14. Primjer dobrog dizajna:Multimedija
    Hipertekst i grafika (GIF i JPG)
    Klikom na umanjene slike iznad kojih se nalazi naslov mogu se uvećati te slike
  • 15. Primjer dobrog dizajna:Tehničke i ostale karakteristike
    Sjedište optimizirano za preglednike Firefox i Operu
    HTML
    Stilski predlošci iz vanjskih datoteka, JavaScript skripte iz vanjskih datoteka
    Flash: za ne-standardne fontove
  • 16. Primjer lošeg dizajna:historianofthefuture.com
    Charles Ostman- Historian of the Future (povjesničarbudućnosti)
    Sjedište orijentirano na dokumente
    Eksperimentalno, sa nespretnom kombinacijom teksta i slike
    Osobno web sjedište
  • 17. Primjer lošeg dizajna:historianofthefuture.com
    Svrha: prezentiranje informacija o autoru i o vrsti posla kojom se bavi
    Namijenjeno autorovim kolegama znanstvenicima i ostalim korisnicima koje zanima biotehnologija i slična područja
    Opći dojam: loša navigacija, neprimjerene boje i pozadina, teško čitljiv tekst i vrlo teško snalaženje na stranici
  • 18. Primjer lošeg dizajna:Dizajn informacija
    Glavni elementi sjedišta su: Mission, Overview, Events, Content, Services, Misc., Art, Updates, Links, Future, Home
    Veliki dio sjedišta nepotpun, a neki dokumenti s hipervezama vode do nepostojećih dijelova koji su obrisani ili premješteni na drugo mjesto
    Neke od glavnih kategorija su "u izradi”:
  • 19. Primjer lošeg dizajna:Dizajn informacija
    Prezentacija sadržaja vrlo nejasna
    Naslovnica ni po čemu nije izdvojena od ostalih stranica
    Mješovita hijerarhija, broj dubina hijerarhije je teško odrediti jer ne postoje jasno određeni linkovi niti breadcrumb navigacija
    Ne postoji mogućnost traženja pomoći
  • 20. Primjer lošeg dizajna:Grafički dizajn
    Opći vizualni dojam nije ugodan: korišteno puno kričavih boja koje se u nekim dijelovima preklapaju međusobno, alii sa slikama koje su takođerjakih boja te se tekst teško čita
    Samo lijeva polovina zaslona
    Postoji mnogo naslova različitih veličina
  • 21. Primjer lošeg dizajna:Grafički dizajn
    Linkovi se razlikuju od običnog teksta po kričavo žutoj boji (ali ne svi – neki su sličniji naslovima)
  • 22. Primjer lošeg dizajna:Dizajn sučelja
    HTML i JavaScript
    Širina stranica nije fiksna: različite stranice imaju različitu širinu
    Na većim rezolucijama gotovo pola stranice prazan prostor (bilo bi dobro da je stranica centralizirana)
    Raspon većine stranica : 2-4 ekrana, osim kategorije Events koja je preduga sa oko 8 ekrana
    Glavnih elemenata na stranici ima 11 - nije u skladu s pravilom grupiranja
    Pogrešne metafore:
  • 23. Primjer lošeg dizajna:Dizajn navigacije
    Navigacija ne poštuje principe dobrog dizajna
    Primarna navigacija: sa desne strane u gornjem dijelu stranice
    Sekundarna navigacija: ne postoji
    Ne postoji pomoć u snalaženju (npr. Breadcrumbs ili pretraživanje)
  • 24. Primjer lošeg dizajna:Dizajn navigacije
    Na nekim stranicama korištena oznaka „TOP” za povratak na početak stranice, ali se gotovo i ne vidi:
  • 25. Primjer lošeg dizajna:Multimedija
    Hipertekst, grafika, zvuk, video i animacija
    JPEG, GIF, MP3, mpeg, linkovi na YouTube
    Multimedijski elementi nisu uključeni prema pravilima dobrog web dizajna:
  • 26. Primjer lošeg dizajna:Multimedija
    Primjer MP3 glazbe koja ne radi:
  • 27. Primjer lošeg dizajna:Tehničke i ostale karakteristike
    Puno linkova koji su krivo ili nisu dobro označeni te se klikom na njih otvara stranica s greškom da tražena stranica ne postoji i sl.:
  • 28. Primjer lošeg dizajna:Tehničke i ostale karakteristike
    Sjedište u potpunosti izrađeno pomoću statičkog HTML-a
    Koriste se stilski predlošci uključeni u kod stranice (tag <STYLE>) i JavaScript skripte koje se nalaze u vanjskim datotekama