Wireframe vs. Mock-up. Why and When?
Upcoming SlideShare
Loading in...5
×
 

Wireframe vs. Mock-up. Why and When?

on

  • 31,302 views

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.

Statistics

Views

Total Views
31,302
Views on SlideShare
28,539
Embed Views
2,763

Actions

Likes
44
Downloads
292
Comments
2

21 Embeds 2,763

http://insidemyideas.wordpress.com 1006
http://cgt256.wordpress.com 979
http://www.scoop.it 505
http://www.un-a-un.com 99
http://www.paperblog.fr 62
http://lanyrd.com 36
http://sprmario.posterous.com 19
http://www.linkedin.com 17
https://insidemyideas.wordpress.com 11
http://un-a-un.com 7
https://twitter.com 5
https://www.linkedin.com 3
https://si0.twimg.com 3
url_unknown 3
http://www.technotalkative.com 2
https://web.tweetdeck.com 1
http://webcache.googleusercontent.com 1
http://translate.googleusercontent.com 1
http://www.google.be 1
http://twitter.com 1
http://www.slideshare.net 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Thank's for your presentation, nice work ;)
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Processing…
Post Comment
Edit your comment

Wireframe vs. Mock-up. Why and When? Wireframe vs. Mock-up. Why and When? Presentation Transcript

  • 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 PracticallyVojtech Outulny 2 28.5.2011
  • What are the dots? • What is Wireframe? • What is Mock-up? • What is Sketch? • What is Prototype?Vojtech Outulny 3 28.5.2011
  • Wireframe One for beginning...Vojtech Outulny 4 28.5.2011
  • 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
  • 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 and polish • may adjust layout slightly but stays within the general guide of the wireframe.Vojtech Outulny 7 28.5.2011
  • 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 record an idea for later • try out different ideas • establish a compositionVojtech Outulny 9 28.5.2011
  • 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
  • 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 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
  • 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
  • Q&A Vojtech Outulny Web: insidemyideas.wordpress.com E-mail: v.outulny@gmail.comLinkedIn: linkedin.com/in/vojtechoutulny
  • 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