Upload
daliborgtgt
View
238
Download
1
Embed Size (px)
Citation preview
8/3/2019 Web Dizajn - 1 Uvod, Wire Framing
1/24
Web dizajn
Prof. Dr Milena Stankovi
Mr Ivan Petkovi
8/3/2019 Web Dizajn - 1 Uvod, Wire Framing
2/24
Uvod
8/3/2019 Web Dizajn - 1 Uvod, Wire Framing
3/24
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,..
8/3/2019 Web Dizajn - 1 Uvod, Wire Framing
4/24
Browsers Internet Explorer, MozillaFirefox, Opera, Safari, Google Chrome W3C konzorcijum - ww.w3c.org
8/3/2019 Web Dizajn - 1 Uvod, Wire Framing
5/24
Web kao novi medijum Mash-up aplikacije
http://mashable.com/2009/10/08/top-
mashups/ (slika uvod1) http://www.programmableweb.com/popul
ar
http://mashable.com/2009/10/08/top-mashups/http://mashable.com/2009/10/08/top-mashups/http://www.programmableweb.com/popularhttp://www.programmableweb.com/popularhttp://www.programmableweb.com/popularhttp://www.programmableweb.com/popularhttp://mashable.com/2009/10/08/top-mashups/http://mashable.com/2009/10/08/top-mashups/http://mashable.com/2009/10/08/top-mashups/8/3/2019 Web Dizajn - 1 Uvod, Wire Framing
6/24
Dizajn Web sajta je kreativan procesOne click away- Priroda Web-a je takva
da korisnik vrlo lako moe da napusti sajt
ukoliko mu nije dovoljno privukao/odraopanju
8/3/2019 Web Dizajn - 1 Uvod, Wire Framing
7/24
Osnovni principi dobrog dizajna
Dve perspektive: Upotrebljivost funkcionalnost i efikasno
predstavljanje informacija, intuitivnokorienje, blaga kriva uenja
Estetika dopadljiv izgled sajta,konzistentnost strana, uspostavljanjekredibiliteta dizajnom
8/3/2019 Web Dizajn - 1 Uvod, Wire Framing
8/24
Faze izrade dizajna Web sajta
wireframe
psd
html
8/3/2019 Web Dizajn - 1 Uvod, Wire Framing
9/24
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 ijavascript (cutting)
8/3/2019 Web Dizajn - 1 Uvod, Wire Framing
10/24
Rezultat prve tri faze je Web sitewireframe, etvrte grafiki fajl (npr. AdobePhotoshop psd fajl) i zadnje faze traenixHTML+CSS+JS.
Projektovanje informacija se kasnije radi iza konkretne strane
8/3/2019 Web Dizajn - 1 Uvod, Wire Framing
11/24
Analiza korisnikih zahteva
Prikupljanje korisnikih zahteva Utvrivanje namene sajta (blog, e-
commerce,...)
Odreivanje ciljne grupe korisnika
8/3/2019 Web Dizajn - 1 Uvod, Wire Framing
12/24
Projektovanje interakcije
Cilj je efikasno korienje Websajta/aplikacijeuser-friendlyinterfejs Intuitivna i jednostavna navigacija:
Mogunost ponitavanja zadnje akcije (undo), Back dugme,
Uvek vidljiva trenutna pozicija korisnika nasajtu (npr. Breadcrumbs),
to jednostavniji nain da se dodje sa straneA na stranu B
8/3/2019 Web Dizajn - 1 Uvod, Wire Framing
13/24
Projektovanje interakcije
Blaga kriva uenja (to korisnik treba vie
da ui da koristi sajt to je veaverovatnoa da e napustiti sajt).
Fitt-ov zakon:Vreme za uoavanje
traenog elementa je funkcija razdaljineod tog elementa i njegove veliine.
Vrlo jednostavan ali i dosta ignorisan
princip.
8/3/2019 Web Dizajn - 1 Uvod, Wire Framing
14/24
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
8/3/2019 Web Dizajn - 1 Uvod, Wire Framing
15/24
Projektovanje informacija
Priprema informacija tako da ih korisniciefikasno i efektivno koriste
Projektovanjem se mnogo jasnije prenosiznaenje kompleksnih podataka
Cilj je kreirati strukturu informacija koja eodgovarati ciljnoj grupi korisnika
Primer: prezentacija proizvoda, a u dnustrane je footer sa informacijama kakokupiti taj proizvod, slini proizvodi itd.
8/3/2019 Web Dizajn - 1 Uvod, Wire Framing
16/24
Projektovanje informacija
Izbegavati suvoparan tekst, ve ga podelitiu odeljke ili na vie strana, naglasitinaslove, i ubaciti prateu multimediju(slike, video).
8/3/2019 Web Dizajn - 1 Uvod, Wire Framing
17/24
Web site wireframe
Uproeni (konceptualni) model Webstraneilustruje najvanije elementekorisnikog interfejsa
Wireframe je koristan pri projektovanjuinterakcije i informacija
Olakava komunikaciju sa naruiocemposla
Laka izrada skica olovkom ili nekimalatom (MS Visio, Axure,...)
8/3/2019 Web Dizajn - 1 Uvod, Wire Framing
18/24
Web site wireframe
Prvi korak priizradi dizajna, precrtanja detaljnihgrafikihelemenata
8/3/2019 Web Dizajn - 1 Uvod, Wire Framing
19/24
Tipovi dizajna Web strane
Fleksibilan (Liquid, fluid) dizajn pratipromenu dimenzija prozora Fiksni -deo sa sadrajem je fiksnih
dimenzija, bez obzira na dimenzije prozora
Hibridni npr. fiksni sidebar, a fleksibilnaglavna kolona
Atipian
8/3/2019 Web Dizajn - 1 Uvod, Wire Framing
20/24
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
8/3/2019 Web Dizajn - 1 Uvod, Wire Framing
21/24
Odreivanje boja
Odrediti dominantnu boju, kao i paletu do6 boja koje e se koristiti
http://www.colorcombos.com/8/3/2019 Web Dizajn - 1 Uvod, Wire Framing
22/24
Odreivanje boja online alati
http://www.colorcombos.com/ http://www.hypergurl.com/colormatch.ph
p
http://colorschemedesigner.com/
http://www.colorcombos.com/http://www.colorcombos.com/http://www.colorcombos.com/http://www.colorcombos.com/http://www.hypergurl.com/colormatch.phphttp://www.hypergurl.com/colormatch.phphttp://colorschemedesigner.com/http://colorschemedesigner.com/http://www.hypergurl.com/colormatch.phphttp://www.hypergurl.com/colormatch.phphttp://www.colorcombos.com/8/3/2019 Web Dizajn - 1 Uvod, Wire Framing
23/24
Organizacija
Izdvojiti glavne celine i napravitidirektorijume (npr. Header, main, footer)
Glavne direktorijume dalje deliti napoddirektorijume
Header
Main
Leftcolumn
Navigation
Events
Maincolumn
Rightcolumn
Footer
8/3/2019 Web Dizajn - 1 Uvod, Wire Framing
24/24
(pogledatiWeb programiranje Dizajninterfejsa)