Att bygga en vettig webbstruktur

1,156 views

Published on

Mina bilder från Geek Girl Meetup Umeå

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,156
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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]

×