WIREFRAMING,PROTOTYPING,MOCKUPINGWhat’s The Difference?         UXPIN & DESIGNMODO COURSE ON DOCUMENTING DESIGN
THE UX DESIGN APP       WWW.UXPIN.COM - THE UX DESIGN APP
Wireframe = Prototype = Mockup?      WWW.UXPIN.COM - THE UX DESIGN APP
NO!Picture by Harvey Dogson   WWW.UXPIN.COM - THE UX DESIGN APP
Confusing wireframes withprototypes is like assuming that anarchitectural blueprint and a displayhouse, are the same thing...
Picture by Todd Ehlers  A BLUEPRINT  serves as a building plan and should  specify how the building should be  built   WWW...
Picture by seier+seierA DISPLAYHOUSE provides a test drive for future residentsWWW.UXPIN.COM - THE UX DESIGN APP
WIREFRAME                PROTOTYPE     WWW.UXPIN.COM - THE UX DESIGN APP
The same                         differentiation                         can be applied to                         wirefram...
WIREFRAME, PROTOTYPE, MOCKUP:They  look different, theycommunicate something differentand they serve different purposes.     ...
A wireframe is a low fidelity representation of a design    WIREFRAME, PROTOTYPE, MOCKUP:    They  look different, they    c...
A wireframe is a low fidelity representation of a designWireframe should clearly show:- the main groups of content (what?)-...
A Prototype is a middle to high fidelityrepresentation of the final product, which simulatesuser interface interaction.     ...
A Prototype is a middle to high fidelity         representation of the final product, which simulates         user interface...
A Prototype is a middle to high fidelity         representation of the final product, which simulates         user interface...
A mockup is a middle to high fidelity, static,design representation. Very often a mockup isa visual design draft, or even t...
A mockup is a middle to high fidelity, static,      design representation. Very often a mockup is      a visual design draf...
WRAP UP                  Fidelity              Cost              Use                 General traits                       ...
Read more:http://designmodo.com/wireframing-prototyping-mockuping/     WWW.UXPIN.COM - THE UX DESIGN APP
THE UX DESIGN APP       WWW.UXPIN.COM - THE UX DESIGN APP
WWW.UXPIN.COM - THE UX DESIGN APP
Marcin Treder is a design enthusiast thatliterally lives for creating the best userexperience possible. After years workin...
Upcoming SlideShare
Loading in...5
×

WIREFRAMING, PROTOTYPING, MOCKUPING

24,314

Published on

A couple of years ago I realised that a lot of my IT, non-designer, friends were using the names of my beloved design deliverables synonymously. They assumed that a wireframe, prototype and mockup are exactly the same thing – a kind of greyish, boxy, sketch representing an ingenious idea.
The problem with their simplified view is that they never know what to expect from the work of User Experience designers and they often get confused. ”Why the hell is this not clickable?”, ”Well, I didn’t know that I was supposed to click here…” – these kind of comments are annoyingly common in UX design projects.

Though you may certainly try to live in a display house (you know – its beauty is supposed to demonstrate how cool other houses in the area are), you can’t count on a comfortable stay in a blueprint – it’s just a sheet of paper.
A display house and a blueprint are different means of communication in architecture:
- a blueprint serves as a building plan and should specify how the building should be built
- a display house provides a test drive for future residents
The same differentiation can be applied to wireframes, prototypes and mockups. They look different, they communicate something different and they serve different purposes.
A display house and blueprint do have something in common though – they both represent the final product – actual house. And again exactly the same common trait can be applied to wireframes, prototypes and mockups – all these documents are forms of representation of the final product.
Believe it or not, the difference between a prototype, wireframe and mockup was always one of the first things I tried to teach members of my User Experience Design team.
Yes, it’s really that important.
Let’s discuss wireframes, prototypes and mockups in detail, so you’ll grasp the idea of what to use in specific situations.

Published in: Design
0 Comments
83 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
24,314
On Slideshare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
621
Comments
0
Likes
83
Embeds 0
No embeds

No notes for slide

WIREFRAMING, PROTOTYPING, MOCKUPING

  1. 1. WIREFRAMING,PROTOTYPING,MOCKUPINGWhat’s The Difference? UXPIN & DESIGNMODO COURSE ON DOCUMENTING DESIGN
  2. 2. THE UX DESIGN APP WWW.UXPIN.COM - THE UX DESIGN APP
  3. 3. Wireframe = Prototype = Mockup? WWW.UXPIN.COM - THE UX DESIGN APP
  4. 4. NO!Picture by Harvey Dogson WWW.UXPIN.COM - THE UX DESIGN APP
  5. 5. Confusing wireframes withprototypes is like assuming that anarchitectural blueprint and a displayhouse, are the same thing. WWW.UXPIN.COM - THE UX DESIGN APP
  6. 6. Picture by Todd Ehlers A BLUEPRINT serves as a building plan and should specify how the building should be built WWW.UXPIN.COM - THE UX DESIGN APP
  7. 7. Picture by seier+seierA DISPLAYHOUSE provides a test drive for future residentsWWW.UXPIN.COM - THE UX DESIGN APP
  8. 8. WIREFRAME PROTOTYPE WWW.UXPIN.COM - THE UX DESIGN APP
  9. 9. The same differentiation can be applied to wireframes, prototypes and mockups. Picture by oskayPicture by seier+seier WWW.UXPIN.COM - THE UX DESIGN APP
  10. 10. WIREFRAME, PROTOTYPE, MOCKUP:They  look different, theycommunicate something differentand they serve different purposes. WWW.UXPIN.COM - THE UX DESIGN APP
  11. 11. A wireframe is a low fidelity representation of a design WIREFRAME, PROTOTYPE, MOCKUP: They  look different, they communicate something different and they serve different purposes. WWW.UXPIN.COM - THE UX DESIGN APP
  12. 12. A wireframe is a low fidelity representation of a designWireframe should clearly show:- the main groups of content (what?)- the structure of information (where?)- a description and basic visualisationof the user – interface interaction(how?) WWW.UXPIN.COM - THE UX DESIGN APP
  13. 13. A Prototype is a middle to high fidelityrepresentation of the final product, which simulatesuser interface interaction. WWW.UXPIN.COM - THE UX DESIGN APP
  14. 14. A Prototype is a middle to high fidelity representation of the final product, which simulates user interface interaction.Prototype should allow the user to:-  experience content and interactionswith the interface-  test the main interactions in a waysimilar to the final product WWW.UXPIN.COM - THE UX DESIGN APP
  15. 15. A Prototype is a middle to high fidelity representation of the final product, which simulates user interface interaction.Prototype should allow the user to:-  experience content and interactionswith the interface-  test the main interactions in a waysimilar to the final product WWW.UXPIN.COM - THE UX DESIGN APP
  16. 16. A mockup is a middle to high fidelity, static,design representation. Very often a mockup isa visual design draft, or even the actual visualdesign. WWW.UXPIN.COM - THE UX DESIGN APP
  17. 17. A mockup is a middle to high fidelity, static, design representation. Very often a mockup is a visual design draft, or even the actual visual design.A well created mockup:-  represents the structure ofinformation, visualises the content anddemonstrates the basic functionalitiesin a static way-  encourages people to actuallyreview the visual side of the project WWW.UXPIN.COM - THE UX DESIGN APP
  18. 18. WRAP UP Fidelity Cost Use General traits Sketch, black, Documentation, Quick white&greyWireframe Low Fidelity $ communication representation of the interface User testing, reusablePrototype Middle to High Fidelity $$$ Interactive backbone of the interface Gathering feedback andMockup Middle to High Fidelity $$ getting buy-in from Static visualization stakeholders WWW.UXPIN.COM - THE UX DESIGN APP
  19. 19. Read more:http://designmodo.com/wireframing-prototyping-mockuping/ WWW.UXPIN.COM - THE UX DESIGN APP
  20. 20. THE UX DESIGN APP WWW.UXPIN.COM - THE UX DESIGN APP
  21. 21. WWW.UXPIN.COM - THE UX DESIGN APP
  22. 22. Marcin Treder is a design enthusiast thatliterally lives for creating the best userexperience possible. After years working asa UX Designer and UX Manager he focusedon his own start-up UXPin that providestools for UX Designers all over the world.UXPin tools are used by designers incompanies like Google, Apple, Microsoft,IBM, Salesforce. UXPin was recently votedthe best start-up in Central and EasternEurope. Marcin enjoys writing (e.g. forUXMag, DesignModo, SpeckyBoy...),blogging (Blog UXPin, UXAid, Startup Pirate)and tweeting (@uxpin, @marcintreder).
  1. A particular slide catching your eye?

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

×