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.

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

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

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

4. NO!
Picture by Harvey Dogson WWW.UXPIN.COM - THE UX DESIGN APP

5. Confusing wireframes with
prototypes is like assuming that an
architectural blueprint and a display
house, are the same thing.
WWW.UXPIN.COM - THE UX DESIGN APP

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. Picture by seier+seier
A DISPLAY
HOUSE
provides a test drive for future
residents
WWW.UXPIN.COM - THE UX DESIGN APP

8. WIREFRAME PROTOTYPE
WWW.UXPIN.COM - THE UX DESIGN APP

9. The same
differentiation
can be applied to
wireframes,
prototypes and
mockups.
Picture by oskay
Picture by seier+seier 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. 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. 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?)
WWW.UXPIN.COM - THE UX DESIGN APP

13. A Prototype is a middle to high fidelity
representation of the final product, which simulates
user interface interaction.
WWW.UXPIN.COM - THE UX DESIGN APP

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 interactions
with the interface
- test the main interactions in a way
similar to the final product
WWW.UXPIN.COM - THE UX DESIGN APP

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 interactions
with the interface
- test the main interactions in a way
similar to the final product
WWW.UXPIN.COM - THE UX DESIGN APP

16. 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.
WWW.UXPIN.COM - THE UX DESIGN APP

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 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
WWW.UXPIN.COM - THE UX DESIGN APP

18. WRAP UP
Fidelity Cost Use General traits
Sketch, black,
Documentation, Quick white&grey
Wireframe Low Fidelity $
communication representation of the
interface
User testing, reusable
Prototype Middle to High Fidelity $$$ Interactive
backbone of the interface
Gathering feedback and
Mockup Middle to High Fidelity $$ getting buy-in from Static visualization
stakeholders
WWW.UXPIN.COM - THE UX DESIGN APP

19. Read more:
http://designmodo.com/
wireframing-prototyping-
mockuping/
WWW.UXPIN.COM - THE UX DESIGN APP

20. THE UX DESIGN APP
WWW.UXPIN.COM - 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).