Here’s why most wireframing sucks, and how we make it better

Wireframing is a crucial part of the digital application building process. It’s how we represent the design and the relationships between different screens. The most important job a wireframe does is enable us to make important decisions related to the user experience, ultimately allowing us to craft a desired behavioral outcome from elements on the screen.

Most wireframing, however, sucks.

More often than not, a wireframe deliverable is a bunch of boxes and some squiggly lines. It’s static and unclickable, foregoing any sense of interactivity and realness. A client looks at them and thinks… Ok… these look… fine? Best case, they trust you and let you do your thing. Worst case, they start to wonder what they’re paying for.

Wireframes have a historical place in multi-disciplinary teams. Back in the late 90s, most graphic designers (often from the world of print media) didn’t really understand the nuances of interfaces and didn’t yet have to worry about designing for multiple screen sizes and devices. Interaction designers came from software and were used to making terminal-esque interfaces that were, uh, less than aesthetically appealing. So in order to make sure the end result was palatable, the interaction designer would make a pig, and then the graphic designer would put lipstick on it. And as designer Christina Wodtke so eloquently notes, wireframes like these always came with a hedge: “These don’t imply layout,” (to which she responds, “Oh, for fuck’s sake. How could they not?”).

Unfortunately, not much has changed. So how do we improve wireframing?

Blueprint Prototypes > Wireframing

The Think it First design process is not common. We’ve thrown out the term “wireframe” in favor of “blueprinting.” Much like an architect who uses blueprints, we want to help to bring your digital home to life. When you look at blueprints, you really start to feel where the build is going. You start to experience it. Blueprints show which way doors open, where the kitchen island is… even the toilets resemble toilets. The point is, these elements are the content of the blueprint. They could appear in different shades of blue to show depth and relationship. And it’s done so that everything is structurally sound from the get-go, before anything is built. Our clients love this.

The more we can bring a wireframe to life, the better the sense of the final outcome our clients enjoy. In terms of a final design, a Think it First blueprint isn’t really missing much. Color, final graphics, and imagery are the only elements purposefully left out. This is done to limit distraction from aesthetics in order to focus on the real structure of the design.

Blueprinting also helps us figure out functionality dilemmas earlier in the process. It allows us to test on various devices sooner rather than later and make iterations and changes easier to execute.

Is it a legitimate time investment? Absolutely. But it’s 100 percent worth it.

Starting with Content

In the wireframing world, you’ll often see squiggly lines equal future content that hasn’t been written yet. Some efforts might go as far as using lorem ipsum placeholder text. Both of those efforts are weak.

Conversely, we believe content comes first. You simply cannot design with a purpose without the content first. It’s the cart before the horse; the square peg in a round hole. Your site’s content is the story you’re trying to tell. Waiting until the end, hoping everything will fit in the allotted real estate doesn’t make much sense. That’s why we work with you to help write your site’s content first. Armed with it, we’re able to design and develop around your story instead of confining it.

“You simply cannot design with purpose without the content first.”

We Now Have the Tools

We’ve seen hand-drawn napkin wireframes, Google Slides wireframes and everything in between. But now, we have the tools to create what we really need to create. We believe that prototyping is the future and powerful design products like Adobe XD, InVision and Figma get us there. By being able to rapidly prototype in conjunction with the design we get a feel for the final product faster while weeding out UX obstacles. With the right tools, we avoid developing unnecessary features, remove technical roadblocks, improve usability, increase the likelihood of user acceptance, and coordinate better with what matters most: your business goals.

It All Adds Up to Value

By shifting our mindset from wireframing to blueprinting and by starting with content first, we’re able to deliver value at a stage that typically struggles to do so. This value evidences itself to you, the client, as less future iterations (aka, time and money saved), fewer functionality mistakes (an end-product that feels and works great) and a better sense of the final outcome sooner in the process (you guessed it, time and money saved).

Here’s why most wireframing sucks, and how we make it better

Blueprint Prototypes > Wireframing

Starting with Content

“You simply cannot design with purpose without the content first.”

We Now Have the Tools

It All Adds Up to Value

Also read

Because No One Wants Another Self-Aggrandizing Newsletter in Their Inbox

It’s Time to Stop Designing for “The Fold”

What is a Design System and Why Should You Care?

Traditional Wireframing Sucks