(WS11) Emanuel Blagonić: Web dizajn za nedizajnere

1,573 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,573
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
49
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

(WS11) Emanuel Blagonić: Web dizajn za nedizajnere

  1. 1. Dizajn za nedizajnere … ili stvari koje trebaju znati svi koji se bave (ili žele baviti) web dizajnom… Emanuel Blagonić – Blagonic Brothers web www.blagonic.com twitter @emanuelblagonic
  2. 2. Whitespace
  3. 4. <ul><li>Koristimo ga za naglašavanje dijelova stranica – naslova, teksta, fotografija. Poma že nam kod lakšeg „skeniranja” web stranice. </li></ul>
  4. 5. <ul><li>Whitespacea nikada nema dovoljno! </li></ul>
  5. 6. http://www.flickr.com/photos/lrargerich
  6. 7. B o j e
  7. 8. <ul><li>Što nam govore boje na semaforu? </li></ul>
  8. 9. <ul><li>Boje povezujemo s određenim akcijama. </li></ul>
  9. 10. Oprez! U redu.
  10. 11. <ul><li>Boje moraju biti USKLAĐENE (neki zaborave na ovaj dio) </li></ul>
  11. 12. <ul><li>Odaberite boje prema tematici stranice i prema vizualnom identitetu. </li></ul>
  12. 13. <ul><li>Jeste li znali da… </li></ul>
  13. 14. <ul><li>8% muškaraca i 0.4% žena ne prepoznaje boje  </li></ul>
  14. 15. <ul><li>Savjet: Pripazite na kontrast. </li></ul>Dobar kontrast Loš kontrast
  15. 16. <ul><li>http://www.colorschemer.com </li></ul><ul><ul><li>Mnoštvo predefiniranih nijansi, a postoji i iPhone aplikacija </li></ul></ul><ul><li>http://kuler.adobe.com </li></ul><ul><ul><li>Tisuće kombinacija, odličan online alat za definiranje vlastitih paleta boja </li></ul></ul>
  16. 17. Mreža (eng. Grid)
  17. 19. <ul><li>Mreža se koristi za pozicioniranje elemenata poput sadržaja i sekundarnog sadržaja. </li></ul>
  18. 20. <ul><li>Mreža je važna jer olakšava i ubrzava razvoj, a posjetitelj se lakše snalazi na stranici. </li></ul>
  19. 21. <ul><li>http://960.gs </li></ul><ul><ul><li>Najpoznatija mreža koja se koristi u web dizajnu </li></ul></ul>
  20. 22. Korisničko sučelje
  21. 23. <ul><li>Prilagodite ga ciljanoj skupini. </li></ul>
  22. 24. Korisničko sučelje za touch-screen aplikaciju POS Sector
  23. 25. <ul><li>Sučelje je osnova dobrog korisničkog iskustva i ono mora biti konzistentno. </li></ul>
  24. 26. <ul><li>Brzi savjeti… (jer nemamo puno vremena) </li></ul>
  25. 27. <ul><li>Logotip pozicioniran u lijevom dijelu </li></ul><ul><li>U navigaciji staviti link na početnu stranicu </li></ul><ul><ul><li>Ako nema mjesta za link, stavite simbol „kuće” </li></ul></ul><ul><li>Linkovi u navigaciji jednostavni za kliknuti </li></ul>
  26. 28. Podijelite stranicu na smislene cjeline.
  27. 29. Pripazite na strukturu i veličinu naslova.
  28. 30. <ul><li>Istaknite link na mapu stranica </li></ul><ul><li>Postavite uočljivo polje za pretraživanje </li></ul><ul><li>Koristite ikone za prikaz dijelova stranica gdje je to moguće </li></ul><ul><ul><li>Kontakt, broj telefona, sitemap </li></ul></ul><ul><li>Elemente poput slika koje se povećavaju, dodatno istaknite ikonom na :hover </li></ul>
  29. 31. Najvažnije informacije istaknite na početnoj stranici.
  30. 32. <ul><li>Što napraviti kada nas klijent ne želi poslušati? (i to se događa…) </li></ul>
  31. 33. <ul><li>Internet stranicu ne stvarate za sebe i svoju ženu/mamu/djeda, već za posjetitelja! </li></ul>
  32. 34. Web forme
  33. 35. <ul><li>Koristite iste stilove za sva polja </li></ul><ul><ul><li>INPUT, TEXTAREA, SELECT, … </li></ul></ul>
  34. 36. <ul><li>Duže forme prelomite na način da podaci budu grupirani u smislene cjeline </li></ul>
  35. 37. <ul><li>Jasno pokažite koja su polja obavezna i gdje je nastala greška. </li></ul>
  36. 38. <ul><li>Povežite LABEL i INPUT </li></ul><ul><ul><li>Kada korisnik klikne na naziv, treba mu se označiti povezano polje </li></ul></ul><ul><li><label for=&quot;name&quot;>Name</label> <input name=&quot;name&quot; type=&quot;text&quot; class=&quot;text&quot; id=&quot;name&quot; /> </li></ul>
  37. 39. <ul><li>Nemojte zaboraviti na :focus i :hover </li></ul><ul><li>.text { </li></ul><ul><li>border:1px solid #aaa; </li></ul><ul><li>background:#eee; </li></ul><ul><li>color:#333; </li></ul><ul><li>padding:5px; </li></ul><ul><li>font-family:Arial, Helvetica, sans-serif; </li></ul><ul><li>} </li></ul><ul><li>.text:focus { </li></ul><ul><li>border:1px solid #888; </li></ul><ul><li>background:#ddd; </li></ul><ul><li>color:#111; </li></ul><ul><li>} </li></ul><ul><li>.text:hover { border:1px solid #999 } </li></ul>
  38. 40. <ul><li>Stilizirajte dugme za slanje </li></ul><ul><li>.button { </li></ul><ul><li>font-size:24px; </li></ul><ul><li>font-weight:bold; </li></ul><ul><li>color:#ddd; </li></ul><ul><li>background:#666; </li></ul><ul><li>padding:15px 30px; </li></ul><ul><li>display:inline-block; </li></ul><ul><li>cursor:pointer; </li></ul><ul><li>text-decoration:none; </li></ul><ul><li>border:0; </li></ul><ul><li>} </li></ul><ul><li>.button:hover { </li></ul><ul><li>background:#444; </li></ul><ul><li>color:#fff; </li></ul><ul><li>text-decoration:none; </li></ul><ul><li>} </li></ul>
  39. 41. Tipografija
  40. 42. <ul><li>Tipografija naglašava sadržaj. </li></ul>
  41. 43. http://lostworldsfairs.com/moon/
  42. 44. <ul><li>Web Safe fontovi (Arial, Georgia, …) su sigurni … ali dosadni. </li></ul>
  43. 45. Google Web Fonts na http://twar.blagonic.com
  44. 46. <ul><li>Iz prve ruke… </li></ul><ul><li>Typekit </li></ul><ul><ul><li>http://typekit.com/ </li></ul></ul><ul><li>Google Web Fonts </li></ul><ul><ul><li>http://www.google.com/webfonts </li></ul></ul><ul><ul><li>http://www.google.com/webfonts/preview </li></ul></ul>
  45. 47. <ul><li>Odabir tipografije ključan je za kvalitetnu prezentaciju sadržaja. Pažljivo odaberite fontove. </li></ul>
  46. 48. <ul><li>Nemojte koristiti Comic Sans! </li></ul>
  47. 49. Ako želite izgledati ozbiljno…
  48. 50. <ul><li>… ali ni Times New Roman. </li></ul>
  49. 51. Ikone, fotografije i ilustracije
  50. 53. <ul><li>Uložite u kvalitetne ikone i fotografije </li></ul><ul><li>Ako imate ograničena sredstva postoje besplatni setovi s ikonama… </li></ul><ul><ul><li>Icon Sweets, Glyphis, Picto Foundry, … </li></ul></ul><ul><li>… i fotografijama </li></ul><ul><ul><li>http://www.sxc.hu/ </li></ul></ul>
  51. 54. <ul><li>No, nemojte zaboravite provjeriti uvjete korištenja! </li></ul>
  52. 55. Kombinirajte ikone i fotografije kako bi naglasili sadržaj vaše stranice…
  53. 56. <ul><li>… ali nemojte pretjerivati sa „umjetnim” i „nerealnim” fotografijama nasmiješenih poslovnih ljudi… </li></ul>
  54. 57. <ul><li>Kako izgleda dobro korištenje fotografija, ilustracija i ikona… </li></ul>
  55. 59. <ul><li>Prikaz stranice s isključenim i uključenim slikama… Razlika kao dan i noć! </li></ul>
  56. 60. Pitanja (i odgovori)
  57. 61. Hvala! email [email_address] twitter @emanuelblagonic

×