From the course: UX Insights Weekly

What is a wireframe?

From the course: UX Insights Weekly

Start my 1-month free trial Buy for my team

What is a wireframe?

“

- The definition of the term wireframe has become very flexible in the UX design community. I've heard it being used to describe pretty much any representation of the user interface before the final design from story boarding through to visual comps. I want to reclaim that definition because wireframes are very different to other prototype techniques and have specific uses. To me wireframes are black and white representational line drawings of interface components with no decorative elements. They should be using realistic text on interface components but they might not have full text in content areas. They're as if you built your interface by bending wires into a framework. Wireframes have traditionally been useful because of their lower fidelity which stops clients from getting too picky over areas of the design that aren't decided yet. For instance by staying in black and white rather than adding colors. By using a rectangle for the company logo, rather than an updated logo design, and by using rectangles for images rather than displaying photos in a new house style. This means that the focus is on the layout of elements, what functions appear on a page and on progressions between states rather than on what any of those states are going to look like, visually. But wireframes have a couple of issues. Typically they use placeholders for text and images. Like the ubiquitous Lorem Ipsum but that's useless for usability testing because it lacks context. Wireframes are a communication tool for development teams, not for end users. It's hard to help real world people understand that a box with a cross through it is supposed to represent one of the photos they took. Or that the Lorem Ipsum text is a description of the place they visited last week. And wireframes aren't actually that good for communicating interaction design either. Because until you add real content they don't tell you whether headlines of the average length your site uses will sit in the space you left for them, or how well images will zoom to display detail on a product page. Wireframes defer making a lot of decisions until a later time, but they still get used for sign off on a design. That means people are signing off on a bunch of unmade decisions which might get made later on by a developer with no interaction design experience. Just because they're up against a tight deadline or they don't know any better. Because these days most wireframing is done digitally and because there are multiple different wireframing tools, the fidelity of what's called a wireframe can vary from black and white blocks through to something that contains colors, images, and even example text content. This means it's hard to say where wireframing ends, and visual design begins. If you're going to make high fidelity wire frames using a digital tool why not spend the time making more finished visuals? Those comps are probably more useful for most of the purposes wireframes get used for and might even be faster to produce. Especially if you have a design system in place, which already contains renders of many of the interface elements you use, ready to drag and drop into a page. These days traditional wireframes aren't as necessary as they once were, if you're trying to streamline your interaction design workflow I'd say that it's often possible to move directly from a hand drawn paper prototype to test out your main concepts through to a high fidelity comp or even working code created using assets from your in-house design system. You can learn more about paper prototypes and design systems in my two courses on those topics.

Contents