A wireframe is a visual representation of the content
of a page or app. It is a visualization tool and process
for presenting proposed functionality, structure, and
content of a web page, website, or application.
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
A mockup consists of one or several static pictures
that resemble the future UI of the application in as
many aspects as possible.
Slide 9
Slide 9 text
Photoshop
Slide 10
Slide 10 text
Photoshop
Slide 11
Slide 11 text
Sketch
Slide 12
Slide 12 text
A prototype is an early sample, model, or release of a
product built to test a concept or process or to act as
a thing to be replicated or learned from.
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Keynote
Slide 15
Slide 15 text
Xcode
Slide 16
Slide 16 text
Paper + Pop
Slide 17
Slide 17 text
Case Study: Twitter
Slide 18
Slide 18 text
Wireframe = Representation
Mockup = Shape/Size/Colors
Prototype = Function
Slide 19
Slide 19 text
Prototype Fidelity
Slide 20
Slide 20 text
Paper Prototypes
Slide 21
Slide 21 text
Low Fidelity
Medium Fidelity
High Fidelity
Slide 22
Slide 22 text
The Tools
Slide 23
Slide 23 text
Lo to Medium Fidelity
Balsamiq http://
balsamiq.com/
Flinto https://
www.flinto.com/
Proto IO http://proto.io/
Moqups https://
moqups.com/
Pop. (iPhone/Android App)
Mockups.me http://
www.mockups.me/
App Cooker http://
www.appcooker.com/
Fluid UI https://
www.fluidui.com/
UX Pin http://uxpin.com/
Slide 24
Slide 24 text
Medium to High Fidelity
Axure http://axure.com
OmniGraffle http://www.omnigroup.com/omnigraffle/
InVision http://www.invisionapp.com/
Justinmind http://www.justinmind.com/
ProtoShare http://www.protoshare.com/
Pixate http://www.pixate.com/
Slide 25
Slide 25 text
High to Very High Fidelity
Sketch http://www.sketchapp.com
Photoshop, Illustrator + Invision
Keynote, PowerPoint
FramerJS http://framerjs.com
Bootstrap, Foundation
Slide 26
Slide 26 text
Why Prototype?
Slide 27
Slide 27 text
“Want to increase innovation?
Lower the cost of failure.”
-Joi Ito
Slide 28
Slide 28 text
Ideas are cheap.
Slide 29
Slide 29 text
Development is expensive.
Slide 30
Slide 30 text
The Customer
Slide 31
Slide 31 text
–Jony Ive
“There are 9 rejected ideas
for every idea that works.”
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
–Frank Lloyd Wright
“You can use an eraser
on the drafting table
or a sledge hammer
on the construction site.”
Slide 34
Slide 34 text
Process
Slide 35
Slide 35 text
Research Design Test
Slide 36
Slide 36 text
MVP
Slide 37
Slide 37 text
$$$$
$ $ $ $$ $$$
Slide 38
Slide 38 text
$ $$ $$ $$$
$$$$
$$$$
$ $ $ $$ $$$
$$$
Slide 39
Slide 39 text
Why Prototype in Code?
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
My Process
Pen + Paper
Lo-Fi Wireframe - Balsamiq
Hi-Fi Mockup - Photoshop, Sketch
Hi-Fi Prototype - Bootstrap, FramerJS
Designer Developer
15%
85% 85%
15%
Prototyper
50% 50%
100% 100%
A More Realistic Future
Slide 62
Slide 62 text
No, designers don’t need
to learn to code.
Slide 63
Slide 63 text
But your team can probably
build better products.
Slide 64
Slide 64 text
And prototyping in code
will help your team build
better products.
Slide 65
Slide 65 text
More Reading
How to Decide What Ideas to Prototype:
http://www.fastcodesign.com/1672929/
how-to-decide-what-ideas-to-prototype
Helpful Rapid Prototyping Methods and Tools:
http://chiefdisruptionofficer.com/helpful-rapid-prototyping-
methods-and-tools-to-bring-digital-ideas-to-life-fast/
A Lean UX Design Process:
http://www.anniestudio.org/a-lean-ux-design-process/