Your career may revolve around words, but knowing a little about sketching can help you understand complicated concepts, communicate more efficiently, drive improvements to the products you work on – or move your career in a new direction! Learn how technical writers, content strategists, and others can improve user experiences with sketching, making mockups, and even creating interactive prototypes – without touching Photoshop or software code. In this session, you will learn: • The difference between sketches, mockups, and prototypes • Basic tools available to help create mockups and prototypes • How to quickly make basic sketches *** Presented as a workshop-format session at Lavacon 2015 in New Orleans. ***

1. JOHN COLLINS • SR TECH WRITER • ATLASSIAN • @JRC_COLLINS
Wireframing, mockups, and
prototyping made easy

2. THE BASICS
GETTING TO KNOW YOU
TERMINOLOGY & TOOLS
WORKSHOP
Agenda
@JRC_COLLINS • #LAVACON

3. About you
@JRC_COLLINS • #LAVACON

4. The basics
@JRC_COLLINS • #LAVACON

5. http://www.leonardoda-vinci.org/fly.html •
https://creativecommons.org/licenses/by-nc-nd/3.0/
@JRC_COLLINS
#LAVACON

6. http://www.leonardoda-vinci.org/Drawing-Of-A-Flying-Machine-large.html • https://creativecommons.org/licenses/by-nc-nd/3.0/@JRC_COLLINS • #LAVACON

7. http://www.wright-brothers.org/Information_Desk/Help_with_Homework/Wright_Photos/Wright_Photos_images/1903_Flyer_Plan.jpg @JRC_COLLINS • #LAVACON

8. “Who should sketch?
Everyone.”
DAVID MANNHEIM
@JRC_COLLINS • #LAVACON

9. “A sketch can look
bad and still work
wonderfully.”
UXMOVEMENT
@JRC_COLLINS • #LAVACON

10. Why do
these things?
Grasp difficult concepts by breaking
into sketches or visualizations.
To explain
People may be more likely to
understand and remember.
To understand
@JRC_COLLINS • #LAVACON

11. Why do
these things?
Suggest improvements to user
experience.
To create
Be the first to explore some visual
ideas for a new feature.
To improve
@JRC_COLLINS • #LAVACON

12. Terminology
@JRC_COLLINS • #LAVACON

13. Sketch Wireframe Mockup
@JRC_COLLINS • #LAVACON

14. Fidelity
Sketch Wireframe Mockup
@JRC_COLLINS • #LAVACON

15. Fidelity
Sketch
Prototype
Wireframe Mockup
@JRC_COLLINS • #LAVACON

16. Fidelity
Sketch
Prototype
Wireframe
Prototype
Mockup
@JRC_COLLINS • #LAVACON

17. Fidelity
Sketch
Prototype
Wireframe
Prototype
Mockup
Prototype
@JRC_COLLINS • #LAVACON

18. Tools?
@JRC_COLLINS • #LAVACON

19. Presentation
software
Markers &
whiteboard
Pens/pencils &
paper
Tools
@JRC_COLLINS • #LAVACON

20. InvisionSketchBalsamiq
Mockups
Tools
@JRC_COLLINS • #LAVACON

21. Sketching
@JRC_COLLINS • #LAVACON

22. • Big cool statistic
• 2,56
9
• Add-Ons in Marketplace
@JRC_COLLINS • #LAVACON

23. Balsamiq Mockups
@JRC_COLLINS • #LAVACON

24. @JRC_COLLINS
#LAVACON

25. @JRC_COLLINS • #LAVACON

26. @JRC_COLLINS • #LAVACON

27. POP
(Prototyping On Paper)
@JRC_COLLINS • #LAVACON

28. • Big cool statistic
• 2,56
9
• Add-Ons in Marketplace
@JRC_COLLINS • #LAVACON

29. @JRC_COLLINS • #LAVACON

30. @JRC_COLLINS • #LAVACON

31. @JRC_COLLINS • #LAVACON

32. @JRC_COLLINS • #LAVACON

33. @JRC_COLLINS • #LAVACON

34. Workshop
@JRC_COLLINS • #LAVACON

35. •Redesign home screen of LinkedIn app for mobile
•Make 8 sketches
•You have 5 minutes (37 seconds each)
•Explore various ideas
Scenario
@JRC_COLLINS • #LAVACON

36. @JRC_COLLINS • #LAVACON

37. Sketch
@JRC_COLLINS • #LAVACON

38. 5minutes
@JRC_COLLINS • #LAVACON

39. Seek feedback
@JRC_COLLINS • #LAVACON

40. 5minutes
@JRC_COLLINS • #LAVACON

41. Refine
@JRC_COLLINS • #LAVACON

42. 5minutes
@JRC_COLLINS • #LAVACON

43. Results
@JRC_COLLINS • #LAVACON

44. @JRC_COLLINS • #LAVACON

45. @JRC_COLLINS • #LAVACON

46. @JRC_COLLINS • #LAVACON

47. @JRC_COLLINS • #LAVACON

48. @JRC_COLLINS
#LAVACON

49. @JRC_COLLINS
#LAVACON

50. @JRC_COLLINS
#LAVACON

51. @JRC_COLLINS
#LAVACON

52. Thank you!
JOHN COLLINS • SR TECH WRITER • ATLASSIAN • @JRC_COLLINS