JOHN COLLINS • SR TECH WRITER • ATLASSIAN • @JRC_COLLINS Wireframing, mockups, and prototyping made easy
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
JOHN COLLINS • SR TECH WRITER • ATLASSIAN • @JRC_COLLINS
Wireframing, mockups, and prototyping made easy
T H E B A S I C S
G E T T I N G TO K N O W Y O U
T E R M I N O L O G Y & TO O L S
W O R K S H O P
Agenda
@JRC_COLLINS • #LAVACON
About you
@JRC_COLLINS • #LAVACON
The basics
@JRC_COLLINS • #LAVACON
http://www.leonardoda-vinci.org/fly.html • https://creativecommons.org/licenses/by-nc-nd/3.0/
@JRC_COLLINS #LAVACON
http://www.leonardoda-vinci.org/Drawing-Of-A-Flying-Machine-large.html • https://creativecommons.org/licenses/by-nc-nd/3.0/@JRC_COLLINS • #LAVACON
http://www.wright-brothers.org/Information_Desk/Help_with_Homework/Wright_Photos/Wright_Photos_images/1903_Flyer_Plan.jpg @JRC_COLLINS • #LAVACON
“Who should sketch?Everyone.”
DAVID MANNHEIM
@JRC_COLLINS • #LAVACON
“A sketch can look bad and still work wonderfully.”UXMOVEMENT
@JRC_COLLINS • #LAVACON
Why do these things?
Grasp difficult concepts by breaking into sketches or visualizations.
To explainPeople may be more likely to understand and remember.
To understand
@JRC_COLLINS • #LAVACON
Why do these things?
Suggest improvements to user experience.
To createBe the first to explore some visual ideas for a new feature.
To improve
@JRC_COLLINS • #LAVACON
Terminology
@JRC_COLLINS • #LAVACON
Sketch Wireframe Mockup
@JRC_COLLINS • #LAVACON
Fidelity
Sketch Wireframe Mockup
@JRC_COLLINS • #LAVACON
Fidelity
SketchPrototype
Wireframe Mockup
@JRC_COLLINS • #LAVACON
Fidelity
SketchPrototype
Wireframe Prototype
Mockup
@JRC_COLLINS • #LAVACON
Fidelity
SketchPrototype
Wireframe Prototype
MockupPrototype
@JRC_COLLINS • #LAVACON
Tools?
@JRC_COLLINS • #LAVACON
Presentation software
Markers & whiteboard
Pens/pencils & paper
Tools
@JRC_COLLINS • #LAVACON
InvisionSketchBalsamiq Mockups
Tools
@JRC_COLLINS • #LAVACON
Sketching
@JRC_COLLINS • #LAVACON
• Big cool statistic
• 2,569
• Add-Ons in Marketplace
@JRC_COLLINS • #LAVACON
Balsamiq Mockups
@JRC_COLLINS • #LAVACON
@JRC_COLLINS #LAVACON
@JRC_COLLINS • #LAVACON
@JRC_COLLINS • #LAVACON
POP(Prototyping On Paper)
@JRC_COLLINS • #LAVACON
• Big cool statistic
• 2,569
• Add-Ons in Marketplace
@JRC_COLLINS • #LAVACON
@JRC_COLLINS • #LAVACON
@JRC_COLLINS • #LAVACON
@JRC_COLLINS • #LAVACON
@JRC_COLLINS • #LAVACON
@JRC_COLLINS • #LAVACON
Workshop
@JRC_COLLINS • #LAVACON
•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
@JRC_COLLINS • #LAVACON
Sketch
@JRC_COLLINS • #LAVACON
5minutes
@JRC_COLLINS • #LAVACON
Seek feedback
@JRC_COLLINS • #LAVACON
5minutes
@JRC_COLLINS • #LAVACON
Refine
@JRC_COLLINS • #LAVACON
5minutes
@JRC_COLLINS • #LAVACON
Results
@JRC_COLLINS • #LAVACON
@JRC_COLLINS • #LAVACON
@JRC_COLLINS • #LAVACON
@JRC_COLLINS • #LAVACON
@JRC_COLLINS • #LAVACON
@JRC_COLLINS #LAVACON
@JRC_COLLINS #LAVACON
@JRC_COLLINS #LAVACON
@JRC_COLLINS #LAVACON
Thank you!
JOHN COLLINS • SR TECH WRITER • ATLASSIAN • @JRC_COLLINS
Related Documents
