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.

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).