Web Dizajn - 1 Uvod, Wire Framing

8/3/2019 Web Dizajn - 1 Uvod, Wire Framing

1/24

Web dizajn

Prof. Dr Milena Stankovi

Mr Ivan Petkovi


2/24

Uvod


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,..


4/24

Browsers Internet Explorer, MozillaFirefox, Opera, Safari, Google Chrome W3C konzorcijum - ww.w3c.org


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/


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


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/24

Faze izrade dizajna Web sajta

wireframe

psd

html


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)


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


11/24

Analiza korisnikih zahteva

Prikupljanje korisnikih zahteva Utvrivanje namene sajta (blog, e-

commerce,...)

Odreivanje ciljne grupe korisnika


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


13/24


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.


14/24


Primeri Fittovog zakona: Koristiti vee elemente za vanije funkcije (tag

clouds, veliko checkout dugme,...)

Staviti dugme za kupovinu odmah pored slike

samog proizvoda


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.


16/24

Projektovanje informacija

Izbegavati suvoparan tekst, ve ga podelitiu odeljke ili na vie strana, naglasitinaslove, i ubaciti prateu multimediju(slike, video).


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,...)


18/24

Web site wireframe

Prvi korak priizradi dizajna, precrtanja detaljnihgrafikihelemenata


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


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


21/24

Odreivanje boja

Odrediti dominantnu boju, kao i paletu do6 boja koje e se koristiti
http://www.colorcombos.com/


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/


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


24/24

(pogledatiWeb programiranje Dizajninterfejsa)

Documents

Web Dizajn - 1 Uvod, Wire Framing