I want to continue the conversation on wireframing that came up in a recent Mediacurrent blog "Rational Redesigns - Visual Planning." Jeff mentioned that at Mediacurrent we do not start design with mockups or comps but instead create a visual plan using high fidelity wireframes. Wireframing, in my opinion, is integral to creating a successful design. This is one step you don't want to skip.
Is Wireframing Worth It?
Why should we spend extra time working on wireframes? Isn't this step costing us time and money?
Building a website is complicated. Organizing information and data structures into buildable/manageable websites requires lots of planning. It is true, that the wireframing process can take some time to move through, but it is time well spent. At this phase in the game it is much easier, and less time consuming, to iterate on the design while it is shades of gray and is without texture, color and treatment.
Think of this phase like the blueprinting phase of building a house. In this phase you have to figure out the layout of the house. You decide where to put the plumbing, electrical and air conditioning. This is all very important to work out before the walls go up. In a wireframe you will decide where to place certain blocks and menus, along with where other regions like the sidebar should go. This is necessary work before starting to think about tone and texture.
Having a blueprint, or in our case a wireframe, will aid everybody involved on the project. This visual reference allows the client, along with the team, to catch problems early on before they escalate into nightmares. A wireframe can help the team find issues with user experience, see problems in the overall site layout and help find solutions to how the site should be navigated.
By being able to see a rough draft of the site before all the hard work goes into color, tone and texture, the team is able to make changes to the underlying systems and layout without being distracted by treatment.
Where the wireframing process starts
I want to stop here and take a step back and talk a little about where the wireframing process starts. Its starts long before you start drawing inside of your wireframing tool or downloading some nifty stencils. A bit of pre-planning is in order first. To quote something a wise man once said, "Give me six hours to chop down a tree and I will spend the first four sharpening the axe." Part of sharpening the axe is drawing up the wireframing, but another large part is doing discovery and collecting all the data we will need to inform ourselves which is crucial to putting ourselves on the path to a successful design. Time to stoke your creative fire with as much information you can get as possible.
Questions to ask the client that will help you turn their goals into a visual layout. A layout that, in the end, is successful at communicating their message to their users/clients:
- What kind of emotions do you want your clients to feel when using your product?
- What is it that makes your product better than your competitors?
- Who is your target market and what share of that market do you current have?
- Describe your typical customer and why they are your typical customer.
- When your typical customer visits the website what is the experience you would like them to have.
- Do you have an established brand? If so, what are the guidelines set for the brand?
- Color preferences? Any colors to avoid?
- What adjectives would you use to describe your product?
- What is the deadline for the project?
- Ask any other questions that you can think of that may help you create the design. You can never ask too many questions. It shows the client that you care about their project and want to see their project succeed.
Putting It Altogether
After you collect all of this information from the client it is time to pull out your trusty wireframing tool of choice and go to town.
Our goal as designers is to take the raw informational materials (ex. documents, emails, clippings, urls) and craft a visual message out of them. We are a sort of alchemists that transmutes lead (aka the clients specifications) into gold (wireframes+mockups). Seeing is believing for clients. So having a good plan to show them will not only serve as a great tool for the following phases, but will show the client that you are a true professional taking the time to understand their vision by creating a solid, well thought out, foundation to work from.
Now that we have the first wireframe(s), we can start heading down the winding road of iteration. We want to iterate and we want to iterate fast. This is why the wireframe is absolutely necessary and why a mockup would not work. The wireframe is nimble, quick. We want be able to change or rework a block, a section, or navigation as quickly as possible. If we were dealing with color, texture and other treatment this phase would be heavy and difficult to work with. Since we have purposely left out those details we are better able to make changes in layout, usability or navigation much easier saving time and money.
Finally, after a few iterations you will arrive at an approved wireframe completing the wireframing phase and allowing you to begin the mockup phase. Give yourself a pat on the back and have yourself a beer. You deserve it!
Designing With Personas - Develop brands across several disciplines and industries.