Download - Wireframe vs. Mock-up. Why and When?
Wireframe vs. Mock-up
Why and When? or
Connect the Dots
Vojtech Outulny
28.5.2011 2
Agenda
Vojtech Outulny
• What are the dots?
• Connect the dots
• Low-Fi vs. Hi-Fi Wireframes
• Dots Practically
28.5.2011 3
What are the dots?
• What is Wireframe?
• What is Mock-up?
• What is Sketch?
• What is Prototype?
Vojtech Outulny
28.5.2011 4
Wireframe
Vojtech Outulny
One for beginning...
28.5.2011 5
Wireframe...
• functionality and layout.
• functional specs.
• notes about the intended functionality
• navigational systems
• how interface elements work together
• Lack of typographic style, color or graphics
Vojtech Outulny
It is about...
This leaves room for the design to be created based on the wireframe.
28.5.2011 6
Mock-up
Vojtech Outulny
One for beginning...
28.5.2011 7
Mock-up...
• look and feel
• build on the wireframe with color,
graphics and polish
• may adjust layout slightly but stays
within the general guide of the
wireframe.
Vojtech Outulny
It is about...
28.5.2011 8
Sketch
Vojtech Outulny
One for beginning...
28.5.2011 9
Sketch
• freehand drawing
• not intended as a finished work
• quick way to record an idea for later
• try out different ideas
• establish a composition
Vojtech Outulny
It is about...
28.5.2011 10
Prototype
• simulate the final design, aesthetics, materials and
functionality of the intended design
• may be reduced in size or functionality
• functions working together
• final check for design flaws
Vojtech Outulny
It is about...
28.5.2011 11
Connect the dots
Vojtech Outulny
28.5.2011 12
Connect the dots
Vojtech Outulny
28.5.2011 13
Low-Fi vs. Hi-Fi Wireframes or it Mock-up already?
Vojtech Outulny
28.5.2011 14
Dots Practically
Vojtech Outulny
28.5.2011 15
Dots Practically...
Vojtech Outulny
• Wrong feedback for first draft and early iterations
• Errors are found later => more iterations
• Cannot you use place holders
• You must search for beautiful icons
High-Fi Wireframe
• You are not Graphic Designer
…
28.5.2011 16
Dots Practically... 2
Vojtech Outulny
• First Draft Wireframe
• Low-Fi – 0.5 – 1 days
• High-Fi – 1 – 2 days
• Next Iteration Wireframe
• Low-Fi – 0.5 – 1 days
• High-Fi – 1 – 1.5 days
• Limited means of expression promote creativity
• Content holds context, use real data
Q&A
Vojtech Outulny
Web: insidemyideas.wordpress.com
E-mail: [email protected]
LinkedIn: linkedin.com/in/vojtechoutulny
28.5.2011 18
iPhone Visio Stencil – Yahoo 1.1
http://insidemyideas.wordpress.com/2011/05/19/iphone-visio-stencil-yahoo-1-1-updated/ Vojtech Outulny