A wireframe is not the same as a prototype but even seasoned design professionals can sometimes get the two terms mixed up. It’s time to set things straight once and for all, since (semantics aside) the difference between a wireframe and a prototype is actually quite substantial. Editor’s note: This is an article by Marcin Treder, CEO of UXPin.
A wireframe is a low-fidelity representation of a product’s design. It has three simple objectives; the clear presentation of:
- Main groups of information
- Layout/structure of information
- Core visualization and descriptions of user interface interactions
Wireframes, if properly created, serve as the backbone of the product. It’s just like an architectural blueprint of a house: It states plainly and clearly what should go where.
Visual Characteristics of a Wireframe
The visual characteristics of a wireframe are very limited. Usually designers just use boxes, lines, and a grayscale color palette (to represent different levels of visual hierarchy in the design).
Benefits of Wireframing
Since wireframes are quick and cheap to produce — especially when you use dedicated wireframing software such as UXPin, Balsamiq, or Axure — they should be used right at the beginning of the design process. There’s nothing better for gathering feedback early on than a solid wireframe. Why?
Because people can focus more on function, information architecture, UX, user flow, usability, user interactions, and so on, rather than having these foundational aspects of a design being overshadowed by its aesthetics. In addition, any required changes can be done quickly without too many tedious code and graphics-editor adjustments. This video that my startup put together shows how easy wireframing can be.
Interactive Wireframe (or Clickable Wireframe)
Sometimes designers like to increase the fidelity of their work a bit to stress the importance of certain parts of the UI, as well as to present and quickly test the soundness of interactions between elements. A very popular way of doing that quickly is the creation of an interactive wireframe, also known as a clickable wireframe.Interactive wireframes might be very helpful on the first presentation of a design to a stakeholder or client. If you’ve ever heard the classic question “What happens if I click this button?” you will have the answer right on your interactive wireframe.
It’s impressive and engaging.
Being Careful with the Presentation of Wireframes
To a layman, e.g. our project clients or non-technical managers/employers, looking at a wireframe might be perplexing because wireframes might not have any resemblance to the final design at all.
That’s why we need to take some time to explain what a wireframe is — and, more importantly, its significance within the design process — before we show it to individuals that are uninitiated to the concept of wireframes.
A prototype is a mid- to high-fidelity representation of the final user interface. The goal of a prototype is straightforward: Simulate the interaction between the user and the interface.
Whenever a button is clicked, the appropriate action must occur, mimicking the experience of a full product.
Visual Characteristics of a Prototype
When it comes to aesthetics, a prototype may closely resemble the final version of the product. Basically, a prototype looks like the final product, but it just doesn’t have the nuts-and-bolts yet (i.e.
HTML, CSS, JS, server-side programming, databases, etc.) IA should be demonstrated, and typography should, to a reasonable extent, represent the final version. Clicking on an interactive object should demonstrate its subsequent response.Primary colors should be all set, key content (at least the essential pieces) must be present,
Benefits of Prototyping
Why is prototyping important?
Because prototypes are typically for testing a product with real users. Early testing of prototypes can save tons of money and time that would have gone toward developing the wrong interface and back-end product architecture. It is a good validation tool for the design and development of the product.
In addition, showing a prototype to users and asking them to go through some basic use-cases is amazingly insightful and inspiring for the entire team. Instead of spending time coding the prototype, designers today can engage in a rapid and cost-effective prototyping process using software that I’ll talk about in a bit. Any changes you need to make after user-testing can be implemented more quickly, without wasting the time of your engineers.
Understanding the very nature of design, and the difference between wireframes and prototypes, is really just the entry point to the world of user experience design. The magic happens when you’re able to combine the many pieces of the process into a cohesive, effective, and efficient workflow. When I was managing a UX design department a few of years back, the biggest mistake I saw in our process was this: We treated wireframes as disposable and non-essential.
So we would rush the process and we wouldn’t give the wireframing process the time and effort it deserves. They were too sketchy and messy to be used as a blueprint — the foundational backbone — of a solid prototype and the final product.
A Few Tips
- While wireframing, create reusable elements that can be edited so that when you’re in the prototyping stage, you can simply just refine those elements
- Make sure that when the wireframe is done, it represents the latest feedback from your teammates and stakeholders
- Use software to your advantage
Wireframing and Prototyping Software
I’ll end with a list of tools you can use to make wireframing and prototyping easier. Below you’ll find some of the most popular wireframing and prototyping tools, including the one my company has developed. Test them (most have some sort of free trial) and choose the weapon that fits you and your team best!
We have over 900 UI elements ready to be used on wireframes and prototypes. Please feel free to ask me questions about it in the comments.
A very robust prototyping tool that can output HTML/CSS and demonstrate touchscreen interactions.
Prototypes can be tested in actual devices.
A very popular, longstanding, and easy to use wireframing app. Limited to static wireframing only though.
Allows for wireframing in the browser.
A simple wireframing tool. Product development stopped in 2010.
A wireframing and prototyping app that’s popular in the enterprise software sector.
Wireframing and prototyping in the browser.
Allows you to build functional prototypes using your existing designs.
You can’t draw anything, but you can add links between screenshots.
- A Quick Introduction to Agile UX Design
- Quick Overview of User Experience for Web Designers
- Improving UX with Customer Journey Maps
- Related categories:UX Design and UI Design
Resources by Industry
- Web Design for Excavation Companies: Top 5 Tips (With Examples!)
- 5 Web Design Tips for Fence Installers
- 5 Simple and Successful Web Design Tips for Auto Parts Retailers
- Tips for Medical Website Designs
- Medical Website Design from an Award Winning Agency
- Top 10 Effective Web Design Tips for Auto Service Centers
- Web Design for Renewable Energy: Tips for a Site That Shines
- Insurance Website Design Services
- 5 Web Design Tips for Fertility Clinics
How is your website’s SEO?
Use our free tool to get your score calculated in under 60 seconds.
Get posts by email
Join 200,000 marketing managers and subscribe to Revenue Weekly!
"*" indicates required fields
Join our mission to provide industry-leading digital marketing services to businesses around the globe - all while building your personal knowledge and growing as an individual.