Introduction to Building Wireframes - Part 2

1,457
-1

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.

×