Wireframe vs. Mock-up. Why and When?

download Wireframe vs. Mock-up. Why and When?

of 18

  • date post

  • Category


  • view

  • download


Embed Size (px)


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 of Wireframe vs. Mock-up. Why and When?

  • 1. Wireframe vs. Mock-up Why and When? or Connect the Dots Vojtech Outulny
  • 2. Agenda What are the dots? Connect the dots Low-Fi vs. Hi-Fi Wireframes Dots PracticallyVojtech Outulny 2 28.5.2011
  • 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. Wireframe One for beginning...Vojtech Outulny 4 28.5.2011
  • 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. Mock-up One for beginning...Vojtech Outulny 6 28.5.2011
  • 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. Sketch One for beginning...Vojtech Outulny 8 28.5.2011
  • 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. 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. Connect the dotsVojtech Outulny 11 28.5.2011
  • 12. Connect the dotsVojtech Outulny 12 28.5.2011
  • 13. Low-Fi vs. Hi-Fi Wireframes or it Mock-up already?Vojtech Outulny 13 28.5.2011
  • 14. Dots PracticallyVojtech Outulny 14 28.5.2011
  • 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. 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. Q&A Vojtech Outulny Web: insidemyideas.wordpress.com E-mail: v.outulny@gmail.comLinkedIn: linkedin.com/in/vojtechoutulny
  • 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