Upload
anette-urhamar
View
1.262
Download
9
Embed Size (px)
DESCRIPTION
webdagene2007 teodorbjerrang grids wireframes ixd netlife UI AI design interaksjonsdesign informasjonsarkitektur brukervennlig brukervennlighet
Citation preview
Webdagene 2007g
Wireframes – Grids – InteraksjonsdesignTeodor BjerrangTeodor Bjerrang
WireframesWireframes
å• Enkelt å visualisere ideer til alle prosjektdeltakereprosjektdeltakere
• Illustrerer omfanget av en webside
• Mulig å brukerteste• Fokus på innhold og
f k jfunksjon• Raskt og utvikle, enkle
verktøyverktøy
GridsGrids
å• Hjelper deg å plassere innhold i sams ar medsamsvar med hverandre
• Holde proporsjoner• Holde proporsjoner i samsvar med hverandrehverandre
• Komposisjon
Grids litt historieGrids – litt historie
Storebrand skadeforsikringg
F i f idFra wireframes og grid til ferdig design
Versjon 1 av wireframenVersjon 1 av wireframen
Versjon 1 laget av Netlife Research
Skjermstørrelse <> NettleserstørrelseSkjermstørrelse <> Nettleserstørrelse
1024x768 px
1024x738 pxp
1004x598 px
944x598 px
SkjermstørrelserSkjermstørrelser
GridGrid
• 944 – (16 x 4) / 5 = 176• 944 – (16 x 9) / 10 = 80944 (16 x 9) / 10 80
BasisgridBasisgrid
5 x 1765 x 176
10 x 8010 x 80
944 (16 x 4) / 5 = 176944 – (16 x 4) / 5 = 176
2 spalter2 spalter
2 spalter2 spalter
2 spalter2 spalter
3 spalter3 spalter
3 spalter3 spalter
3 spalter3 spalter
5 spalter5 spalter
Versjon 1 av wireframenVersjon 1 av wireframen
Versjon 1 laget av Netlife Research
Wireframe v2 hovedsideWireframe v2 hovedside
944 (16 x 4) / 5 = 176944 – (16 x 4) / 5 = 176
La oss slå på lysetLa oss slå på lyset
Innhold Wireframe v2Innhold Wireframe v2
FunksjonalitetFunksjonalitet
FunksjonalitetFunksjonalitet
FunksjonalitetFunksjonalitet
Form og fargeForm og farge
InnholdInnhold
IkonerIkoner
Ikoner ProsessIkoner - Prosess
Ikoner og funksjonalitetIkoner og funksjonalitet
GridGrid
Versjon 1 av wireframenVersjon 1 av wireframen
Versjon 1 laget av Netlife Research
Forsikringssiden i dagForsikringssiden i dag
Lansert desember 2006Lansert desember 2006
ResultatResultat
• 60% av salget skjer på via Internettsidene• Brukersupport nesten lik 0Brukersupport nesten lik 0• Online kunder strekker seg opp til 93 år• 40% av salget skjer utenfor normal
kontortid (16:00)o o d ( 6 00)• Konverteringsraten ligger betydelig
hø b j t d dhøyere en bransjestandarden
NominertNominert
• Rosingprisen• BrukervennlighetsprisenBrukervennlighetsprisen • Beste nettsted
Avisannonse ved lanseringAvisannonse ved lansering
Dyreparkeny p
H ti b tilli F id til d iHurtigbestilling - Fra ide til design
Resultatet
R lt t t il H M ti S i d l fResultatet vil Hans Martin Sveindal fra Dyreparken sammen med Karl Philip Lund fra .IXD presentere senere i dag.
Utdanningshusetg
R d i d f k å k t iRedesign med fokus på konvertering
20042004
Action
Segmentering
Trygghet/personlig preg Trygghet/størrelse
Segmentering
Resultat
R lt t t il M U tResultatet vil Magne Uppman presentere senere i dag.
Verktøy for å komme i gangVerktøy for å komme i gang
Wi f l• Wireframemaler – Powerpoint– Illustrator– Photoshop eller GIMPp
• Grid eksempler/maler for Photoshop eller GIMPGIMP
• Gå til www.webdagene.no/2007/lastned og i t d f dl ti ktøregistrer deg for nedlasting av verktøy og
våre foredrag.
Takk for megg
Teodor BjerrangTeodor BjerrangInteraksjonsdesigner.IXD
[email protected] - Mob. 90 78 01 90
www.ixd.no - www.kuttisme.no
Takk til Khoi Vinh for Grid inspirasjon