Wireframing, Mockups, and Prototyping Made Easy
102 likes21,297 views
The document outlines a workshop by John Collins on wireframing, mockups, and prototyping, emphasizing the importance of sketching for improving user experience and visual communication. It covers terminology, tools, and various approaches to creating visualizations, along with a hands-on scenario to redesign an app interface. The workshop encourages participation through sketching exercises and feedback sessions.
Wireframing, Mockups, and Prototyping Made Easy
- 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
- 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
- 13. Sketch Wireframe Mockup @JRC_COLLINS • #LAVACON
- 14. Fidelity Sketch Wireframe Mockup @JRC_COLLINS • #LAVACON
- 22. • Big cool statistic • 2,56 9 • Add-Ons in Marketplace @JRC_COLLINS • #LAVACON
- 23. Balsamiq Mockups @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
- 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
- 39. Seek feedback @JRC_COLLINS • #LAVACON
- 52. Thank you! JOHN COLLINS • SR TECH WRITER • ATLASSIAN • @JRC_COLLINS