Introduction to Building Wireframes Rik Lomas, Lomalogue Ltd @riklomas [email protected]
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
Demo –Creating my favourite places site in Balsamiq
Mock up libraries
MockupsToGoh"ps://mockupstogo.mybalsamiq.com/
Code prototypes
Twi#er Bootstraph"p://twi"er.github.com/bootstrap/
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
A/B Testing
Google Analytics Content Experiments
R.I.P. Google Web Optimizer
$anks!
Rik Lomas, Lomalogue Ltd @riklomas [email protected]