Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Wireframing, Mockups, and Prototyping Made Easy

2,419 views

Published on

Your job description might not say anything at all about making wireframes, interactive mockups, or prototypes, but having the ability to quickly create them can be invaluable, whether you're the de facto user experience team at your company, or a content strategist, or a technical writer. There's a wealth of new tools that make prototyping easier than ever—you don't have to be a Photoshop guru or know any software code! Pick up some new skills that can help you solve difficult concepts, communicate more efficiently, drive improvements to your products, or move your career in a new direction.

** Presented at the Society for Technical Communication Summit 2015 in Columbus, Ohio as a 45-minute workshop. **

http://lanyrd.com/2015/stc15/sdhdtc/

Published in: Software
  • Be the first to comment

Wireframing, Mockups, and Prototyping Made Easy

  1. 1. Wireframing, mockups, and prototyping made easy JOHN COLLINS • SENIOR TECHNICAL WRITER • ATLASSIAN • @JRC_COLLINS
  2. 2. About me @jrc_collins • #stc15
  3. 3. About you @jrc_collins • #stc15
  4. 4. NO • An See col @jrc_collins • #stc15 http://www.leonardoda-vinci.org/fly.html • https://creativecommons.org/licenses/by-nc-nd/3.0/
  5. 5. NO • An See col @jrc_collins • #stc15 http://www.leonardoda-vinci.org/Drawing-Of-A-Flying-Machine-large.html • https://creativecommons.org/licenses/by-nc-nd/3.0/
  6. 6. NO • An See col @jrc_collins • #stc15 http://www.wright-brothers.org/Information_Desk/Help_with_Homework/Wright_Photos/Wright_Photos_images/1903_Flyer_Plan.jpg
  7. 7. DAVID MANNHEIM ” Who should sketch?“ Everyone. @jrc_collins • #stc15
  8. 8. A sketch can look bad and still work wonderfully. UXMOVEMENT ” “ @jrc_collins • #stc15
  9. 9. Why do these things? @jrc_collins • #stc15
  10. 10. To understand @jrc_collins • #stc15
  11. 11. To explain @jrc_collins • #stc15
  12. 12. To improve @jrc_collins • #stc15
  13. 13. To create @jrc_collins • #stc15
  14. 14. NO • An See col Fidelity Sketch Wireframe Mockup @jrc_collins • #stc15
  15. 15. NO • An See col Sketch prototype Wireframe Mockup @jrc_collins • #stc15 Fidelity
  16. 16. NO • An See col Sketch Wireframe prototype Mockup @jrc_collins • #stc15 Fidelity
  17. 17. NO • An See col Sketch Wireframe Mockup prototype @jrc_collins • #stc15 Fidelity
  18. 18. Tools? @jrc_collins • #stc15
  19. 19. NO • An See col Tools • Paper & pencil (or Sharpie) • Whiteboard & marker • Powerpoint/Keynote • Balsamiq Mockups • Sketch • Invision • POP @jrc_collins • #stc15
  20. 20. Sketching @jrc_collins • #stc15
  21. 21. @jrc_collins • #stc15
  22. 22. Balsamiq Mockups @jrc_collins • #stc15
  23. 23. @jrc_collins • #stc15
  24. 24. @jrc_collins • #stc15
  25. 25. @jrc_collins • #stc15
  26. 26. POP (Prototyping On Paper) @jrc_collins • #stc15
  27. 27. @jrc_collins • #stc15
  28. 28. @jrc_collins • #stc15
  29. 29. @jrc_collins • #stc15
  30. 30. @jrc_collins • #stc15
  31. 31. @jrc_collins • #stc15
  32. 32. @jrc_collins • #stc15
  33. 33. Workshop @jrc_collins • #stc15
  34. 34. Scenario • Redesign home screen of LinkedIn app for mobile • Make 8 sketches • You have 5 minutes 
 (37 seconds each) • Explore various ideas @jrc_collins • #stc15
  35. 35. @jrc_collins • #stc15
  36. 36. Sketch @jrc_collins • #stc15
  37. 37. 5minutes @jrc_collins • #stc15
  38. 38. Seek feedback @jrc_collins • #stc15
  39. 39. 5minutes @jrc_collins • #stc15
  40. 40. Refine @jrc_collins • #stc15
  41. 41. 5minutes @jrc_collins • #stc15
  42. 42. Results @jrc_collins • #stc15
  43. 43. @jrc_collins • #stc15
  44. 44. @jrc_collins • #stc15
  45. 45. @jrc_collins • #stc15
  46. 46. @jrc_collins • #stc15
  47. 47. @jrc_collins • #stc15
  48. 48. Thank you! JOHN COLLINS • SENIOR TECHNICAL WRITER • ATLASSIAN • @JRC_COLLINS

×