• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
(WS11) Emanuel Blagonić: Web dizajn za nedizajnere
 

(WS11) Emanuel Blagonić: Web dizajn za nedizajnere

on

  • 1,402 views

 

Statistics

Views

Total Views
1,402
Views on SlideShare
1,400
Embed Views
2

Actions

Likes
0
Downloads
42
Comments
0

2 Embeds 2

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

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    (WS11) Emanuel Blagonić: Web dizajn za nedizajnere (WS11) Emanuel Blagonić: Web dizajn za nedizajnere Presentation Transcript

    • 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
    • Whitespace
    •  
      • Koristimo ga za naglašavanje dijelova stranica – naslova, teksta, fotografija. Poma že nam kod lakšeg „skeniranja” web stranice.
      • Whitespacea nikada nema dovoljno!
    • http://www.flickr.com/photos/lrargerich
    • B o j e
      • Što nam govore boje na semaforu?
      • Boje povezujemo s određenim akcijama.
    • Oprez! U redu.
      • Boje moraju biti USKLAĐENE (neki zaborave na ovaj dio)
      • Odaberite boje prema tematici stranice i prema vizualnom identitetu.
      • Jeste li znali da…
      • 8% muškaraca i 0.4% žena ne prepoznaje boje 
      • Savjet: Pripazite na kontrast.
      Dobar kontrast Loš kontrast
      • 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
    • Mreža (eng. Grid)
    •  
      • Mreža se koristi za pozicioniranje elemenata poput sadržaja i sekundarnog sadržaja.
      • Mreža je važna jer olakšava i ubrzava razvoj, a posjetitelj se lakše snalazi na stranici.
      • http://960.gs
        • Najpoznatija mreža koja se koristi u web dizajnu
    • Korisničko sučelje
      • Prilagodite ga ciljanoj skupini.
    • Korisničko sučelje za touch-screen aplikaciju POS Sector
      • Sučelje je osnova dobrog korisničkog iskustva i ono mora biti konzistentno.
      • Brzi savjeti… (jer nemamo puno vremena)
      • 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
    • Podijelite stranicu na smislene cjeline.
    • Pripazite na strukturu i veličinu naslova.
      • 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
    • Najvažnije informacije istaknite na početnoj stranici.
      • Što napraviti kada nas klijent ne želi poslušati? (i to se događa…)
      • Internet stranicu ne stvarate za sebe i svoju ženu/mamu/djeda, već za posjetitelja!
    • Web forme
      • Koristite iste stilove za sva polja
        • INPUT, TEXTAREA, SELECT, …
      • Duže forme prelomite na način da podaci budu grupirani u smislene cjeline
      • Jasno pokažite koja su polja obavezna i gdje je nastala greška.
      • 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; />
      • 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 }
      • 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;
      • }
    • Tipografija
      • Tipografija naglašava sadržaj.
    • http://lostworldsfairs.com/moon/
      • Web Safe fontovi (Arial, Georgia, …) su sigurni … ali dosadni.
    • Google Web Fonts na http://twar.blagonic.com
      • Iz prve ruke…
      • Typekit
        • http://typekit.com/
      • Google Web Fonts
        • http://www.google.com/webfonts
        • http://www.google.com/webfonts/preview
      • Odabir tipografije ključan je za kvalitetnu prezentaciju sadržaja. Pažljivo odaberite fontove.
      • Nemojte koristiti Comic Sans!
    • Ako želite izgledati ozbiljno…
      • … ali ni Times New Roman.
    • Ikone, fotografije i ilustracije
    •  
      • 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/
      • No, nemojte zaboravite provjeriti uvjete korištenja!
    • Kombinirajte ikone i fotografije kako bi naglasili sadržaj vaše stranice…
      • … ali nemojte pretjerivati sa „umjetnim” i „nerealnim” fotografijama nasmiješenih poslovnih ljudi…
      • Kako izgleda dobro korištenje fotografija, ilustracija i ikona…
    •  
      • Prikaz stranice s isključenim i uključenim slikama… Razlika kao dan i noć!
    • Pitanja (i odgovori)
    • Hvala! email [email_address] twitter @emanuelblagonic