wireframing, prototyping, mockuping
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).