Webbdesign Vittert vetande om webbdesign SBe PK 2008

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

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? • • W 3 C: html, css, script W 3 C: WCAG, WAI Svenska myndigheter – riktlinjerna till 24 -timmarswebben Dublin Core, Microformats, Bilder, …. (det tar aldrig slut!)

Innan vi börjar, var hittar man guldgruvorna? • • • W 3 C W 3 schools, 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 4 2002

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 4 2002

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

Gyllene snittet A 1 B C D E F G 2 3 X X 4 5 6 7 8 x Centrum i det gyllene snittet (5/8) H

Optisk mittpunkt

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

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

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

Användaranpassning Ett urval av W 3 C: 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? n n Snabbtest i Web Developer Tool Ta bort stilmallen! Validera html, css Validera wai