Take Your Wireframes Back to the Basics

And help clients with system thinking in the process

As designers and developers, we have a love/hate relationship with wireframes.

The pitfalls of wireframes, after all, are numerous and well documented.

1. The definition of a wireframe is a moving target. Every designer has a different interpretation, and sometimes the definition of a wireframe changes from project to project. Is it a glossy and polished digital presentation? Or is it a sketch on a conference room dry-erase board? When does a wireframe slip over into the territory of a prototype? How final is it, really?
2. Clients often ignore wireframes. Many clients are tempted to ignore standard low-fidelity wireframes. Without robust introductions and explanations from designers, clients may gloss over wireframes completely.
3. Wireframes can be time-consuming to develop. Although wireframes often originate from a sticky note or the back of a napkin, digitally formalizing sketches can be cumbersome and time intensive.
4. Designers can often feel “locked in” to wireframes, particularly once clients have seen them. Clients may perceive wireframes to be the final drafts of a design, and thus those sketches, intended to be clarifying, can stifle creativity and shut down design iterations in the future.

Amid all of this frustration, Journey Group has been thinking about how we refine wireframes when we offer a content management system (CMS) to clients. We’re leaning in to how we define, produce and use wireframes in conjunction with crafting a CMS that meets clients’ needs and exceeds expectations.

We still need wireframes. But because of the seemingly endless options in web design today, we need them to be both adaptable and confined.

“Wireframes aren’t dying,” says Jeremy Cherry, digital designer at Journey Group. “They’re evolving.”

Make It Work on Paper First

“Traditionally, you had to do wireframes in something like Sketch or Photoshop,” Jeremy says. “But wireframes can be hand-drawn. Or they can be prototyped. But they should all achieve the same purpose, in theory. Wireframes need to get back to their roots to be relevant.”

When we realized we’d been unintentionally confusing clients — and ourselves — with wireframes, we launched a conversation about what they’re for and how to present them more successfully, particularly when building and designing a CMS. Here’s where we’ve landed.

How to make better wireframes

1. Use wireframes to sell. Wireframes can be a great benefit when selling a CMS — before any design conversation begins. Use simple wireframes for each content type, for example, to give clients a very early conception of what their new CMS will contain. “Once those wireframes are presented early, clients will have more of a connection with the sitemap,” Jeremy says.
2. Keep them iterative. Start small, and use your hands and a pad of paper. As we like to say at Journey Group, make it work on paper first and keep iterating. Working on paper leads to more fluidity when communicating designs; edits can be made immediately, with a pen, instead of having to send a round of emails and remake a digital version. Designer Dustin Senos tends to start all wireframes by hand. “Keeping your ideas on paper makes them lightweight and non-committal; anything can be changed,” he says.
3. Keep them simple. Define the parameters of wireframes, and show only what you need client feedback on. “Wireframes should be an example for the types of things we build,” Jeremy says. “I don’t need to go into a bike shop and see all their wrenches to know they can fix my bike.” Stick to simplicity when crafting and sharing wireframes for a CMS.
4. Set expectations. Restrict what wireframes show and explain them — to each other and to clients — often. Jeremy notes that wireframes will necessarily skate over some of the “invisible deliverables, all of the things that are critical to a project’s success but don’t require client interaction up front.” Success with wireframes comes from setting limits for what’s shown.
5. Help clients see. As designers and developers, it’s easy for us to think that clients will instantly understand the limits of a CMS. Without clear wireframes, however, it is difficult to grasp the visual scope of a project. “It’s easy for us to look at the design elements and know what they mean,” Jeremy says. “But for clients, until they see those simple wireframes, it is difficult to entertain the project as a system.”
6. Set clients up for success. Clear wireframes help clients with system thinking at the start of a project, particularly if that project is a new CMS. Solid wireframes push toward convention and establish patterns, which, in turn, help clients understand their website at the outset and encourage simplicity going forward.

With a refreshed approach to wireframes, designers feel less frustrated by the murky boundaries — and clients feel more equipped to understand the CMS they’re getting.

Stripped-down wireframes shape the web design and development process from start to finish, lending clarity and sustainability down the line.

For more from Journey Group, sign up for Story Matters, an email digest celebrating the art of storytelling in all its many forms.