Web dizajn

Prof. Dr Milena Stanković Mr Ivan Petković

Uvod

multimedija. hipertekst.Evolucija   Web – tekst.  Google maps (web mapping).  Dipity.  Youtube (videosharing).  Flickr (photosharing).  Twitter (microblogging).  Wikipedia (collaborative encyclopedia). kolaborativnost Web 2.0 aplikacije Facebook (social networking).  ..….

org .w3c. Opera. Safari.  Browsers – Internet Explorer.ww. Mozilla Firefox. Google Chrome W3C konzorcijum .

com/2009/10/08/topmashups/ (slika uvod1) http://www.com/popul ar .programmableweb.    Web kao novi medijum Mash-up aplikacije http://mashable.

  Dizajn Web sajta je kreativan proces “One click away” .Priroda Web-a je takva da korisnik vrlo lako može da napusti sajt ukoliko mu nije dovoljno privukao/održao pažnju .

uspostavljanje kredibiliteta dizajnom  . konzistentnost strana. blaga kriva učenja  Estetika – dopadljiv izgled sajta.Osnovni principi dobrog dizajna  Dve perspektive: Upotrebljivost – funkcionalnost i efikasno predstavljanje informacija. intuitivno korišćenje.

Faze izrade dizajna Web sajta wireframe html psd .

Faze izrade dizajna Web sajta  Faze: Analiza korisničkih zahteva  Projektovanje interakcije (interaction design) Intuitivna navigacija. lakoća korišćenja sajta  Projektovanje informacija (information design) – sadržaj koji uspešno prenosi poruku  Izrada grafičkih elemenata – dizajn treba da privuče i zadrži korisnika sajta  Prebacivanje grafičkog dizajna u xHTML. CSS i javascript (cutting)  .

četvrte grafički fajl (npr. Adobe Photoshop psd fajl) i zadnje faze traženi xHTML+CSS+JS. Projektovanje informacija se kasnije radi i za konkretne strane .  Rezultat prve tri faze je Web site wireframe.

..Analiza korisničkih zahteva    Prikupljanje korisničkih zahteva Utvrđivanje namene sajta (blog.) Određivanje ciljne grupe korisnika .. ecommerce.

 Back dugme. Breadcrumbs).  Uvek vidljiva trenutna pozicija korisnika na sajtu (npr.Projektovanje interakcije   Cilj je efikasno korišćenje Web sajta/aplikacije – “user-friendly” interfejs Intuitivna i jednostavna navigacija: Mogućnost poništavanja zadnje akcije (undo).  Što jednostavniji način da se dodje sa strane A na stranu B  .

.Projektovanje interakcije    Blaga kriva učenja (što korisnik treba više da uči da koristi sajt to je veća verovatnoća da će napustiti sajt).” Vrlo jednostavan ali i dosta ignorisan princip. Fitt-ov zakon: “Vreme za uočavanje traženog elementa je funkcija razdaljine od tog elementa i njegove veličine.

.Projektovanje interakcije  Primeri Fittovog zakona: Koristiti veće elemente za važnije funkcije (tag clouds..)  Staviti dugme za kupovinu odmah pored slike samog proizvoda  . veliko checkout dugme..

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

. i ubaciti prateću multimediju (slike.Projektovanje informacija  Izbegavati suvoparan tekst. već ga podeliti u odeljke ili na više strana. video). naglasiti naslove.

. Axure..Web site wireframe     Uprošćeni (konceptualni) model Web strane – ilustruje najvažnije elemente korisničkog interfejsa Wireframe je koristan pri projektovanju interakcije i informacija Olakšava komunikaciju sa naručiocem posla Laka izrada – skica olovkom ili nekim alatom (MS Visio.) ..

pre crtanja detaljnih grafičkih elemenata .Web site wireframe  Prvi korak pri izradi dizajna.

fluid) – dizajn prati promenu dimenzija prozora Fiksni -deo sa sadržajem je fiksnih dimenzija. a fleksibilna glavna kolona Atipičan . bez obzira na dimenzije prozora Hibridni – npr.Tipovi dizajna Web strane     Fleksibilan (Liquid. fiksni sidebar.

JPG ili GIF slike PNG (PNG-8) i GIF podržavaju transparenciju . odakle se eksportuju PNG.Grafički dizajn     Adobe Photoshop – standard za grafički dizajn Slojevi (layer-i) hierarhijski organizovani u direktorijume i poddirektorijume Rezultat – PSD fajl.

kao i paletu do 6 boja koje će se koristiti .Određivanje boja  Odrediti dominantnu boju.

com/ .hypergurl.colorcombos.Određivanje boja – online alati    http://www.ph p http://colorschemedesigner.com/ http://www.com/colormatch.

Organizacija   Izdvojiti glavne celine i napraviti direktorijume (npr. footer) Glavne direktorijume dalje deliti na poddirektorijume Header Main Left column Main column Right column Navigation Events Footer . main. Header.

 (pogledati “Web programiranje – Dizajn interfejsa”) .

5.. 43.5. /.#962.:. 5.3.7613.  .9.79.:67.9. 6132 35..6.55694.41 :32 16 ..0.:36 /.2:.0. 5. :.

64 &:6 9 .26452.0:..5.6362643524 .4 796 5 26507.2.6.4269:.1.0. ..9:.9 604 76:3.9.205694. 269:5 265.5 5.35 4613/ :.3.2 .99.9..y5345. :20.5 3:./:..9. "3. 99.5797962.95..

79 09.1...99.5.11...279 9.4 #9269./:.5. 2 345. .35 9.

579.5 81 31  1.5./:.5 32:/3.79669.. 2:5 .9.'761. 79645145.

5 .14579669.16:.9 .5.42:5 145.7 . /915 579 2:5:1/.32:/35.26365. .5. /6/9. 3.19y.:.

51.6:67 :.9. 21.. 21.91.5 &36 3.9.9.5 16/#6.

9:269.694 %3. #&.694761192..3 61..23:2:769.56.5 192.#!  #3:32 #! #!. 9.

.. 7619y.5:7.9.950 .

3."19 .5/6 2.5.16 /6..26 :269:.67. "191. .1645.5/6.

7 06369064/6: 064 .5/6..."19 ...706369:041:59 064 ..0 7 7 . 6535.3.7 7993 064063694. .

79. 761192.3.5 66.694 579 .5.0.9 3..313.5."9.5192.50355.19 4. 16. 192.694 .6941.

/7969..49.9:.7631. .5 .5 5.