(WS11) Emanuel Blagonić: Web dizajn za nedizajnere
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • 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
1,545
On Slideshare
1,543
From Embeds
2
Number of Embeds
2

Actions

Shares
Downloads
43
Comments
0
Likes
0

Embeds 2

http://paper.li 1
https://twitter.com 1

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