When people think about UX design, wireframes are often one of the first things that come to mind. That’s because of all the efforts that go into the UX process, wires are one of the only things that actually get seen.
Consequently, when people attempt to explain UX, the conversation tends to revolve around wires because they’re tangible and, if done well, easy to understand.
Given that wires are such a prominent part of the UX process, it’s important that we be able to talk about their role in the larger design process.
Wireframes are more than just blueprints
One common way of thinking is that wireframes are the blueprints for a website. This is an easy mistake to make because, frankly, that’s what they look like, and in many respects they do serve a similar purpose. But thinking of wireframes as blueprints encourages the idea that they’re simply meant to document the layout of a page. While page layout is one of the major things that wires do their real purpose is to simulate the experience of using a website or app, something more commonly referred to as the user experience.
Wireframes are not just blueprints, they are user experience simulations, and designing these simulations is ultimately what user experience design is all about.
Wireframes and the user experience (UX) design process
Now that we’ve identified what wireframes are, let’s talk about how they actually fit into the UX design process. To understand this, one must know the two core principles or components of UX design: affordances and signifiers.
An affordance is an action a website or app allows users to do and a signifier is what lets users know they can perform that action. For example, the ability to submit a form on a website is an affordance. Form fields and a “Submit” button on a page are signifiers that tell users they can fill out and submit a form.
In the most basic sense, designing a user experience is the act of identifying affordances and choosing appropriate signifiers in the form of user-interface elements.
After UX designers identify affordances and select appropriate signifiers, they document those in—you guessed it—wireframes. User experience is what emerges from this relationship between affordances and signifiers, and wireframes are how we document that relationship so we can simulate the UX.
Ultimately, wireframes are one of the most important tools available to UX designers because they provide the opportunity to share ideas in a way that allows collaborators and clients to immerse themselves in the potential of what an experience might be. It’s essential to understand the true purpose of wireframes because framing them in any other way diminishes their value within the UX process, design process, and beyond.
When engaging in a new website design or development project, the UI/UX design element is typically the largest deliverable in phase 2. After discovery and concurrent with content planning. To learn more, visit our process page.
