wireframe vs. mock-up. why and when?
DESCRIPTION
Do you know what a Wireframe and Mock-up are? What is their purpose? When and why should you use them? And how it all fits together? What is a High-Fi Wireframe and how it can bring you in problems? So these questions, I will try to answer and as a bonus I add my experience from using of Low-Fi wireframes.TRANSCRIPT
![Page 1: Wireframe vs. Mock-up. Why and When?](https://reader033.vdocument.in/reader033/viewer/2022042521/5489ae39b479590a0d8b5a11/html5/thumbnails/1.jpg)
Wireframe vs. Mock-up
Why and When? or
Connect the Dots
Vojtech Outulny
![Page 2: Wireframe vs. Mock-up. Why and When?](https://reader033.vdocument.in/reader033/viewer/2022042521/5489ae39b479590a0d8b5a11/html5/thumbnails/2.jpg)
28.5.2011 2
Agenda
Vojtech Outulny
• What are the dots?
• Connect the dots
• Low-Fi vs. Hi-Fi Wireframes
• Dots Practically
![Page 3: Wireframe vs. Mock-up. Why and When?](https://reader033.vdocument.in/reader033/viewer/2022042521/5489ae39b479590a0d8b5a11/html5/thumbnails/3.jpg)
28.5.2011 3
What are the dots?
• What is Wireframe?
• What is Mock-up?
• What is Sketch?
• What is Prototype?
Vojtech Outulny
![Page 4: Wireframe vs. Mock-up. Why and When?](https://reader033.vdocument.in/reader033/viewer/2022042521/5489ae39b479590a0d8b5a11/html5/thumbnails/4.jpg)
28.5.2011 4
Wireframe
Vojtech Outulny
One for beginning...
![Page 5: Wireframe vs. Mock-up. Why and When?](https://reader033.vdocument.in/reader033/viewer/2022042521/5489ae39b479590a0d8b5a11/html5/thumbnails/5.jpg)
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.
![Page 6: Wireframe vs. Mock-up. Why and When?](https://reader033.vdocument.in/reader033/viewer/2022042521/5489ae39b479590a0d8b5a11/html5/thumbnails/6.jpg)
28.5.2011 6
Mock-up
Vojtech Outulny
One for beginning...
![Page 7: Wireframe vs. Mock-up. Why and When?](https://reader033.vdocument.in/reader033/viewer/2022042521/5489ae39b479590a0d8b5a11/html5/thumbnails/7.jpg)
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...
![Page 8: Wireframe vs. Mock-up. Why and When?](https://reader033.vdocument.in/reader033/viewer/2022042521/5489ae39b479590a0d8b5a11/html5/thumbnails/8.jpg)
28.5.2011 8
Sketch
Vojtech Outulny
One for beginning...
![Page 9: Wireframe vs. Mock-up. Why and When?](https://reader033.vdocument.in/reader033/viewer/2022042521/5489ae39b479590a0d8b5a11/html5/thumbnails/9.jpg)
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...
![Page 10: Wireframe vs. Mock-up. Why and When?](https://reader033.vdocument.in/reader033/viewer/2022042521/5489ae39b479590a0d8b5a11/html5/thumbnails/10.jpg)
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...
![Page 11: Wireframe vs. Mock-up. Why and When?](https://reader033.vdocument.in/reader033/viewer/2022042521/5489ae39b479590a0d8b5a11/html5/thumbnails/11.jpg)
28.5.2011 11
Connect the dots
Vojtech Outulny
![Page 12: Wireframe vs. Mock-up. Why and When?](https://reader033.vdocument.in/reader033/viewer/2022042521/5489ae39b479590a0d8b5a11/html5/thumbnails/12.jpg)
28.5.2011 12
Connect the dots
Vojtech Outulny
![Page 13: Wireframe vs. Mock-up. Why and When?](https://reader033.vdocument.in/reader033/viewer/2022042521/5489ae39b479590a0d8b5a11/html5/thumbnails/13.jpg)
28.5.2011 13
Low-Fi vs. Hi-Fi Wireframes or it Mock-up already?
Vojtech Outulny
![Page 14: Wireframe vs. Mock-up. Why and When?](https://reader033.vdocument.in/reader033/viewer/2022042521/5489ae39b479590a0d8b5a11/html5/thumbnails/14.jpg)
28.5.2011 14
Dots Practically
Vojtech Outulny
![Page 15: Wireframe vs. Mock-up. Why and When?](https://reader033.vdocument.in/reader033/viewer/2022042521/5489ae39b479590a0d8b5a11/html5/thumbnails/15.jpg)
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
…
![Page 16: Wireframe vs. Mock-up. Why and When?](https://reader033.vdocument.in/reader033/viewer/2022042521/5489ae39b479590a0d8b5a11/html5/thumbnails/16.jpg)
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
![Page 17: Wireframe vs. Mock-up. Why and When?](https://reader033.vdocument.in/reader033/viewer/2022042521/5489ae39b479590a0d8b5a11/html5/thumbnails/17.jpg)
Q&A
Vojtech Outulny
Web: insidemyideas.wordpress.com
E-mail: [email protected]
LinkedIn: linkedin.com/in/vojtechoutulny
![Page 18: Wireframe vs. Mock-up. Why and When?](https://reader033.vdocument.in/reader033/viewer/2022042521/5489ae39b479590a0d8b5a11/html5/thumbnails/18.jpg)
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