Webbdesign Vittert vetande om webbdesign, SBe, PK 2008-02-01.

En presentation över ämnet: "Webbdesign Vittert vetande om webbdesign, SBe, PK 2008-02-01."— Presentationens avskrift:

1 Webbdesign Vittert vetande om webbdesign, SBe, PK 2008-02-01

2 Innan vi börjar, utvecklarkompetenser? Html Css Javascript Serverutveckling, asp.net, php, java… Webbläsare m.m.

3 Innan vi börjar, designkompetenser? Design av gränssnitt Design av interaktion Design av informationsarkitektur Design av systemarkitektur Osv…

4 Innan vi börjar, standards? W3C: html, css, script W3C: WCAG, WAI Svenska myndigheter – riktlinjerna till 24-timmarswebben Dublin Core, Microformats, Bilder, ….(det tar aldrig slut!)

5 Innan vi börjar, var hittar man guldgruvorna? W3C W3schools, webbdesignskolan Alistapart Diverse goda sajter med specialintressen 24-timmarswebben

6 Innehåll Förarbete Utformning Användaranpassning Utformning Färg Bild

7 Förarbete Etablerade användningsområden: - Marknadsföring - Broschyrer - E-handel - Communities - Kundvård

8 Målsättning Nödvändig – Användbar – Vacker ”En webbplats ska vara så utformad att den får besökaren att tycka om den som äger sajten” Webbdesign Del 1, Clas Kristiansson Datormagazine Nr 4 2002

9 Nödvändig - Nödvändig för vem? - Vem är besökaren? - Vad kan vi erbjuda denne? - Nödvändig för oss?

10 Användbar Utbud - Information, produkter, tjänster Utformning - Användbarhet, informationsstruktur Användaranpassning

11 Vacker - Söker användaren upplevelser eller information? - Vad är egentligen snyggt?

12 Utformning ”Gestaltningslagar för perceptionell organisation” ”De sju reglerna för informationsstrukturering” ”Grafisk kommunikation” Webbdesign Del 2, Clas Kristiansson Datormagazine Nr 4 2002

13 Gestaltningslagar Närhet Område Likhet Orientering Stängda figurer Gyllene snittet Optisk mittpunkt Enkelhetmed flera…

14 Gyllene snittet A1BCDEFGH 2 3XX 4 5 6XX 7 8 x Centrum i det gyllene snittet (5/8)

15 Optisk mittpunkt

16 Informationsstruktur Linjär Hierarkisk Matris Parallell Lager Zoom Nätverk ”Optimal struktur innebär dessutom ett minimerat antal musklick!”

17 Grafisk kommunikation Mål/Syfte Målgrupp Produkt Budskap Organisation Marknad Medium Tidsplan Budget Utvärdering

18 Budskapet Budskap kan vara: - Rationella eller emotionella - Informativa eller transforma - Intygande eller jämförande Budskap kan ha: - En eller flera målgrupper

19 Typografi Använd två (maximalt tre) fonter Ersätt Times New Roman (default) Georgia (rubriker) Verdana (brödtext) Undvik understrykningar Undvik centreringar Spalta upp texten

20 Färg RGB 256 nivåer/färg Anges hexadecimalt (00–FF) Nyanser nära varandra ger harmoni, motsatsen disharmoni Varma och kalla färger Kontrast

21 Bild Bildformat Liggande Stående Kvadratisk Bildval Illustrativa Metonymiska Metaforiska Bildanalys Näranalys Intentionsanalys Receptionsanalys Glöm inte upphovsmannarätten!

22 Användaranpassning Ett urval av W3C:s rekommendationer: - Kontrast mellan för- och bakgrund - Ej färgberoende information - Undvik blinkande och rörlig grafik - Enkelt och relevant språk

23 Användaranpassning forts. - Konsekvent navigation - Använd stilmallar, men anpassade för äldre webbläsare - Undvik ramar - Textmotsvarighet för varje objekt - Ej bilder i stället för text - Ange språk i HTML-koden

24 Användaranpassning forts. - Skapa alternativ till script, applets, flash mm - Undvik popup:s - Undvik automatisk uppdatering och vidarepassning

25 Hur vet jag när något är välgjort? Snabbtest i Web Developer Tool Ta bort stilmallen! Validera html, css Validera wai