Analiza_web_sjedista

626 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
626
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Analiza_web_sjedista

  1. 1. Powerpoint Templates Analiza web sjedišta Ivana Kočić Marin Muškardin Marija Prša
  2. 2. Second Page Primjer dobrog dizajna Etsy Poslovno web sjedište namijenjeno za kupoprodaju različiti h ručno izrađeni h proizvod a
  3. 3. Second Page Primjer dobrog dizajna
  4. 4. Second Page Dizajn informacija <ul><li>Na vrhu svake stranice nalaze se linkovi: </li></ul><ul><li>Buy </li></ul><ul><li>Sell </li></ul><ul><li>Community </li></ul><ul><li>Help </li></ul>
  5. 5. Second Page Dizajn informacija <ul><li>Na dnu svake stranice nalaze se linkovi: </li></ul><ul><li>Regional Settings </li></ul><ul><li>About </li></ul><ul><li>Contact </li></ul><ul><li>Press </li></ul><ul><li>Media Resources </li></ul><ul><li>Developers </li></ul><ul><li>Careers </li></ul><ul><li>Terms </li></ul><ul><li>Privacy </li></ul><ul><li>Copyright </li></ul>
  6. 6. Second Page Dizajn informacija Ways to Shop nudi kreativne načine kupovine : Colors , Treasury , Pounce , Shop Local , Time Machine , Gift Ideas ...
  7. 7. Second Page Dizajn informacija <ul><li>Blok Categories </li></ul><ul><li>Etsy Finds </li></ul><ul><li>Handpicked Items </li></ul><ul><li>Featured Seller </li></ul><ul><li>Recent Blog Posts </li></ul><ul><li>Recently Listed Items </li></ul><ul><li>Svima zajednička opcija </li></ul><ul><li>See more </li></ul>
  8. 8. Second Page Dizajn informacija <ul><li>Mješovita hijerarhijska struktura web sjedišta </li></ul><ul><li>Breadcrumb navigacija </li></ul>
  9. 9. Second Page Dizajn informacija <ul><li>I nformacije su organizirane : </li></ul><ul><li>kronološki ( Recently Listed Items ) </li></ul><ul><li>abecedno ( Categories ) </li></ul>
  10. 10. Second Page Dizajn informacija Web sjedište je personalizirano :
  11. 11. Second Page Grafički dizajn <ul><li>jednostavan i skladan dizajn </li></ul><ul><li>Korištene boje: </li></ul>
  12. 12. Second Page Linkovi Neposjećeni: Posjećeni: Aktivni:
  13. 13. Second Page Tekst <ul><li>Crna boja </li></ul><ul><li>font Arial </li></ul><ul><li>Obostrano poravnanje </li></ul><ul><li>Veličina: </li></ul><ul><ul><li>Linkovi 12 p x </li></ul></ul><ul><ul><li>pojedina kategorija 16 px </li></ul></ul><ul><ul><li>breadcrumb navigacija 10 px </li></ul></ul><ul><ul><li>naslovi proizvoda 18 px </li></ul></ul><ul><ul><li>tekst ispod slike proizvoda 12 px </li></ul></ul>
  14. 14. Second Page Slike
  15. 15. Second Page
  16. 16. Second Page Dizajn sučelja <ul><li>CSS </li></ul><ul><li>osam blokova: </li></ul><ul><ul><li>blok sa gumbima , pretraživačem i logom </li></ul></ul><ul><ul><li>Categories </li></ul></ul><ul><ul><li>W ays to Shop </li></ul></ul><ul><ul><li>Etsy Finds </li></ul></ul><ul><ul><li>Handpicked Items </li></ul></ul><ul><ul><li>Featured Seller </li></ul></ul><ul><ul><li>Recent Blog , </li></ul></ul><ul><ul><li>Recently Listed Items </li></ul></ul>Zamjerka: About i Contact na dnu stranice
  17. 17. Second Page Sadržaj <ul><li>š irina dijela stranice sa sadržajem iznosi 760 piksela </li></ul><ul><li>stranice su normalne dužine </li></ul><ul><li>Obrasci sučelja nisu ujednačeni: </li></ul><ul><li>Izgled ovisi o sadržaju koji nas zanima </li></ul><ul><li>V elik broj elemenata na sjedištu: </li></ul><ul><li>nisu grupirani po pravilu da ih ima 7(+/-2) </li></ul><ul><li>Grupiranje elemenata u svrsi lakšeg snalaženja </li></ul>
  18. 18. Second Page Metafore
  19. 19. Second Page Metafore
  20. 20. Second Page Dizajn navigacije -Dobro osmišljena
  21. 21. Second Page Dizajn navigacije <ul><li>Primjer sekundarne navigacije </li></ul><ul><li>Podkategorije od kategorija razlikuju </li></ul><ul><li>po uvlačenju </li></ul>
  22. 22. Second Page Dodatna navigacija Elementi dodatne navigacije nalaze se i na stranici s proizvodom
  23. 23. Second Page Pretraživanje - Pretraživanje radi precizno
  24. 24. Second Page Padajući izbornik
  25. 25. Second Page Breadcrumb navigacija
  26. 26. Second Page Tagovi
  27. 27. Second Page Svaka stranica ima svoj naziv:
  28. 28. Second Page Multimedija <ul><li>Puno multimedije: </li></ul><ul><li>Galerije s kategorijama </li></ul><ul><li>Video </li></ul><ul><li>Live stream </li></ul><ul><li>Aplikacije u Flashu </li></ul><ul><li>... </li></ul>
  29. 29. Second Page Primjeri
  30. 30. Second Page Primjeri
  31. 31. Second Page Primjeri
  32. 32. Second Page Thumbnails
  33. 33. Second Page Tehničke i ostale karakteristike Nema poteškoća i grešaka Jednako funkcionira u tri preglednika Korišten: PHP JavaScript Flash
  34. 34. Second Page Pop-up prozori
  35. 35. Second Page Web 2.0 <ul><li>Facebook, </li></ul><ul><li>Twitter </li></ul><ul><li>Kaboodle </li></ul><ul><li>Tumblr </li></ul><ul><li>StumbleUpon </li></ul><ul><li>del.icio.us </li></ul><ul><li>Meetup </li></ul><ul><li>iTunes </li></ul><ul><li>Flickr </li></ul><ul><li>YouTube </li></ul><ul><li>Blip.tv </li></ul><ul><li>MySpace </li></ul>Podržan je RSS
  36. 36. Second Page Flash
  37. 37. Second Page Primjer lošeg dizajna RiRoCk!CLimbiNG - statičko -o rijentirano je na dokumente - prema svrsi spada u informativna web sjedišta. Web stranica športsko penjačkog kluba
  38. 38. Second Page Dizajn informacija Na početnoj stranici: -vijesti (od novijih prema starijima) -prognoza i video vijesti
  39. 39. Second Page Dizajn informacija <ul><li>I nformacije su organizirane : </li></ul><ul><li>Kronološki (Arhiva) </li></ul><ul><li>Prostorno (Rirock penjališta) </li></ul>
  40. 40. Second Page Dizajn informacija <ul><li>Jezik sjedišta: </li></ul><ul><li>Hrvatski </li></ul><ul><li>Engleski (Rirock penjališta) </li></ul>
  41. 41. Second Page Tekst Gramatički i stilski netočan -dvostruka velika i mala slova -različite boje
  42. 42. Second Page Tekst Gramatički i stilski netočan -dvostruka velika i mala slova
  43. 43. Second Page Grafički dizajn -Puno boja -Dojam različitih površina stola
  44. 44. Second Page Grafički dizajn -Prekrivena oznaka novosti
  45. 45. Second Page Font <ul><li>- Veličina, tip i boja fonta nisu konzistentni </li></ul><ul><li>comic sans </li></ul><ul><li>Naslovi vijesti nisu primjereno istaknuti </li></ul>
  46. 46. Second Page Linkovi -Nekonzistentnost
  47. 47. Second Page Dizajn sučelja Može se podijeliti u tri dijela: -vijesti -navigacija -televizija za marketing
  48. 48. Second Page Televizija - metafora Loša prilagodba logotipa
  49. 49. Second Page Metafore
  50. 50. Second Page Dizajn navigacije -šarena -zbunjujuća -loše izvedena - neuredna
  51. 51. Second Page Dizajn navigacije -nedosljedna
  52. 52. Second Page Dizajn navigacije -nedosljedna
  53. 53. Second Page Multimedija -video snimke Slike: -.JPEG format -Bez alt teksta -nisu komprimirane
  54. 54. Second Page Multimedija slike: -.JPEG format -Bez alt teksta -ista ili slična organizacija slika u Rirock Penjališta i Compadres Metafora “Click”
  55. 55. Second Page Tehničke i ostale karakteristike Stranica je: -neuredna -puna grešaka
  56. 56. Second Page Tehničke i ostale karakteristike Neke od grešaka:
  57. 57. Second Page Izgled u preglednicima
  58. 58. Second Page Izgled u preglednicima Promjene rezolucije sa 1280 x 800 na 800x600 ili 1024x768 - pojava scrollbara
  59. 59. Second Page Ostalo... -JavaScript(prognoza vremena) HTML (okviri i tablice) CSS Facebook grupa
  60. 60. Second Page Analiza web sjedišta To je sve!

×