wireframing, prototyping, mockuping
DESCRIPTION
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.TRANSCRIPT
WIREFRAMING, PROTOTYPING, MOCKUPING What’s The Difference?
UXPIN & DESIGNMODO COURSE ON DOCUMENTING DESIGN
WWW.UXPIN.COM - THE UX DESIGN APP
Wireframe = Prototype = Mockup?
WWW.UXPIN.COM - THE UX DESIGN APPPicture by Harvey Dogson
NO!
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.
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
WWW.UXPIN.COM - THE UX DESIGN APP
A DISPLAY HOUSE
Picture by seier+seier
provides a test drive for future residents
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
WIREFRAME, PROTOTYPE, MOCKUP: They look different, they communicate something different and they serve different purposes.
WWW.UXPIN.COM - THE UX DESIGN APP
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
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?)
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.
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
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
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.
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
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 interfaceInteractive
Mockup Middle to High Fidelity $$Gathering feedback and
getting buy-in from stakeholders
Static visualization
WWW.UXPIN.COM - THE UX DESIGN APP
Read more:
http://designmodo.com/wireframing-prototyping-mockuping/
WWW.UXPIN.COM - THE UX DESIGN APP
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).