Prototyping
Ran LironUX lead, NICE Enterprise
Ran LironUX lead, Enterprise
And also- UX mentor at Google Launchpad- Lecturer at Shenkar
In the past- UX team lead at Netcraft- Senior UX designer at Matrix- Lecturer at Netcraft Academy and John Bryce
I am going to talk about...
3
Tools Fidelity Inspiration
4
Prototyping Tools
5
High-end:Axure, Just-in-mind, Indigo Studio
Office:PowerPoint, Visio
sketching: Balsamiq, Pen & Paper, whiteboard
Visual design:Fireworks, Photoshop, OmniGraffle
Code: HTML & JavaScript
The Common Prototyping Tools
Balsamiq: Rough Sketch
=
Axure: High-Fi Interactive Prototype
8
Pencil
More cool tools
9
Power Mockups plugin for PowerPoint
More cool tools
10
Choose your tools according to the required
fidelity
11
12
Fidelity
The Fidelity Spectrum
high fidelityInteractive prototype
Rough sketch
13
14
WireframeInteractive wireframe
Mockup/ Demo
The Fidelity Spectrum
High fidelityInteractiveprototype
Rough sketch
Higher Fidelity
15
Visual design
Interaction
Content
Code
Elements of Fidelity
Fidelity/Tool
16
Interactionfidelity
Visual fidelityHigh
Low
HighLow
The realproduct
HTML &JS
AxureJustInMind
Indigo,
Photoshop
Visio
PowerPoint
Whiteboard
Fireworks
Pen & paper
Pencil
Balsamiq
Prototype – Deliverables
17
Creating wireframes by designers is delaying the product development process... I see that as a bad process and use of tools. Instead... Designers and engineers should work together on coding.hi-fidelity prototypes using HTML, CSS, and JavaScript
Tomer Sharon
Ran Liron
I disagree.
18
wireframeInteractive wireframe
Mockup/ Demo
Choosing the Prototype FidelityRough sketch
TimeSkills
Decision making
-Requires moreHigher fidelity
High fidelityInteractiveprototype
The Effort
19
1.5 Day ofan expert
1.5 Day ofan expert
45 Minutesof a novice
45 Minutesof a novice
20
WireframeInteractive Wireframe
Mockup/ Demo
Choosing the Prototype FidelityRough Sketch
creates a commitment
High fidelityInteractiveprototype
What am I going to do with this prototype?
Ask Yourself
21
Making discussionvs.
DocumentationIs the prototype part of a dialog
or a result of it?
What Is The Prototype Purpose?
22
Making discussionvs.
SalesIs the prototype in-house tool
or a way to impress a customer?
What Is The Prototype Purpose?
23
Early planningvs.
Testing
Will it be used for usability testing?
What Is The Prototype Purpose?
24
25
Explorationvs.
Focusing
26
Exploration: Playing with Ideas
Trying Different Concepts
27
Browser
http://www.website.com/ Search
File Home View Page Layout Insert
Browser
http://www.website.com/ Search
Lorem ipsum dolor sit amet consectetur adipisicing elit sed do
eiusmod tempor incididunt ut labore
et dolore magna aliqua ut enim ad minim veniam
Browser
http://www.website.com/ Search
28
Focusing:Picking the right
idea
29
Focusing
30
Let's play...
Design the homepage of
“Startup Nation Today “
A news site about Israeli startups
Exploration
31
Target audience: Israeli Entrepreneurs
International investors
Design two completely different options
(that don't resemble Ynet, Pinterest or Facebook)
Exploration
32
Where?
Somewhere completely different.
Searching for Inspiration
33
Conclusion
38
The UX mantra is always right –
It depends...
The Bottom Line
39
Which Tool? What Fidelity?
40
Fit to usage
41
High-end:Axure, Just-in-mind, Indigo Studio
Office:PowerPoint, Visio
sketching: Balsamiq, Pen & Paper, whiteboard
Visual design:Fireworks, Photoshop, OmniGraffle
Code: HTML & JavaScript
The Common Prototyping Tools
Check -
More tools
42
Pencil%
Power Mockups
Wirify
Get creative by tapping in to
sources of inspiration
from different contexts
Inspiration
43
44
This Presentation is available online at SlideShare –www.slideShare.com/RanLiron