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