Introduction toBuilding Wireframes  Rik Lomas, Lomalogue Ltd  @riklomas  rik@lomalogue.com
Last time on Introduction toBuilding Wireframes...
•   What is a wireframe?     •   Software tools•   Why make wireframes?     •   Stencils libraries•   Sketching           ...
Wireframe fidelityLow                                 HighSketching     Paper     Mock up      Code            Prototype  ...
Mockup Software
Keynote Mac only
Demo –How to mock up in Keynote
Omnigrafflehttp://www.omnigraffle.com
Balsamiqhttp://www.balsamiq.com/
Demo –Creating my favourite places site in Balsamiq
Mock up libraries
MockupsToGohttps://mockupstogo.mybalsamiq.com/
Keynotopiahttp://keynotopia.com/
https://vimeo.com/13892268
Graffletopiahttp://graffletopia.com/
Code prototypes
960.gshttp://960.gs/
Twitter Bootstraphttp://twitter.github.com/bootstrap/
Zurb Foundationhttp://foundation.zurb.com/
Demo –Creating a site in ~10 mins
Getting your boss orclients 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
Silverbackhttp://silverbackapp.com/
Realizerhttp://www.realizerapp.com/
UserTesting.comhttp://www.usertesting.com/
Olarkhttp://www.olark.com/
A/B Testing
Optimizelyhttps://www.optimizely.com/
Google AnalyticsContent Experiments  R.I.P. Google Web Optimizer
Thanks!  Rik Lomas, Lomalogue Ltd  @riklomas  rik@lomalogue.com
Upcoming SlideShare
Loading in...5
×

Introduction to Building Wireframes - Part 2

1,361

Published on

Published in: Technology

Introduction to Building Wireframes - Part 2

  1. 1. Introduction toBuilding Wireframes Rik Lomas, Lomalogue Ltd @riklomas rik@lomalogue.com
  2. 2. Last time on Introduction toBuilding Wireframes...
  3. 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. 4. Wireframe fidelityLow HighSketching Paper Mock up Code Prototype Software Prototype
  5. 5. Mockup Software
  6. 6. Keynote Mac only
  7. 7. Demo –How to mock up in Keynote
  8. 8. Omnigrafflehttp://www.omnigraffle.com
  9. 9. Balsamiqhttp://www.balsamiq.com/
  10. 10. Demo –Creating my favourite places site in Balsamiq
  11. 11. Mock up libraries
  12. 12. MockupsToGohttps://mockupstogo.mybalsamiq.com/
  13. 13. Keynotopiahttp://keynotopia.com/
  14. 14. https://vimeo.com/13892268
  15. 15. Graffletopiahttp://graffletopia.com/
  16. 16. Code prototypes
  17. 17. 960.gshttp://960.gs/
  18. 18. Twitter Bootstraphttp://twitter.github.com/bootstrap/
  19. 19. Zurb Foundationhttp://foundation.zurb.com/
  20. 20. Demo –Creating a site in ~10 mins
  21. 21. Getting your boss orclients to let you do wireframes
  22. 22. User testing
  23. 23. How to do a user test
  24. 24. Develop a test plan
  25. 25. Choose a place
  26. 26. Select participants
  27. 27. Conduct session
  28. 28. De-brief participant
  29. 29. Wash, rinse, repeat.
  30. 30. Paper Prototyping
  31. 31. Silverbackhttp://silverbackapp.com/
  32. 32. Realizerhttp://www.realizerapp.com/
  33. 33. UserTesting.comhttp://www.usertesting.com/
  34. 34. Olarkhttp://www.olark.com/
  35. 35. A/B Testing
  36. 36. Optimizelyhttps://www.optimizely.com/
  37. 37. Google AnalyticsContent Experiments R.I.P. Google Web Optimizer
  38. 38. Thanks! Rik Lomas, Lomalogue Ltd @riklomas rik@lomalogue.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×