Introduction to Building Wireframes - Part 2

  • Published on
    21-Oct-2014

  • View
    1.580

  • Download
    1

DESCRIPTION

 

Transcript

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

Omnigraeh"p://www.omnigrae.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

Graetopiah"p://graetopia.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