att bygga en vettig webbstruktur
DESCRIPTION
Mina bilder från Geek Girl Meetup UmeåTRANSCRIPT
ATT
BYGGA E
N VETT
IG
WEBBSTR
UKTUR
LILIA
N JOHANSSON
FORM & FÄRG
• Formens funktion
• Lyfta informationen•Hålla samman
•Undvik dekorationer• Var relevant
23-04-1
BILDER
23-04-1
• Stämningsspridare
• Mänsklig anknytning
• Introduktion
• Igenkänning
• Förklaring
EN BILD SÄGER MER ÄN TUSEN ORD…
23-04-1
• Bildtexter
• Upphovsrätt
• Ange ”källan”
• Alt-text
<Alt=”Katt av rasen ragdoll”/>
TYPOGRAFI
• Läsbara typsnitt
• Dispositioner
• Använd rubriker/underrubriker
• Punktlistor/Nummerlistor
• Kontrastfärger
23-04-1
TÄNK PÅ…
• Att inte starta direkt
• Möjlighet att stoppa
• Ge information
• Gratis läsprogram
23-04-1
STRUKTUR - NAVIGERING
• Bunta ihop och döpa
• Konsekvens
• Textbaserat
• Tydliggör navigationsnivåerna
23-04-1
STRUKTUR – STÖD FÖR NAVIGERING
• Avvikande färg
• ”Breadcrumbs” - StartFotoSommar2011
• Webbkarta
• A-Ö
• FAQ
• Sökfunktion
23-04-1
STRUKTUR - LÄNKAR
• Självförklarande – ”Läs mer…”
• Understruken
• Färg
• Ankartext
• Dokumentlänkar
23-04-1
INTERAKTION
• Formulär
• Knappar
• E-handel
• Skicka e-post
• Chatta
• Söka
23-04-1
TÄNK OCKSÅ PÅ…
Webstandarder - Validering
World Wide Webb Consortium - www.w3c.org
23-04-1
FÖRTROENDE & TILLGÄNGLIGHET
• Kvalité
• Tydlig avsändare
• Aktuell
• Design för ALLA?
23-04-1
SLUTSATS
• Användaren i fokus!
• Tänk struktur!
• Färg & form ska lyfta informationen!
• Använd papper och penna!
• Fungerande gränssnitt A och O!
• Se över säkerheten!
23-04-1
EXEMPEL PÅ DÅLIG WEBBDESIGN
• art.yale.edu
• www.siphawaii.com
• www.bearflagwine.com
• www.joneschijoff.com/JCV1.0/
• www.maisonmartinmargiela.com
• www.gotmilk.com
• www.hboemtb.com
23-04-1
GODA EXEMPEL
• www.kostaboda.com/se/hem.html
• www.audiomostly.com
• www.umea.se/kommun
23-04-1
BRA OM ANVÄNDBARHET
24-timmarswebben - eutveckling.se
Funka Nu - www.funkanu.se
Jacob Nielsen’s Website - www.useit.com
Don Norman’s jnd website - www.jnd.org
Användbarhetsboken - Tommy Sundström
Designing Easy-to-use Websites – Vanessa Donnelly
23-04-1
TACK!
Lilian Johansson
Twitter @LilianJohansson
cotjorven.wordpress.com
23-04-1