webdagene2007 teodor bjerrang wireframes
DESCRIPTION
webdagene2007 teodorbjerrang grids wireframes ixd netlife UI AI design interaksjonsdesign informasjonsarkitektur brukervennlig brukervennlighetTRANSCRIPT
![Page 1: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/1.jpg)
Webdagene 2007g
Wireframes – Grids – InteraksjonsdesignTeodor BjerrangTeodor Bjerrang
![Page 2: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/2.jpg)
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
![Page 3: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/3.jpg)
GridsGrids
å• Hjelper deg å plassere innhold i sams ar medsamsvar med hverandre
• Holde proporsjoner• Holde proporsjoner i samsvar med hverandrehverandre
• Komposisjon
![Page 4: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/4.jpg)
Grids litt historieGrids – litt historie
![Page 5: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/5.jpg)
Storebrand skadeforsikringg
F i f idFra wireframes og grid til ferdig design
![Page 6: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/6.jpg)
Versjon 1 av wireframenVersjon 1 av wireframen
Versjon 1 laget av Netlife Research
![Page 7: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/7.jpg)
Skjermstørrelse <> NettleserstørrelseSkjermstørrelse <> Nettleserstørrelse
1024x768 px
1024x738 pxp
1004x598 px
944x598 px
![Page 8: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/8.jpg)
SkjermstørrelserSkjermstørrelser
![Page 9: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/9.jpg)
GridGrid
• 944 – (16 x 4) / 5 = 176• 944 – (16 x 9) / 10 = 80944 (16 x 9) / 10 80
![Page 10: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/10.jpg)
BasisgridBasisgrid
![Page 11: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/11.jpg)
5 x 1765 x 176
![Page 12: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/12.jpg)
10 x 8010 x 80
![Page 13: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/13.jpg)
![Page 14: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/14.jpg)
944 (16 x 4) / 5 = 176944 – (16 x 4) / 5 = 176
![Page 15: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/15.jpg)
2 spalter2 spalter
![Page 16: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/16.jpg)
2 spalter2 spalter
![Page 17: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/17.jpg)
2 spalter2 spalter
![Page 18: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/18.jpg)
3 spalter3 spalter
![Page 19: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/19.jpg)
3 spalter3 spalter
![Page 20: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/20.jpg)
3 spalter3 spalter
![Page 21: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/21.jpg)
5 spalter5 spalter
![Page 22: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/22.jpg)
Versjon 1 av wireframenVersjon 1 av wireframen
Versjon 1 laget av Netlife Research
![Page 23: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/23.jpg)
Wireframe v2 hovedsideWireframe v2 hovedside
![Page 24: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/24.jpg)
![Page 25: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/25.jpg)
![Page 26: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/26.jpg)
![Page 27: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/27.jpg)
![Page 28: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/28.jpg)
![Page 29: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/29.jpg)
![Page 30: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/30.jpg)
![Page 31: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/31.jpg)
![Page 32: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/32.jpg)
![Page 33: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/33.jpg)
![Page 34: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/34.jpg)
![Page 35: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/35.jpg)
944 (16 x 4) / 5 = 176944 – (16 x 4) / 5 = 176
![Page 36: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/36.jpg)
![Page 37: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/37.jpg)
La oss slå på lysetLa oss slå på lyset
![Page 38: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/38.jpg)
Innhold Wireframe v2Innhold Wireframe v2
![Page 39: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/39.jpg)
FunksjonalitetFunksjonalitet
![Page 40: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/40.jpg)
FunksjonalitetFunksjonalitet
![Page 41: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/41.jpg)
FunksjonalitetFunksjonalitet
![Page 42: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/42.jpg)
Form og fargeForm og farge
![Page 43: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/43.jpg)
InnholdInnhold
![Page 44: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/44.jpg)
IkonerIkoner
![Page 45: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/45.jpg)
Ikoner ProsessIkoner - Prosess
![Page 46: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/46.jpg)
Ikoner og funksjonalitetIkoner og funksjonalitet
![Page 47: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/47.jpg)
GridGrid
![Page 48: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/48.jpg)
Versjon 1 av wireframenVersjon 1 av wireframen
Versjon 1 laget av Netlife Research
![Page 49: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/49.jpg)
Forsikringssiden i dagForsikringssiden i dag
![Page 50: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/50.jpg)
Lansert desember 2006Lansert desember 2006
![Page 51: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/51.jpg)
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
![Page 52: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/52.jpg)
NominertNominert
• Rosingprisen• BrukervennlighetsprisenBrukervennlighetsprisen • Beste nettsted
![Page 53: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/53.jpg)
Avisannonse ved lanseringAvisannonse ved lansering
![Page 54: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/54.jpg)
Dyreparkeny p
H ti b tilli F id til d iHurtigbestilling - Fra ide til design
![Page 55: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/55.jpg)
![Page 56: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/56.jpg)
![Page 57: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/57.jpg)
![Page 58: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/58.jpg)
![Page 59: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/59.jpg)
![Page 60: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/60.jpg)
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.
![Page 61: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/61.jpg)
Utdanningshusetg
R d i d f k å k t iRedesign med fokus på konvertering
![Page 62: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/62.jpg)
20042004
![Page 63: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/63.jpg)
![Page 64: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/64.jpg)
![Page 65: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/65.jpg)
Action
Segmentering
Trygghet/personlig preg Trygghet/størrelse
Segmentering
![Page 66: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/66.jpg)
Resultat
R lt t t il M U tResultatet vil Magne Uppman presentere senere i dag.
![Page 67: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/67.jpg)
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.
![Page 68: Webdagene2007 Teodor Bjerrang Wireframes](https://reader033.vdocuments.pub/reader033/viewer/2022060122/5596652d1a28abe7338b47e6/html5/thumbnails/68.jpg)
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