Dizajn za nedizajnere…ili stvari koje trebaju znati svi koji se bave

(ili žele baviti) web dizajnom…

Emanuel Blagonić – Blagonic Brothers

web www.blagonic.comtwitter @emanuelblagonic

Whitespace

Koristimo ga za naglašavanje dijelova stranica – naslova, teksta,

fotografija. Pomaže nam kod lakšeg „skeniranja” web stranice.

Whitespacea nikadanema dovoljno!

http://www.flickr.com/photos/lrargerichhttp://www.flickr.com/photos/lrargerich

Boje

Š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="name">Name</label><input name="name" type="text" class="text" id="name" />

• 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 emanuel@blagonic.comtwitter @emanuelblagonic