Image credit: AngeloDeVal

Fidelity

When making wireframes, aim somewhere between hi-fi and lo-fi

4 minute read

We spent a lot of time this week discussing fidelity as it pertains to UX deliverables: Wireframes in this case. The traditional wisdom has always been that wireframes are quick and dirty interface representations, stripped of any visual design or branding elements. Their purpose is to communicate the general layout and content of a page without getting too deep into the visual design. The thinking goes, “Any UX schmoe can throw down a wireframe and leave the work of making it look nice to the real designers.”

Perhaps I’m being a little cynical here.

However, our discussion this week with Darren Hood revolved around the fact that wireframes don’t have to be ugly. And it seems that there are certain tools out there that, by default, lend themselves to some sloppy looking deliverables.

Low, Mid, High

Mid-level fidelity wireframes represent the sweet-spot of client deliverables.

When creating wireframes, you’ve got three levels of fidelity you shoot for. Low, mid, and high fidelity.

Low fidelity wireframes are “back-of-the-napkin” style sketches that lack details about actual content or visual design. No logos, color, specific typography, images, or copy. Headers and navigation elements may be present, but for the most part, this is a skeleton page layout we’re creating. Low fidelity wireframes are what most people think about when they mention wireframes in the first place. They’re quick, almost throwaway efforts intended to communicate very general concepts about a page.

High fidelity wireframes go the opposite route, including a lot of visual information and copy that may well end up in the final design. These deliverables toe the line between comp and prototype. The upside of high-fidelity wireframes is that they look great. They convey very precisely what the page is going to look like and, as such, can get a client excited about the work you’re doing. On the downside, they take a long time to produce (relatively speaking) and can commit you to design decisions before you’ve had a chance to prove them out with research.

Mid-level fidelity wireframes represent the sweet-spot of client deliverables. With mid-level fidelity, buttons look like buttons and you can imagine the page almost working in its current state. The visual language of the page is tighter, even if not exactly what the finished product will be. A neutral typeface and monochrome color palette are employed, and the page is loose enough that stakeholders understand that there is room for change down the road.

You Are Selling The Design

I’ve been in scenarios where stakeholders have gone blank when looking at low-fidelity artifacts. The vision we’re trying to convey; they can’t see it.

Anthony over at UX Movement, writes a compelling argument for using high-fidelity wireframes. It’s worth a read. But I’d argue what he’s really talking about are mid-level fidelity wireframes. By using a pre-designed interface library, you’re making a deliverable that looks like it could really work in the wild. But it doesn’t go so far as to include imagery, body copy, or interactive elements.

His point, however, is a good one, and it’s one that Hood made in our discussions this week: A good looking, convincing wireframe can really help sell your design.

I’ve been in scenarios where stakeholders have gone blank when looking at low-fidelity artifacts. The vision we’re trying to convey; they can’t see it. I’ve actually had a stakeholder tell me that he couldn’t provide feedback on a page concept until he actually saw what it would look like, completed, on his computer screen. But that is a topic for another day.

The point is, if something looks nice – looks almost all the way there – the clients and stakeholders can more easily grasp the concept or point you’re trying to make with your wireframe. It instills confidence in the final product.

You Are Selling Yourself

There’s no excuse for submitting work to a stakeholder that looks as though a third-grader created it. Unless you are a third-grader.

The final – and perhaps most important – point to make is that, whenever you submit a deliverable to a client or stakeholder, you’re selling yourself. You’re selling the team. You’re selling your credibility.

Good looking work instills confidence in your client and the team. Aesthetics convey quality at a subconcious level and your work should always reflect the level of quality you are capable of providing. There’s no need to get precious or pretentious about it, but there’s no excuse for submitting work to a stakeholder that looks as though a third-grader created it. Unless you happen to be a third-grader.

Creating good quality work reinforces your work ethic every time you finish it. It helps build your professional reputation. Every piece of work you submit either enhances or detracts from the overall value of your work; it is worth the extra time and effort.