Professional Documents
Culture Documents
Uvod
Evolucija
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
Dve perspektive:
Upotrebljivost funkcionalnost i efikasno predstavljanje informacija, intuitivno korienje, blaga kriva uenja Estetika dopadljiv izgled sajta, konzistentnost strana, uspostavljanje kredibiliteta dizajnom
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
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
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).
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,...)
Prvi korak pri izradi dizajna, pre crtanja detaljnih grafikih elemenata
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
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