Page 1
JOHN COLLINS • SR TECH WRITER • ATLASSIAN • @JRC_COLLINS
Wireframing, mockups, and prototyping made easy
Page 2
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
Page 3
About you
@JRC_COLLINS • #LAVACON
Page 4
The basics
@JRC_COLLINS • #LAVACON
Page 5
http://www.leonardoda-vinci.org/fly.html • https://creativecommons.org/licenses/by-nc-nd/3.0/
@JRC_COLLINS #LAVACON
Page 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
Page 7
http://www.wright-brothers.org/Information_Desk/Help_with_Homework/Wright_Photos/Wright_Photos_images/1903_Flyer_Plan.jpg @JRC_COLLINS • #LAVACON
Page 8
“Who should sketch?Everyone.”
DAVID MANNHEIM
@JRC_COLLINS • #LAVACON
Page 9
“A sketch can look bad and still work wonderfully.”UXMOVEMENT
@JRC_COLLINS • #LAVACON
Page 10
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
Page 11
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
Page 12
Terminology
@JRC_COLLINS • #LAVACON
Page 13
Sketch Wireframe Mockup
@JRC_COLLINS • #LAVACON
Page 14
Fidelity
Sketch Wireframe Mockup
@JRC_COLLINS • #LAVACON
Page 15
Fidelity
SketchPrototype
Wireframe Mockup
@JRC_COLLINS • #LAVACON
Page 16
Fidelity
SketchPrototype
Wireframe Prototype
Mockup
@JRC_COLLINS • #LAVACON
Page 17
Fidelity
SketchPrototype
Wireframe Prototype
MockupPrototype
@JRC_COLLINS • #LAVACON
Page 18
Tools?
@JRC_COLLINS • #LAVACON
Page 19
Presentation software
Markers & whiteboard
Pens/pencils & paper
Tools
@JRC_COLLINS • #LAVACON
Page 20
InvisionSketchBalsamiq Mockups
Tools
@JRC_COLLINS • #LAVACON
Page 21
Sketching
@JRC_COLLINS • #LAVACON
Page 22
• Big cool statistic
• 2,569
• Add-Ons in Marketplace
@JRC_COLLINS • #LAVACON
Page 23
Balsamiq Mockups
@JRC_COLLINS • #LAVACON
Page 24
@JRC_COLLINS #LAVACON
Page 25
@JRC_COLLINS • #LAVACON
Page 26
@JRC_COLLINS • #LAVACON
Page 27
POP(Prototyping On Paper)
@JRC_COLLINS • #LAVACON
Page 28
• Big cool statistic
• 2,569
• Add-Ons in Marketplace
@JRC_COLLINS • #LAVACON
Page 29
@JRC_COLLINS • #LAVACON
Page 30
@JRC_COLLINS • #LAVACON
Page 31
@JRC_COLLINS • #LAVACON
Page 32
@JRC_COLLINS • #LAVACON
Page 33
@JRC_COLLINS • #LAVACON
Page 34
Workshop
@JRC_COLLINS • #LAVACON
Page 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
Page 36
@JRC_COLLINS • #LAVACON
Page 37
Sketch
@JRC_COLLINS • #LAVACON
Page 38
5minutes
@JRC_COLLINS • #LAVACON
Page 39
Seek feedback
@JRC_COLLINS • #LAVACON
Page 40
5minutes
@JRC_COLLINS • #LAVACON
Page 41
Refine
@JRC_COLLINS • #LAVACON
Page 42
5minutes
@JRC_COLLINS • #LAVACON
Page 43
Results
@JRC_COLLINS • #LAVACON
Page 44
@JRC_COLLINS • #LAVACON
Page 45
@JRC_COLLINS • #LAVACON
Page 46
@JRC_COLLINS • #LAVACON
Page 47
@JRC_COLLINS • #LAVACON
Page 48
@JRC_COLLINS #LAVACON
Page 49
@JRC_COLLINS #LAVACON
Page 50
@JRC_COLLINS #LAVACON
Page 51
@JRC_COLLINS #LAVACON
Page 52
Thank you!
JOHN COLLINS • SR TECH WRITER • ATLASSIAN • @JRC_COLLINS