Your SlideShare is downloading. ×
0
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Analiza_web_sjedista
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Analiza_web_sjedista

454

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
454
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
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. Powerpoint Templates Analiza web sjedišta Ivana Kočić Marin Muškardin Marija Prša
  • 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. Second Page Primjer dobrog dizajna
  • 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. 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. Second Page Dizajn informacija Ways to Shop nudi kreativne načine kupovine : Colors , Treasury , Pounce , Shop Local , Time Machine , Gift Ideas ...
  • 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. Second Page Dizajn informacija <ul><li>Mješovita hijerarhijska struktura web sjedišta </li></ul><ul><li>Breadcrumb navigacija </li></ul>
  • 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. Second Page Dizajn informacija Web sjedište je personalizirano :
  • 11. Second Page Grafički dizajn <ul><li>jednostavan i skladan dizajn </li></ul><ul><li>Korištene boje: </li></ul>
  • 12. Second Page Linkovi Neposjećeni: Posjećeni: Aktivni:
  • 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. Second Page Slike
  • 15. Second Page
  • 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. 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. Second Page Metafore
  • 19. Second Page Metafore
  • 20. Second Page Dizajn navigacije -Dobro osmišljena
  • 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. Second Page Dodatna navigacija Elementi dodatne navigacije nalaze se i na stranici s proizvodom
  • 23. Second Page Pretraživanje - Pretraživanje radi precizno
  • 24. Second Page Padajući izbornik
  • 25. Second Page Breadcrumb navigacija
  • 26. Second Page Tagovi
  • 27. Second Page Svaka stranica ima svoj naziv:
  • 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. Second Page Primjeri
  • 30. Second Page Primjeri
  • 31. Second Page Primjeri
  • 32. Second Page Thumbnails
  • 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. Second Page Pop-up prozori
  • 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. Second Page Flash
  • 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. Second Page Dizajn informacija Na početnoj stranici: -vijesti (od novijih prema starijima) -prognoza i video vijesti
  • 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. 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. Second Page Tekst Gramatički i stilski netočan -dvostruka velika i mala slova -različite boje
  • 42. Second Page Tekst Gramatički i stilski netočan -dvostruka velika i mala slova
  • 43. Second Page Grafički dizajn -Puno boja -Dojam različitih površina stola
  • 44. Second Page Grafički dizajn -Prekrivena oznaka novosti
  • 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. Second Page Linkovi -Nekonzistentnost
  • 47. Second Page Dizajn sučelja Može se podijeliti u tri dijela: -vijesti -navigacija -televizija za marketing
  • 48. Second Page Televizija - metafora Loša prilagodba logotipa
  • 49. Second Page Metafore
  • 50. Second Page Dizajn navigacije -šarena -zbunjujuća -loše izvedena - neuredna
  • 51. Second Page Dizajn navigacije -nedosljedna
  • 52. Second Page Dizajn navigacije -nedosljedna
  • 53. Second Page Multimedija -video snimke Slike: -.JPEG format -Bez alt teksta -nisu komprimirane
  • 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. Second Page Tehničke i ostale karakteristike Stranica je: -neuredna -puna grešaka
  • 56. Second Page Tehničke i ostale karakteristike Neke od grešaka:
  • 57. Second Page Izgled u preglednicima
  • 58. Second Page Izgled u preglednicima Promjene rezolucije sa 1280 x 800 na 800x600 ili 1024x768 - pojava scrollbara
  • 59. Second Page Ostalo... -JavaScript(prognoza vremena) HTML (okviri i tablice) CSS Facebook grupa
  • 60. Second Page Analiza web sjedišta To je sve!

×