What is a wireframe? There is a surprising amount of confusion on the answer to that question, and this is understandable, because the answer you will receive all depends on who you ask. User experience people will say that wireframing is all about mocking up semi-working copies of your interfaces for clients to click around and experience. To designers, wireframing brings to mind static sketches and page layouts, replete with color swatches and flashy images. And project managers will tell you that a wireframe is a detailed document telling you where, and in what order, everything in a website is supposed to go. Indeed, the largest problem you run into when trying to define what wireframes are, is that all of these answers are correct ones. In essence, a wireframe is nothing more than an organization tool used to help you manage, categorize and utilize information about the site you’re working on, whatever your job title may be. For the sake of semantics though, today we’ll be talking about wireframing content. Not interfaces, nor design, just content. Because, as you’ve probably heard before, content is king.
Content wireframing serves a very specific, and incredibly important purpose: to help you create a logically laid out and connected website. It’s important to remember, people don’t come to websites based on the aesthetic qualities of the site or because the code is super-clean, they come because they are looking for some granular bit of information. Google is a beautiful example of this, their sites are famously sparse; yet, they are the most widely used search engine in the world because they provide information quickly and accurately. As web site designers and developers, it is our job to provide information quickly, logically and beautifully. Yes, you heard us correctly, beauty should be your final step. It’s important to note, while good design can help users find the information they are looking for more quickly, the aesthetics and the beauty are all wasted if you aren’t effectively providing the information in the first place. Content wireframing is all about two things, organization of information and helping to visualize logical paths to that information. At its best, your wireframe should map out the flow to specific bits of information buried in the site in a manner that, as closely as possible, resembles the way that the finished site will provide that information.
An example may serve us better. Imagine, for a moment, a client comes to you and wants a website built. They are a large company that provide high-tech hinges and swivels for the aerospace industry. In your initial talks you learn that this is going to be a fairly large site. You also learn that scattered throughout the hundred or so pages of the the site are several hundred, maybe even a thousand, .pdf spec sheets and white papers that will need to be linked to from specific products and services that this company offers. The organization and attention to detail required in a project like this is enormous. It is, in fact, so large, that no one person could ever be expected to remember where all the parts are meant to fit. Yet, without an effective plan, or wireframe, to manage all that information, that is exactly what you are expecting of someone on your team. A content wireframe serves tirelessly to do exactly what one person could never manage. By individually mapping out the small amount of information that needs to be presented on each of the hundred pages of the site you can take an immense amount of data and cut it up into manageable, and logical, pieces that are easy to work with.
Now you’re a hero. The client gets a site that makes sense to users and presents their vast wealth of information clearly and you get an easy way or organize your team around a common goal and a faster approval process from the client. You may now feel free to set your designers loose to beautify and visually organize that perfectly arranged stack of information. Using collaborative content wireframes is a technique that is incredibly popular with clients because they can understand and participate in the process. No one knows a client’s business better than they do themselves. They are experts in what they do and can ease your workload tremendously with that expertise. They just need a way in and a voice. Because wireframing content doesn’t require geek-speak to follow, clients can work with you as you create your wireframe, correcting and clarifying as you go. This participation carries the added benefit of creating a sense of ownership and investment for the client. The project isn’t just a sub-contracted job anymore; it’s their baby, and they want to see it succeed as much as you do.
Ok, Ok. We get it. You understand why you’d want to wireframe the sites you build, you want to know how to best make that happen. The main thing to remember is that, when you’re wireframing content, you don’t want anything but content. No designs, no interface buttons, you should even strive to keep images out unless they are part of the important content for the page. Perfect, useable, final draft content is what you are looking for. Every page you wireframe should represent an individual page on the website and sub-pages should be noted under their respective parent page. This is organization. Plain and simple, this is dumping out the filing cabinet and starting from scratch.
There are many tools you could use to accomplish this content wireframe, a simple piece of paper and a pencil being the most simple and limited form. Programs like OmniOutliner and OmniPlan from OmniGroup work well and can provide very detailed wireframes but don’t allow for 24/7 participation from all team members, including the client. Of course, we think our app, Jumpchart, is the best tool for content wireframing, otherwise we wouldn’t have built it. But you shouldn’t just take our word for it, go try it out for yourself. Whatever method you use, it should comfortably fit into your workflow and should be easy and flexible enough that everyone uses it, including the client. That last part is very important. The wireframe, however you produce it, must be flexible. Edits are inevitable, so stop fighting them and embrace the change. If you did your planning and organization correctly it shouldn’t be an issue anyways, right? Just make the needed change and get on with it.
Remember, content is king. The information that resides in the sites you build is infinitely more valuable than the presentation of that information. So plan and wireframe your content with every bit of love and devotion to detail that you give to your design and your code-writing and we guarantee that it will make your life 50% easier.*
- not a guarantee, but, all the same, you should give the same love and devotion you pay to your design and coding to wireframing and content planning. It will pay off…promise.