Webbdesign Vittert vetande om webbdesign, SBe, PK

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

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

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!)

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

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

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

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

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

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

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

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

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

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

Optisk mittpunkt

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

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

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

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

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

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

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

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

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

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