Get in touch!
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
August 11, 2020
Wireframes and prototypes are two essential creations in the user experience (UX) design process. In fact, according to a study by Neilsen Norman Group with UX design professionals and how they communicate their work, “Static wireframes were the most frequently produced deliverable overall (71% of respondents produced static wireframes ‘often’.)” Additionally it was noted that “Interactive prototypes are the most popular deliverable across multiple different target audiences.”
So they're widely used, but what are they? Also, what makes them different and when do you use them? Keep reading, friend.
In its most basic form a wireframe is a rough sketch of a web page, app screen, kiosk monitor, or any other interface. Included in a given wireframe is an outline of the interface features, functionality, and approximate layout.
This can be (and often is) doodled in a sketchpad, scrawled across a whiteboard, or slapped together in some visual editor (heck, even MS Paint might work in a pinch), but it is more likely created using a UX design tool, like Adobe XD, Invision, Figma, Balsamiq, or the like, as it’s far easier to revise, iterate, and collaborate in those tools, especially when geographically separated. Each of these software solutions have their own host of benefits, but that head-to-head comparison will be discussed another day.
Regardless of where they are made, be it the pages of sketchbook or the pixels of a program, wireframes are intentionally low fidelity, meaning they are made up of simple boxes, arrows, copy (potentially even placeholder) and are typically completely grayscale. This is intentional as they are meant to be a vehicle for getting ideas down fast, which can in turn kickstart review, revision, and collaboration. As for process, iteration isn’t optional; it is required to create a good UX design.
But static wireframes are not without their limitations...
In short, wireframes are a relatively quick, cheap, and easy way to get web page or app layouts down and ideas flowing. They should help a team visualize interface layout, features, and hierarchy and explore ideal states as well as fringe use cases.
Before talking about prototypes, here are three tips on wireframe creation:
If you remember nothing else, remember this: wireframe should be collaborative, iterative and exploratory.
If a wireframe is a quick sketch, then a prototype is a blueprint for the entire user experience. And while a wireframe can be on the back of a napkin, a prototype is definitely done in a UX design tool (again, different tools may have different capabilities and features – pick your poison).
One other piece of nuance: “prototype” also implies a clickable or tappable functionality to move around through the prototype, and in fact is commonly and even best referred to as an “interactive prototype,” but nuance aside, we will use “Prototype” to mean the same thing.
As to where prototypes fit within a UX project stage, prototypes are most often created as a product of progress. Once enough wireframes have been created and approved, they can be grouped together with click, tap, and other UX functionality (modals, sticky headers, etc.) to create a simulation of the designed UX, all without any code. This way, teams can see the flow from one page to another, the expected interactions that should be designed, and ensure all is intuitive and smooth, with relative ease and with fairly low effort to revise.
Building this interaction is time consuming but worth it as it provides a platform for clients, usability testers, or other stakeholders to emulate the intended user flows. As such, adding in more true-to-life details, like product images, copy, or calls to action makes prototypes all the better, and the better the prototype, the more likely you’ll be met with resounding "ah-ha's" from all involved.
But this lifelike likeness comes with a cost: the inclusion of interaction and the overall high-fidelity nature of prototypes makes them a high-effort deliverable, so larger revisions should be kept to a minimum. They will happen – afterall the point is to see and explore the UX designs and their flow from one to the next – but this is why we start in wireframes and move into prototypes versus jumping straight into a high-effort prototyping.
This sounds like a heavy lift, but you know what’s more time consuming? Sending your wireframes down the pike to visual design then into development and once built and pushed to the live site only then thing finding quirky, wonky, or just-plain wrong experiences that could have been found and solved for in the UX design stage. Measure twice. Cut once.
One of the most elegant parts of prototyping is building digital experiences visually and without any code. Like wireframing, this is your chance to explore, bend, and break your designs.
Here are three tips to keep in mind when creating interactive prototypes:
Again, if you remember just one thing about prototypes, they breathe life into wireframes, often with higher fidelity and emulating intended experiences.
If you want to hear more about what how we help clients with user experience research, strategy, and design, drop us a love note: hello@cxperts.io
.png){kind=logo}
