8. Webdesign Grundlæggende Grafisk design Stefan Grage & Klaus Bjerager Tirsdag 5. april
Kursusplan 5. apr. 12. apr. 18. apr. 9. Webdesign / Opg. 7: website K: Usability, s. 36-39 K: Smukkere grafisk design, s. 116 K: Stram op på dine websider, s. 13, 39, 120-121 K: Universal Principles of Design, s. 102, 104, 158, 202 K: Letting Go of the Words, s. 1-6, 8-9, (69-92) 10. Interaktiv markedsføring / Opg. 8: nyhedsmail K: Nej tak til de fleste reklamer K: Interactive brand design research K: Design til skærmen, s. 13-14 K: User Interface Design in Modern Web Applications K: (Design to Sell Increasing Conversion Rates)* 11. Eksamens-opgave stilles / Opg. 9: skitser web + cvi K: The Elements of User Experience, s. 21-36 20. apr. Påskeferie (Ingen undervisning) 26. apr. 12. Eksamens-opgave K: How Do Users Evaluate the Credibility of Web Sites? K: Do We Need Eye Trackers to Tell Where People Look? K: Idébogen, s. 12-13, 186-187! 3. maj 10. maj 13. Navigation / Opg.10: teori test G: Layout i opgaven, s. 70-91 K: Usability, s. 42-49 K: Don t make me think, s. 31-39, 54-86 14. Vejledning Vejledning og individuelt/gruppe-arbejde 25 18. maj Aflevering af eksamensopgaven Aflevering ved Eksamenskontoret før kl. 15.00 16.-17. juni Mundtlig eksamen
Agenda Kort om skitser Rammer for design - Skærme - Opløsning - Browsere Webdesign & dynamik Stefan Skriftlig evaluering Forskellige webdesign Trunk-test Opgave 7
Kort om skitser Test i design-processen brug skitser og prototyper i udvikling og test Skitser er et værktøj ikke kunst! Optimeret forståelse (jo tættere på desto bedre) vs. Brugbarhed som værktøj (hurtigt fremstillet og redigeret) Tegn på papir eller print dine skitser (så der kan tilføres rettelser og kommentarer)!
Kort om skitser En god skitse kan krølles sammen og smides væk uden det giver anledning til konflikter i udviklingsprocessen
Skærme Skærm størrelse - 10-24 tommer på PC - Mindre skærme (og pixels) på PDA og mobiltelefoner - 2 løsninger (Website + Mobilsite) koster kassen. Kontekst - Belysning - Rystelser - Overvej tilgængelighed
Opløsning Forskellige format - Widescreen, 16:9 - Skærmbredde: 1024-1920 pixels - iphone 3: 320 x 480 pixel (163 ppi) - iphone 4: 640 x 960 pixel (326 ppi) Overvej detalje-grad og små elementer Husk browser, ramme og scrollbar Folden Over eller under folden
Opløsning Overvej grid 960 pixels Statistik fra FDIM: (Foreningen af Danske Interaktive Medier) 1 1280x800 20,448 % 2 1024x768 12,784 % 3 1366x768 11,877 % 4 1280x1024 10,302 % 5 1440x900 9,421 % 6 1680x1050 6,915 % 7 1600x900 3,873 % 8 1920x1080 3,460 % 9 1024x600 2,313 % 10 1920x1200 2,248 % kilde: http://fdim.dk/statistik/teknik/skaermoploesning
iphone 4 skærm Skærm: 640 x 960 pixels 50 x 75 mm 128 pixels/mm
Browsere Overvej browser - Websitet vises forskelliget i forskellige browsere - Dette er ikke så vigtigt for jer (her på holdet), men I skal vide det Statistik fra FDIM: (Foreningen af Danske Interaktive Medier) 1 MSIE 8.X 44,137 % 2 MSIE 7.X 22,008 % 3 Firefox 3.X 12,051 % 4 Chrome 8.X 9,128 % 5 Safari 5.X 5,474 % 6 Safari 4.X 1,430 % 7 SafariMob 5.X 1,407 % 8 MSIE 6.X 1,272 % 9 SafariMob 4.X 0,888 % 10 MSIE 9.X 0,488 % http://fdim.dk/statistik/teknik/browserbarometer
Browsere For forskellige browsere: http://browsershots.org MSIE 8.0 Firefox 3.6 Safari 4.0.3 Opera 9.80
Webdesign & dynamik Stefan
Jakob Nielsen www.useit.com
Webdesign(s) bør leve op til Trunk testen Trunk test 1. Hjemmeside identitet? 2. Hvilken side er jeg på? 3. Hvilke sektioner består sitet af? 4. Hvilke navigationsmuligheder har jeg? 5. Hvor befinder jeg mig relativt til Home? 6. Hvilke søgemuligheder har jeg?
Øvelse I skal finde et website for en køreskole - efter eget valg I skal vurdere websites design ud fra: - Design-principper - Komposition - Kontraster - Grid - Visuel identitet - Samlet oplevelse I skal arbejde i grupper I skal forberede en kort præsentation (30 minutter)
Drivertz www.drivertz.dk
Inges køreskole www.inges.dk
Hodal Køreskole www.hodal.dk
Toyota www.toyota.dk
SU www.su.dk
SU www.su.dk
Webdesign(s) bør baseres på nedenstående overvejelser... men ikke nødvendigvis i denne rækkefølge. design-principper komposition kontrast grid visuel identitet helhedoplevelse
Britt Ks website: Forside
Britt Ks website: Priser
Britt Ks website: Åbningstider
Britt Ks website: Salonen
Britt Ks website: Stylist
Britt Ks website: Her er vi
Britt Ks website: Online booking
Opgave 7 Redesign et website for en frisør (Britt K) I skal aflevere 1 pdf-fil med min. 5 sider: Jeres grid i et browser-vindue 1+ forslag til komposition (skitse(r)) 3 sider fra websitet (forside + 2 frie) Gennemgang 12. april
Tak for i dag!