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

teodor@ixd.no - Mob. 90 78 01 90

www.ixd.no - www.kuttisme.no

Takk til Khoi Vinh for Grid inspirasjon