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
- Slides: 25