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

2. Last time on Introduction to
Building Wireframes...

3. • What is a wireframe? • Software tools
• Why make wireframes? • Stencils libraries
• Sketching • Code wireframes
• User centered design • How to test wireframes
and gathering feedback
• Features and scenarios
• Iterative design
• Site maps
• Paper prototyping

4. Wireframe fidelity
Low High
Sketching Paper Mock up Code
Prototype Software Prototype

5. Mockup Software

6. Keynote
Mac only

7. Demo –
How to mock up in Keynote

8. Omnigraffle
http://www.omnigraffle.com

9. Balsamiq
http://www.balsamiq.com/

10. Demo –
Creating my favourite places site in Balsamiq

11. Mock up libraries

12. MockupsToGo
https://mockupstogo.mybalsamiq.com/

13. Keynotopia
http://keynotopia.com/

14. https://vimeo.com/13892268

15. Graffletopia
http://graffletopia.com/

16. Code prototypes

17. 960.gs
http://960.gs/

18. Twitter Bootstrap
http://twitter.github.com/bootstrap/

19. Zurb Foundation
http://foundation.zurb.com/

20. Demo –
Creating a site in ~10 mins

21. Getting your boss or
clients to let you do
wireframes

22. User testing

23. How to do a user test

24. Develop a test plan

25. Choose a place

26. Select participants

27. Conduct session

28. De-brief participant

29. Wash, rinse, repeat.

30. Paper Prototyping

31. Silverback
http://silverbackapp.com/

32. Realizer
http://www.realizerapp.com/

33. UserTesting.com
http://www.usertesting.com/

34. Olark
http://www.olark.com/

35. A/B Testing

36. Optimizely
https://www.optimizely.com/

37. Google Analytics
Content Experiments
R.I.P. Google Web Optimizer

38. Thanks!
Rik Lomas, Lomalogue Ltd
@riklomas
rik@lomalogue.com