Introduction to Building Wireframes - Part 2

Introduction to Building Wireframes Rik Lomas, Lomalogue Ltd @riklomas rik@lomalogue.com

Last time on Introduction to Building Wireframes...

• What is a wireframe?

• Why make wireframes?

• Sketching

• User centered design

• Features and scenarios

• Site maps

• Paper prototyping

• So!ware tools

• Stencils libraries

• Code wireframes

• How to test wireframes and gathering feedback

• Iterative design

Wireframe !delity

Low HighPaper

PrototypeSketching Code

PrototypeMock upSo!ware

Mockup So!ware

KeynoteMac only

Demo –How to mock up in Keynote

Omnigraffleh"p://www.omnigraffle.com

Balsamiqh"p://www.balsamiq.com/

Demo –Creating my favourite places site in Balsamiq

Mock up libraries

MockupsToGoh"ps://mockupstogo.mybalsamiq.com/

Keynotopiah"p://keynotopia.com/

h"ps://vimeo.com/13892268

Graffletopiah"p://graffletopia.com/

Code prototypes

960.gsh"p://960.gs/

Twi#er Bootstraph"p://twi"er.github.com/bootstrap/

Zurb Foundationh"p://foundation.zurb.com/

Demo –Creating a site in ~10 mins

Ge#ing your boss or clients to let you do

wireframes

User testing

How to do a user test

Develop a test plan

Choose a place

Select participants

Conduct session

De-brief participant

Wash, rinse, repeat.

Paper Prototyping

Silverbackh"p://silverbackapp.com/

Realizerh"p://www.realizerapp.com/

UserTesting.comh"p://www.usertesting.com/

Olarkh"p://www.olark.com/

A/B Testing

Optimizelyh"ps://www.optimizely.com/

Google Analytics Content Experiments

R.I.P. Google Web Optimizer

$anks!

Rik Lomas, Lomalogue Ltd @riklomas rik@lomalogue.com