Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Att bygga en vettig webbstruktur

1,268 views

Published on

Mina bilder från Geek Girl Meetup Umeå

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Att bygga en vettig webbstruktur

  1. 1. ATT BYGGA EN VETTIG WEBBSTRUKTUR LILIAN JOHANSSON
  2. 2. TÄNK STRUKTUR! 11-11-07 [email_address]
  3. 3. SYFTE? 11-11-07 [email_address]
  4. 4. ANVÄNDAREN I FOKUS! 11-11-07 [email_address]
  5. 5. MÅLGRUPP? 11-11-07 [email_address] Analysera! Testa! Lyssna!
  6. 6. GRAFISK DESIGN <ul><li>Seriöst och tilltalande? </li></ul><ul><li>Känsla? </li></ul><ul><li>RÄTT STIL! </li></ul>11-11-07 [email_address]
  7. 7. FORM & FÄRG <ul><li>Formens funktion </li></ul><ul><ul><ul><ul><ul><li>Lyfta informationen </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Hålla samman </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Undvik dekorationer </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Var relevant </li></ul></ul></ul></ul></ul>11-11-07 [email_address]
  8. 8. BILDER 11-11-07 [email_address] <ul><li>Stämningsspridare </li></ul><ul><li>Mänsklig anknytning </li></ul><ul><li>Introduktion </li></ul><ul><li>Igenkänning </li></ul><ul><li>Förklaring </li></ul>
  9. 9. EN BILD SÄGER MER ÄN TUSEN ORD… 11-11-07 [email_address] <ul><li>Bildtexter </li></ul><ul><li>Upphovsrätt </li></ul><ul><li>Ange ”källan” </li></ul><ul><li>Alt-text </li></ul><Alt=”Katt av rasen ragdoll”/>
  10. 10. TYPOGRAFI <ul><li>Läsbara typsnitt </li></ul><ul><li>Dispositioner </li></ul><ul><li>Använd rubriker/underrubriker </li></ul><ul><li>Punktlistor/Nummerlistor </li></ul><ul><li>Kontrastfärger </li></ul>11-11-07 [email_address]
  11. 11. KONTRASTER 11-11-07 [email_address]
  12. 12. MULTIMEDIA/INSTICKSPROGRAM <ul><li>Förmedla – Förklara - Roa </li></ul>11-11-07 [email_address]
  13. 13. TÄNK PÅ… <ul><li>Att inte starta direkt </li></ul><ul><li>Möjlighet att stoppa </li></ul><ul><li>Ge information </li></ul><ul><li>Gratis läsprogram </li></ul>11-11-07 [email_address]
  14. 14. LÄSA <ul><li>Lätt att förstå? </li></ul><ul><li>Språkriktigt? </li></ul><ul><li>Rättstavat? </li></ul>11-11-07 [email_address]
  15. 15. LÄSA <ul><li>Skriv för användaren! </li></ul><ul><li>Enkelhet & Tydlighet! </li></ul>11-11-07 [email_address]
  16. 16. STRUKTUR - NAVIGERING <ul><li>Välorganiserad? </li></ul><ul><li>Hittar man det man söker? </li></ul>11-11-07 [email_address]
  17. 17. STRUKTUR - NAVIGERING <ul><li>Bunta ihop och döpa </li></ul><ul><li>Konsekvens </li></ul><ul><li>Textbaserat </li></ul><ul><li>Tydliggör navigationsnivåerna </li></ul>11-11-07 [email_address]
  18. 18. STRUKTUR – STÖD FÖR NAVIGERING <ul><li>Avvikande färg </li></ul><ul><li>” Breadcrumbs” - Start  Foto  Sommar2011 </li></ul><ul><li>Webbkarta </li></ul><ul><li>A-Ö </li></ul><ul><li>FAQ </li></ul><ul><li>Sökfunktion </li></ul>11-11-07 [email_address]
  19. 19. STRUKTUR - LÄNKAR <ul><li>Självförklarande – ”Läs mer…” </li></ul><ul><li>Understruken </li></ul><ul><li>Färg </li></ul><ul><li>Ankartext </li></ul><ul><li>Dokumentlänkar </li></ul>11-11-07 [email_address]
  20. 20. INTERAKTION <ul><li>VAD ska man göra och HUR ska man göra det? </li></ul>11-11-07 [email_address]
  21. 21. INTERAKTION <ul><li>Formulär </li></ul><ul><li>Knappar </li></ul><ul><li>E-handel </li></ul><ul><li>Skicka e-post </li></ul><ul><li>Chatta </li></ul><ul><li>Söka </li></ul>11-11-07 [email_address]
  22. 22. TÄNKA OCKSÅ PÅ… <ul><li>Skärmstorlek </li></ul><ul><li>Sökmotorvänlighet </li></ul><ul><li>Kompabilitet </li></ul>11-11-07 [email_address]
  23. 23. TÄNK OCKSÅ PÅ… <ul><li>Stilmallar (CSS) </li></ul>11-11-07 [email_address]
  24. 24. TÄNK OCKSÅ PÅ… <ul><li>Webstandarder - Validering </li></ul><ul><li>World Wide Webb Consortium - www.w3c.org </li></ul>11-11-07 [email_address]
  25. 25. FÖRTROENDE & TILLGÄNGLIGHET <ul><li>Kvalité </li></ul><ul><li>Tydlig avsändare </li></ul><ul><li>Aktuell </li></ul><ul><li>Design för ALLA? </li></ul>11-11-07 [email_address]
  26. 26. SÄKERHET <ul><li>ALLA besökare är ONDA! </li></ul><ul><li>Se över data! </li></ul><ul><li>Uppdatera ofta! </li></ul>11-11-07 [email_address]
  27. 27. SLUTSATS <ul><li>Användaren i fokus! </li></ul><ul><li>Tänk struktur! </li></ul><ul><li>Färg & form ska lyfta informationen! </li></ul><ul><li>Använd papper och penna! </li></ul><ul><li>Fungerande gränssnitt A och O! </li></ul><ul><li>Se över säkerheten! </li></ul>11-11-07 [email_address]
  28. 28. EXEMPEL PÅ DÅLIG WEBBDESIGN <ul><li>art.yale.edu </li></ul><ul><li>www.siphawaii.com </li></ul><ul><li>www.bearflagwine.com </li></ul><ul><li>www.joneschijoff.com/JCV1.0/ </li></ul><ul><li>www.maisonmartinmargiela.com </li></ul><ul><li>www.gotmilk.com </li></ul><ul><li>www.hboemtb.com </li></ul>11-11-07 [email_address]
  29. 29. GODA EXEMPEL <ul><li>www.kostaboda.com/se/hem.html </li></ul><ul><li>www.audiomostly.com </li></ul><ul><li>www.umea.se/kommun </li></ul>11-11-07 [email_address]
  30. 30. BRA OM ANVÄNDBARHET <ul><li>24-timmarswebben - eutveckling.se </li></ul><ul><li>Funka Nu - www.funkanu.se </li></ul><ul><li>Jacob Nielsen’s Website - www.useit.com </li></ul><ul><li>Don Norman’s jnd website - www.jnd.org </li></ul><ul><li>Användbarhetsboken - Tommy Sundström </li></ul><ul><li>Designing Easy-to-use Websites – Vanessa Donnelly </li></ul>11-11-07 [email_address]
  31. 31. TACK! <ul><li>Lilian Johansson </li></ul><ul><li>[email_address] </li></ul><ul><li>Twitter @LilianJohansson </li></ul><ul><li>cotjorven.wordpress.com </li></ul>11-11-07 [email_address]

×