Wireframing, Prototyping, Mockuping - What’s The Difference?

76149377313f684c3131f6a28021f988?s=47 Marcin Treder
October 05, 2012

Wireframing, Prototyping, Mockuping - What’s The Difference?

UXPin - The UX Design App - http://www.uxpin.com

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.
Confusing wireframes with prototypes is like assuming that an architectural blueprint (a detailed plan of a building-to-be) and a display house, are the same thing.

76149377313f684c3131f6a28021f988?s=128

Marcin Treder

October 05, 2012
Tweet

Transcript

  1. WIREFRAMING, PROTOTYPING, MOCKUPING What’s The Difference? UXPIN & DESIGNMODO COURSE

    ON DOCUMENTING DESIGN
  2. WWW.UXPIN.COM - THE UX DESIGN APP THE UX DESIGN APP

  3. WWW.UXPIN.COM - THE UX DESIGN APP Wireframe = Prototype =

    Mockup?
  4. WWW.UXPIN.COM - THE UX DESIGN APP Picture by Harvey Dogson

    NO!
  5. WWW.UXPIN.COM - THE UX DESIGN APP Confusing wireframes with prototypes

    is like assuming that an architectural blueprint and a display house, are the same thing.
  6. WWW.UXPIN.COM - THE UX DESIGN APP A BLUEPRINT Picture by

    Todd Ehlers serves as a building plan and should specify how the building should be built
  7. WWW.UXPIN.COM - THE UX DESIGN APP A DISPLAY HOUSE Picture

    by seier+seier provides a test drive for future residents
  8. WWW.UXPIN.COM - THE UX DESIGN APP WIREFRAME PROTOTYPE

  9. Picture by seier+seier Picture by oskay The same differentiation can

    be applied to wireframes, prototypes and mockups. WWW.UXPIN.COM - THE UX DESIGN APP
  10. WIREFRAME, PROTOTYPE, MOCKUP: They look different, they communicate something different

    and they serve different purposes. WWW.UXPIN.COM - THE UX DESIGN APP
  11. WIREFRAME, PROTOTYPE, MOCKUP: They look different, they communicate something different

    and they serve different purposes. WWW.UXPIN.COM - THE UX DESIGN APP A wireframe is a low fidelity representation of a design
  12. WWW.UXPIN.COM - THE UX DESIGN APP A wireframe is a

    low fidelity representation of a design Wireframe should clearly show: - the main groups of content (what?) - the structure of information (where?) - a description and basic visualisation of the user – interface interaction (how?)
  13. WWW.UXPIN.COM - THE UX DESIGN APP A Prototype is a

    middle to high fidelity representation of the final product, which simulates user interface interaction.
  14. WWW.UXPIN.COM - THE UX DESIGN APP 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 interactions with the interface - test the main interactions in a way similar to the final product
  15. WWW.UXPIN.COM - THE UX DESIGN APP 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 interactions with the interface - test the main interactions in a way similar to the final product
  16. WWW.UXPIN.COM - THE UX DESIGN APP 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.
  17. WWW.UXPIN.COM - THE UX DESIGN APP 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 of information, visualises the content and demonstrates the basic functionalities in a static way - encourages people to actually review the visual side of the project
  18. WWW.UXPIN.COM - THE UX DESIGN APP WRAP UP Fidelity Cost

    Use General traits Wireframe Low Fidelity $ Documentation, Quick communication Sketch, black, white&grey representation of the interface Prototype Middle to High Fidelity $$$ User testing, reusable backbone of the interface Interactive Mockup Middle to High Fidelity $$ Gathering feedback and getting buy-in from stakeholders Static visualization
  19. WWW.UXPIN.COM - THE UX DESIGN APP Read more: http://designmodo.com/ wireframing-prototyping-

    mockuping/
  20. WWW.UXPIN.COM - THE UX DESIGN APP THE UX DESIGN APP

  21. WWW.UXPIN.COM - THE UX DESIGN APP

  22. Marcin Treder is a design enthusiast that literally lives for

    creating the best user experience possible. After years working as a UX Designer and UX Manager he focused on his own start-up UXPin that provides tools for UX Designers all over the world. UXPin tools are used by designers in companies like Google, Apple, Microsoft, IBM, Salesforce. UXPin was recently voted the best start-up in Central and Eastern Europe. Marcin enjoys writing (e.g. for UXMag, DesignModo, SpeckyBoy...), blogging (Blog UXPin, UXAid, Startup Pirate) and tweeting (@uxpin, @marcintreder).