Wireframe vs. Mock-up. Why and When?

  • 30,229 views
Uploaded 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? …

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.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Thank's for your presentation, nice work ;)
    Are you sure you want to
    Your message goes here
  • Thanks for the information, but this is confusing. On internet many websites and people says that mockup is what you call Wireframe and vice versa
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
30,229
On Slideshare
0
From Embeds
0
Number of Embeds
11

Actions

Shares
Downloads
307
Comments
2
Likes
44

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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