webdagene2007 teodorbjerrang grids wireframes ixd netlife UI AI design interaksjonsdesign informasjonsarkitektur brukervennlig brukervennlighet

1. Webdagene 2007
g
Wireframes – Grids – Interaksjonsdesign
Teodor Bjerrang

2. Wireframes
• Enkelt å visualisere
ideer til alle
prosjektdeltakere
• Illustrerer omfanget
av en webside
• Mulig å brukerteste
• Fokus på innhold og
funksjon
f kj
• Raskt og utvikle, enkle
verktøy

3. Grids
• Hjelper deg å
plassere innhold i
samsvar
sams ar med
hverandre
• Holde proporsjoner
i samsvar med
hverandre
• Komposisjon

4. Grids – litt historie

5. Storebrand skadeforsikring
g
Fra i f
F wireframes og grid
id
til ferdig design

6. Versjon 1 av wireframen
Versjon 1 laget av Netlife Research

7. Skjermstørrelse <> Nettleserstørrelse
1024x768 px
1024x738 px
p
1004x598 px
944x598 px

8. Skjermstørrelser

9. Grid
• 944 – (16 x 4) / 5 = 176
• 944 – (16 x 9) / 10 = 80

10. Basisgrid

11. 5 x 176

12. 10 x 80

14. 944 – (16 x 4) / 5 = 176

15. 2 spalter

16. 2 spalter

17. 2 spalter

18. 3 spalter

19. 3 spalter

20. 3 spalter

21. 5 spalter

22. Versjon 1 av wireframen
Versjon 1 laget av Netlife Research

23. Wireframe v2 hovedside

35. 944 – (16 x 4) / 5 = 176

37. La oss slå på lyset

38. Innhold Wireframe v2

39. Funksjonalitet

40. Funksjonalitet

41. Funksjonalitet

42. Form og farge

43. Innhold

44. Ikoner

45. Ikoner - Prosess

46. Ikoner og funksjonalitet

47. Grid

48. Versjon 1 av wireframen
Versjon 1 laget av Netlife Research

49. Forsikringssiden i dag

50. Lansert desember 2006

51. Resultat
• 60% av salget skjer på via Internettsidene
• Brukersupport nesten lik 0
• Online kunder strekker seg opp til 93 år
• 40% av salget skjer utenfor normal
kontortid ( 6 00)
o o d (16:00)
• Konverteringsraten ligger betydelig
høyere en bransjestandarden
hø b jtdd

52. Nominert
• Rosingprisen
• Brukervennlighetsprisen
• Beste nettsted

53. Avisannonse ved lansering

54. Dyreparken
yp
Hurtigbestilling Fra ide design
H ti b tilli - F id til d i

60. Resultatet
Resultatet vil H
R lt t t il Hans M ti S i d l f
Martin Sveindal fra
Dyreparken sammen med Karl Philip
Lund fra .IXD presentere senere i dag.

61. Utdanningshuset
g
Redesign
R d i med f k på konvertering
d fokus å k ti

62. 2004

65. Action
Segmentering
Trygghet/personlig preg Trygghet/størrelse
Segmentering

66. Resultat
Resultatet vil M
R lt t t il Magne U
Uppman presentere
t
senere i dag.

67. Verktøy for å komme i gang
• Wi f
Wireframemaler
l
– Powerpoint
– Illustrator
– Photoshop eller GIMP
p
• Grid eksempler/maler for Photoshop eller
GIMP
• Gå til www.webdagene.no/2007/lastned og
registrer deg for nedlasting av verktøy og
it df dl ti ktø
våre foredrag.

68. Takk for meg
g
Teodor Bjerrang
Interaksjonsdesigner
.IXD
teodor@ixd.no - Mob. 90 78 01 90
www.ixd.no - www.kuttisme.no
Takk til Khoi Vinh for Grid inspirasjon