Oftentimes, wireframes are an overlooked aspect of the web design spectrum, both by designers and clients alike. Many do not see value in them -- an unnecessary step that stands in the way of the final outcome -- but any organization worth their weight knows that wireframes are a critical step in the web design process. Unless there is some rare outstanding reason to skip them (i.e. budget, time constraints, etc.), wireframes are invaluable.

Wireframes can be a tricky thing to discuss, however, especially if you have not talked about them before. Unless you have a trained eye, looking at a bunch of grey boxes and lines might be confusing and uninspiring. Let's explore how you can get the most out of your wireframes.

What are wireframes?

Just as a house needs a blueprint, a website needs a wireframe. Wireframes stem from 3D modelling, where they are "created by specifying each edge of the physical object where two mathematically continuous smooth surfaces meet, or by connecting an object's constituent vertices using straight lines or curves." (Wikipedia)

Wireframes have been reappropriated for web design to show how information is to be arranged, how content is to be structured, how user flows occur, and how modules operate functionally. That means there is an awful lot of information that must be presented from a wide variety of disciplines. Information architects (IA), user experience designers (UX), user interface designers (UI), content strategists (CS), copywriters, front- and back-end developers, and SEO specialists can -- and should -- all be pitching in to the wireframes.

Oh, and clients should too.

Wireframes are for clients, too

Some designers believe wireframes are an internal tool, and that the wireframing process should be hidden, not shown to clients. (What, I don't even…) This is a detrimental notion, because clients have a deep understanding of their sector, business, and audience. Of course designers will have done their sector research, business evaluation, and persona development beforehand (right?) but this understanding still does not match up to the client's extensive knowledge. When clients are included, there is a wealth of information that can be accessed.

Client inclusion is also a great opportunity for education and engagement: Everyone is happier and more responsive when they are included! Designers and clients can work together to achieve the same goal, and make it fun while in the process.

Discussing and providing feedback on wireframes

Wireframes are intended to bridge the more fluffy stuff with the more concrete; they provide context to goals, and are usually the first time everything comes together. How can you make sure everything is headed in the right direction?

Reporting

Everyone should be on the same page. It may have been days or weeks since your last meeting, so the designer(s) should offer a refresher on the goals that were attempted to be accomplished with the current set of wireframes. The designer will then guide the client through the wireframes, explaining the decisions made and the hurdles along the way. Wireframes are an excellent method to highlight problems cheaply, so it should not be come as a surprise if problems appear.

Clarity

Clients: The design team needs your feedback! Without it, they are giving nothing more than educated guesses. Designers know design, but clients know their business. 

Designers: The clients cannot give answers to questions they do not know. They require guidance on how and when to provide feedback. Each wireframe should be explained and gone over, and feedback type should be determined (if any). Feedback can generally be broken down into the The Three A's: Answers, Approval, Acknowledgement. Which is required at each step?

Giving good feedback is a complete article in itself (which we will be covering shortly… keep on the lookout!), but there are a couple of pointers that seem to come up more commonly than others.

• Feedback is not personal preference: Feedback should not stem from personal preferences. Every decision should one way or another be a step towards the decided goals.
• Feedback is not subjective: Design (in this case, specifically wireframes) is not art. Your wireframes will not be hung up on a wall for all to ooh and aah at. Instead of asking, "Do I like this?" ask, "Does this meet my objectives?" If the answer is yes, wonderful. Move along.
• Feedback is blunt: There is no need for the Compliment Sandwich®™ anymore. We are all adults here. Clients are paying for a service with their hard-earned dollars, and designers are not producing items they have emotional connections to. Be blunt. Even if you can't pinpoint exactly what it is you don't like, at least "This is terrible" is better than "Well, hmm… I dunno."
• Feedback is clear: Ask questions! We're all here to make things more clear, both designers and clients. If there is something you are unsure of, do not hesitate to ask. Do not assume the other person(s) knows you do not fully understand. If someone is getting irritated at you asking questions, it may be time for a new partner.

Refocus

You've talked about wireframes, some comments and questions have been spoken, and everyone is happy with how things are moving along. The next step is to set the focus for the next round of iterations, or, if you are at that point, to move on the next part of the process. This may involve in-browser prototypes, visual design, components design… whatever it is, make sure that everyone understands (and agrees upon) the next steps before leaving the meeting.

Meeting notes and a summary should be passed on to all involved. They will provide an opportunity to revisit in the coming days/weeks and make sure all points are covered. If anyone missed the feedback review or meeting, it will allow them to catch up. Having things in writing will also make for a point of reference if things get hairy in the future.

Moving on past wireframes

Wireframes are an excellent way to visualize the user experience of a website. Now that you have discovered them, you will be amazed. Wireframes can either be disposable, or they can form the skeleton of a website: if you built your wireframes dynamically (in-browser instead of pen-n'-paper) it is easy -- in theory -- for the development team to come in and start fleshing it out.

Many people claim wireframes are for in-house use only, but I fail to see how that can be beneficial. Clients need to be sold on design, and designers need to show that they know what they are doing. (If there is a lack of trust there, it may be time to find new partners.) Every stage that includes clients and designers working together is beneficial. Clients are not expected to do the work -- remember, the designers are the professionals who understand the inner-workings of design -- but working together can make everyone feel included, keep expectations well understood, and, most importantly, create designs that hit their mark in terms of business goals and objectives.

Filed in // Design, Websites, Strategy