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/topmashups/ (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

wireframe html psd

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, ecommerce,...) 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 Main column Right column Navigation Events

Footer

(pogledati Web programiranje Dizajn interfejsa)