It's hard for non-designers to ignore website wireframes and imagine something different in their place. Learn how to look at them and use them effectively. 

Diary of a Redesign: Why Everyone Hates Wireframes and How to Make them Work for You

Wed Jul 30, 2014

Before a website redesign begins in earnest, a lot of preparatory groundwork has to take place: content auditsinformation architecture design, and creating wireframes. Although the wireframe portion of the process is not the most labor intensive, it is often the most difficult for the project team to work through because of their nature.

So how do you make the process less painful? Understand the role wireframes play in the redesign process and how to help your team do the same.

What are wireframes?

Wireframes are used by user experience and user interface designers to account for the various components of a page on a website, ensuring all necessary functionality and content is captured and has a place in the upcoming design.

Wireframes are not a blueprint for how the final product will look, or a map of where every item will appear. Try thinking of them as a visual checklist that ensures every important element is included, and that relationships between elements are mapped out.

Why are wireframes important?

If you’ve been following our Diary of a Redesign blog series, you might have noticed a theme emerging regarding preparation. Wireframes and the other topics we’ve covered so far are the web design version of the old adage to “measure twice, cut once.” The actual design and development of your website is complex, involved, and often expensive process. Once it has begun, you want to keep changes as minimal as possible and don’t want to rethink direction with a half-built website.

Focusing on information architecture, content quality, and structuring various elements prior to the actual development gives you multiple opportunities to ask questions, make important decisions, and spot and address problems where it’s most time and cost effective to do so.

Why is working with wireframes so difficult?

Humans are wired to respond to visual information and it’s hard to ignore something in front of us and picture it’s going to be something else. This is one of the great challenges for visual designers in any discipline: non-designers always struggle to imagine something they can’t see, and don’t always know what they want or don’t want until they see it.

The key difficulty in showing wireframes to clients is that they are not trained to see the distinction between UX and UI design, and final visual design, which is what they expect to see. It’s much like asking them to picture a piece of music and not try to think of notes.

While the UX designer wants feedback on whether every page element is present and behaving properly, the project team gets stuck on “move that to the left” and “will it be green or blue?”

How can working with wireframes be more productive?

In order to keep from getting stuck on the wrong information during a wireframe presentation, the design team presenting them needs to help their client understand the mechanics of what a wireframe does prior to actually showing it. Emphasizing that it is more of a checklist than a mock up might help.

Designers can also explain that the focus is on user interaction with individual items, and how they interact with one another in a page, consistently emphasizing function over appearance.

What the client’s project team can do is limit who is present at the table. Whatever the size of your website redesign committee, the decisions to be made here are more technical and structural than visual. Only the core stakeholders should be involved in approving wireframes.

Most executives will admit they are not designers, and even that a wireframing discussion goes right over their heads. Their concern is that the website is structured soundly in a way that will keep the process on target, and on budget, and focused on meeting the website goals your team defined earlier on.

It’s hard not to get attached to the first visual representation of the website your team is so excited to launch. With a little preparation, patience, and better understanding of where wireframes fit into the process, you can keep the discussion focused and productive so you can move on to the fun part: reviewing the actual website design. 

This post is the part of our weekly Diary of a Redesign series, which covers every stage of the website redesign process, from planning, to design, to implementation, to launch. New posts published every Wednesday. 

 

Karo Kilfeather, content marketing manager at Percussion Software
Karo Kilfeather
Content Marketing Manager | Percussion Software

Karo was born in Poland, and learned to speak English by watching "Saved by the Bell" reruns during her first summer in the U.S., which has left her unable to go through life without occasionally breaking the fourth wall. As Percussion's content marketing manager, she oversees and creates content that drives website traffic, engages followers, and helps fill the marketing and sales funnel. She writes about content management, content marketing, SEO, social media and web design, and how to make it all less complicated.

comments powered by Disqus