1 / 25

Webbdesign

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

quinlan-carver
Télécharger la présentation

Webbdesign

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Webbdesign Vittert vetande om webbdesign, SBe, PK2008-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 • Enkelhet med flera…

  14. Gyllene snittet 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 Glöm inte upphovsmannarätten! Bildanalys • Näranalys • Intentionsanalys • Receptionsanalys

  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

More Related