Web dizajn

Prof. Dr Milena Stankovi

Mr Ivan Petkovi
Uvod
Evolucija
Web tekst, hipertekst, multimedija,
kolaborativnost
Web 2.0 aplikacije
Facebook (social networking),
Flickr (photosharing),
Youtube (videosharing),
Google maps (web mapping),
Twitter (microblogging),
Wikipedia (collaborative encyclopedia),
Dipity,..
Browsers Internet Explorer, Mozilla
Firefox, Opera, Safari, Google Chrome
W3C konzorcijum - ww.w3c.org
Web kao novi medijum
Mash-up aplikacije
http://mashable.com/2009/10/08/top-
mashups/ (slika uvod1)
http://www.programmableweb.com/popul
ar

Dizajn Web sajta je kreativan proces
One click away - Priroda Web-a je takva
da korisnik vrlo lako moe da napusti sajt
ukoliko mu nije dovoljno privukao/odrao
panju
Osnovni principi dobrog dizajna
Dve perspektive:
Upotrebljivost funkcionalnost i efikasno
predstavljanje informacija, intuitivno
korienje, blaga kriva uenja
Estetika dopadljiv izgled sajta,
konzistentnost strana, uspostavljanje
kredibiliteta dizajnom
Faze izrade dizajna Web sajta
w
i
r
e
f
r
a
m
e

p
s
d

h
t
m
l

Faze izrade dizajna Web sajta
Faze:
Analiza korisnikih zahteva
Projektovanje interakcije (interaction design) -
Intuitivna navigacija, lakoa korienja sajta
Projektovanje informacija (information design)
sadraj koji uspeno prenosi poruku
Izrada grafikih elemenata dizajn treba da
privue i zadri korisnika sajta
Prebacivanje grafikog dizajna u xHTML, CSS i
javascript (cutting)


Rezultat prve tri faze je Web site
wireframe, etvrte grafiki fajl (npr. Adobe
Photoshop psd fajl) i zadnje faze traeni
xHTML+CSS+JS.
Projektovanje informacija se kasnije radi i
za konkretne strane
Analiza korisnikih zahteva
Prikupljanje korisnikih zahteva
Utvrivanje namene sajta (blog, e-
commerce,...)
Odreivanje ciljne grupe korisnika

Projektovanje interakcije
Cilj je efikasno korienje Web
sajta/aplikacije user-friendly interfejs
Intuitivna i jednostavna navigacija:
Mogunost ponitavanja zadnje akcije (undo),
Back dugme,
Uvek vidljiva trenutna pozicija korisnika na
sajtu (npr. Breadcrumbs),
to jednostavniji nain da se dodje sa strane
A na stranu B
Projektovanje interakcije
Blaga kriva uenja (to korisnik treba vie
da ui da koristi sajt to je vea
verovatnoa da e napustiti sajt).
Fitt-ov zakon: Vreme za uoavanje
traenog elementa je funkcija razdaljine
od tog elementa i njegove veliine.
Vrlo jednostavan ali i dosta ignorisan
princip.
Projektovanje interakcije
Primeri Fittovog zakona:
Koristiti vee elemente za vanije funkcije (tag
clouds, veliko checkout dugme,...)
Staviti dugme za kupovinu odmah pored slike
samog proizvoda

Projektovanje informacija
Priprema informacija tako da ih korisnici
efikasno i efektivno koriste
Projektovanjem se mnogo jasnije prenosi
znaenje kompleksnih podataka
Cilj je kreirati strukturu informacija koja e
odgovarati ciljnoj grupi korisnika
Primer: prezentacija proizvoda, a u dnu
strane je footer sa informacijama kako
kupiti taj proizvod, slini proizvodi itd.

Projektovanje informacija
Izbegavati suvoparan tekst, ve ga podeliti
u odeljke ili na vie strana, naglasiti
naslove, i ubaciti prateu multimediju
(slike, video).
Web site wireframe
Uproeni (konceptualni) model Web
strane ilustruje najvanije elemente
korisnikog interfejsa
Wireframe je koristan pri projektovanju
interakcije i informacija
Olakava komunikaciju sa naruiocem
posla
Laka izrada skica olovkom ili nekim
alatom (MS Visio, Axure,...)
Web site wireframe
Prvi korak pri
izradi dizajna, pre
crtanja detaljnih
grafikih
elemenata

Tipovi dizajna Web strane
Fleksibilan (Liquid, fluid) dizajn prati
promenu dimenzija prozora
Fiksni -deo sa sadrajem je fiksnih
dimenzija, bez obzira na dimenzije prozora
Hibridni npr. fiksni sidebar, a fleksibilna
glavna kolona
Atipian
Grafiki dizajn
Adobe Photoshop standard za grafiki dizajn
Slojevi (layer-i) hierarhijski organizovani u
direktorijume i poddirektorijume
Rezultat PSD fajl, odakle se eksportuju PNG,
JPG ili GIF slike
PNG (PNG-8) i GIF podravaju transparenciju
Odreivanje boja
Odrediti dominantnu boju, kao i paletu do
6 boja koje e se koristiti

Odreivanje boja online alati
http://www.colorcombos.com/
http://www.hypergurl.com/colormatch.ph
p
http://colorschemedesigner.com/

Organizacija
Izdvojiti glavne celine i napraviti
direktorijume (npr. Header, main, footer)
Glavne direktorijume dalje deliti na
poddirektorijume
Header
Main
Left
column
Navigation
Events
Main
column
Right
column
Footer
(pogledati Web programiranje Dizajn
interfejsa)