0
Wireframe vs. Mock-up      Why and When?            or     Connect the Dots       Vojtech Outulny
Agenda          • What are the dots?          • Connect the dots          • Low-Fi vs. Hi-Fi Wireframes          • Dots Pr...
What are the dots?          • What is Wireframe?          • What is Mock-up?          • What is Sketch?          • What is...
Wireframe One for beginning...Vojtech Outulny         4     28.5.2011
Wireframe... It is about...          • functionality and layout.          • functional specs.          • notes about the i...
Mock-up One for beginning...Vojtech Outulny         6   28.5.2011
Mock-up... It is about...          • look and feel          • build on the wireframe with color,                  graphics...
Sketch One for beginning...Vojtech Outulny         8   28.5.2011
Sketch It is about...          • freehand drawing          • not intended as a finished work          • quick way to recor...
Prototype It is about...          • simulate the final design, aesthetics, materials and                  functionality of...
Connect the dotsVojtech Outulny          11          28.5.2011
Connect the dotsVojtech Outulny          12          28.5.2011
Low-Fi vs. Hi-Fi Wireframes or                  it Mock-up already?Vojtech Outulny             13                 28.5.2011
Dots PracticallyVojtech Outulny          14          28.5.2011
Dots Practically... High-Fi Wireframe          • Wrong feedback for first draft and early iterations          • Errors are...
Dots Practically... 2          • First Draft Wireframe                  • Low-Fi – 0.5 – 1 days                  • High-Fi...
Q&A             Vojtech Outulny  Web: insidemyideas.wordpress.com     E-mail: v.outulny@gmail.comLinkedIn: linkedin.com/in...
iPhone Visio Stencil – Yahoo 1.1 http://insidemyideas.wordpress.com/2011/05/19/iphone-visio-stencil-yahoo-1-1-updated/Vojt...
Upcoming SlideShare
Loading in...5
×

Wireframe vs. Mock-up. Why and When?

32,895

Published on

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.

Published in: Technology, Business
2 Comments
50 Likes
Statistics
Notes
No Downloads
Views
Total Views
32,895
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
354
Comments
2
Likes
50
Embeds 0
No embeds

No notes for slide

Transcript of "Wireframe vs. Mock-up. Why and When?"

  1. 1. Wireframe vs. Mock-up Why and When? or Connect the Dots Vojtech Outulny
  2. 2. Agenda • What are the dots? • Connect the dots • Low-Fi vs. Hi-Fi Wireframes • Dots PracticallyVojtech Outulny 2 28.5.2011
  3. 3. What are the dots? • What is Wireframe? • What is Mock-up? • What is Sketch? • What is Prototype?Vojtech Outulny 3 28.5.2011
  4. 4. Wireframe One for beginning...Vojtech Outulny 4 28.5.2011
  5. 5. Wireframe... It is about... • functionality and layout. • functional specs. • notes about the intended functionality • navigational systems • how interface elements work together • Lack of typographic style, color or graphics This leaves room for the design to be created based on the wireframe.Vojtech Outulny 5 28.5.2011
  6. 6. Mock-up One for beginning...Vojtech Outulny 6 28.5.2011
  7. 7. Mock-up... It is about... • 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 7 28.5.2011
  8. 8. Sketch One for beginning...Vojtech Outulny 8 28.5.2011
  9. 9. Sketch It is about... • freehand drawing • not intended as a finished work • quick way to record an idea for later • try out different ideas • establish a compositionVojtech Outulny 9 28.5.2011
  10. 10. Prototype It is about... • 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 flawsVojtech Outulny 10 28.5.2011
  11. 11. Connect the dotsVojtech Outulny 11 28.5.2011
  12. 12. Connect the dotsVojtech Outulny 12 28.5.2011
  13. 13. Low-Fi vs. Hi-Fi Wireframes or it Mock-up already?Vojtech Outulny 13 28.5.2011
  14. 14. Dots PracticallyVojtech Outulny 14 28.5.2011
  15. 15. Dots Practically... High-Fi Wireframe • 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 • You are not Graphic Designer …Vojtech Outulny 15 28.5.2011
  16. 16. Dots Practically... 2 • 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 dataVojtech Outulny 16 28.5.2011
  17. 17. Q&A Vojtech Outulny Web: insidemyideas.wordpress.com E-mail: v.outulny@gmail.comLinkedIn: linkedin.com/in/vojtechoutulny
  18. 18. iPhone Visio Stencil – Yahoo 1.1 http://insidemyideas.wordpress.com/2011/05/19/iphone-visio-stencil-yahoo-1-1-updated/Vojtech Outulny 18 28.5.2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×