wireframing, mockups, and prototyping made easy

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


The basics


http://www.leonardoda-vinci.org/fly.html • https://creativecommons.org/licenses/by-nc-nd/3.0/

@JRC_COLLINS #LAVACON

https://creativecommons.org/licenses/by-nc-nd/3.0/

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

https://creativecommons.org/licenses/by-nc-nd/3.0/

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

http://www.wright-brothers.org/Information_Desk/Help_with_Homework/Wright_Photos/Wright_Photos_images/1903_Flyer_Plan.jpg

“Who should sketch?Everyone.”

DAVID MANNHEIM


“A sketch can look bad and still work wonderfully.”UXMOVEMENT


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


Why do these things?

Suggest improvements to user experience.

To createBe the first to explore some visual ideas for a new feature.

To improve


Terminology


Sketch Wireframe Mockup


Fidelity

Sketch Wireframe Mockup


Fidelity

SketchPrototype

Wireframe Mockup


Fidelity

SketchPrototype

Wireframe Prototype

Mockup


Fidelity

SketchPrototype

Wireframe Prototype

MockupPrototype


Tools?


Presentation software

Markers & whiteboard

Pens/pencils & paper

Tools


InvisionSketchBalsamiq Mockups

Tools


Sketching


• Big cool statistic

• 2,569

• Add-Ons in Marketplace


Balsamiq Mockups


POP(Prototyping On Paper)


• Big cool statistic

• 2,569

• Add-Ons in Marketplace


Workshop


•Redesign home screen of LinkedIn app for mobile•Make 8 sketches•You have 5 minutes (37 seconds each)•Explore various ideas

Scenario


Sketch


5minutes


Seek feedback


5minutes


Refine


5minutes


Results


Thank you!

JOHN COLLINS • SR TECH WRITER • ATLASSIAN • @JRC_COLLINS

wireframing, mockups, and prototyping made easy

Design