Design. SEO. PPC.

Wireframing is a vital part of web design that helps everyone stay on the same page. They’re the blueprint around which the webpage is designed, connecting the underlying architecture to the information presented to the visual design. A wireframe is a visual representation of the interface that explains a site’s intended:

• Structure: How the pieces of the page will be arranged.
• Content: The information that will actually appear on the page.
• Function: How the interface works.
• Behavior: How the interface acts when the user interacts with it.
• Hierarchy: How the interface leads to the other pages on the site (often combined with flowcharts or storyboards for this purpose.)

What a wireframe doesn’t do is equally important:

• Design: While a wireframe shows a layout, it doesn’t show any visual design elements like colors or even necessarily the precise shapes of the columns, boxes, frames, and so on.
• Graphics: Similarly, a wireframe doesn’t give any information about the graphics on a page except as they’re relevant to the items in the list above.
• Branding: Wireframes are too abstract to get involved with issues of branding or identity other than to (perhaps) have a ‘logo goes here’ marker.

Letting Your Site Off the Leash: The Creative Purpose of Wireframes
Time for a side story. Imagine you have a woman who is gardening, and she owns two dogs. One of them is quiet, well-trained, and smart…let’s say a dachshund. The other is a hunting beagle, and is exuberant, uncontrolled, and powerful. As she gardens, the beagle constantly strains against its leash, constantly choking itself and threatening to zoom off toward a dozen different half-imagined curiosities…and the dachshund just sniffs calmly around the flowers, no leash necessary, and is free to roam as it pleases, knowing that it’s not allowed to go into the road or out of sight.

Can you see how, in this situation, the reason the free dog is free is because it knows what its limits are? That’s what a well-made wireframe does for a site. By giving a structure to the designers, information engineers, and others, it actually enables more creativity in design than an empty canvas. By starting with a tangible grasp of the site’s intended functionality and layout, it ensures that all of the creativity that is generated is pointed in the right direction; there’s no zooming off after half-imagined curiosities.

Bringing Sextant Back: The Technical Purpose of Wireframes
Meanwhile on the other side, there’s the technical people who have the opposite need: they don’t need to be reined in so much as they need to be given direction in the first place. Coders, analysts, and executives that are primarily interested in the numbers all use wireframes like ancient mariners used a sextant: they looked at the beautiful backdrop (the stars) and used it to create functionality (the course charted.)

For a coder, every element of the wireframe acts as a guideline that shows them what they need to code and what functionality they need to create for each interactive part. To an analyst, the wireframe allows them to check the structure, information hierarchy, content, and behavior against the needs of the department it’s being developed for. To an executive, the wireframe is the first point at which the new webpage can be reviewed against the business’ policies and, perhaps more importantly, their short- and long-term goals.

Don’t Put the Cart Ahead of the Horse
There are a million different ways to make wireframes, and I won’t get into all of them here — but there are only two basic kinds of wireframes: the primary, low-fidelity kind, and the later, high-fidelity kind. It’s important to have both: as much as it’s sexy as hell to have a functional prototype or ‘minimum viable product’ (both of which are essentially high-fidelity wireframes), you shouldn’t attempt to just leap from zero to prototype. As much as many businesses want to have their conception-to-production cycle shortened to a span of hours, it’s a gateway to poor design if you don’t get the floorplan sketched, metaphorically, before you start to draw the façade.

Wireframing Tools
Pretty literally, if you can create visible differentiations within a medium, you can wireframe. Pencils on paper, ink on parchment, pixels on a screen, cuneiform on a stone tablet…you can wireframe on any surface you can draw on. But that, of course, is about the most primitive kind of wireframing. You can then cut out the elements you sketched for the purpose of moving them around (or use one of the several standardized wireframing paper kits.)

Then, there’s the software. You can get specific wireframing software like Balsamiq, Axure, and Proto.io, or you can use just about any graphic design software like Photoshop, Illustrator, or even if you’re desperate, Microsoft Paint. For most corporate situations, the wireframing software provides unique collaboration tools that makes them more appropriate — for independent designers, the graphical tools allow for more freedom which is useful. Some people also include presentation software like PowerPoint as wireframing tools, but my experience doesn’t match that claim.

Fidelity
Any given project could and probably should have multiple different wireframes showing different levels of fidelity.

• A block diagram that shows the layout and content types with indications of functionality — possibly with notes on the typography or other details, but not necessarily — will help you stay structured through the early development and ensure that you have a solid idea of how to visually tie the elements together. This is the stage at which you’re going to set the constraints that will direct future creativity, so while this may be the most granular level of wireframing, it’s important that you put a lot of thought and effort into this stage.
• Greyboxing is much like a block diagram, but adds full greyscale color to the mix, allowing you to differentiate between different levels or kinds of element. This is the stage at which it’s most appropriate to test flow and organize the graphical content. Often, if you have a solid vision for a project, you can skip straight to the greyboxing.
• Lorem Ipsum wireframing is essentially greyboxing with the addition of nonsense text that shows the typography selection for each box — and may even extend up to putting the actual copy in place and choosing the precise font, size, and so on. This represents the transition from ‘low fidelity’ to ‘high fidelity.’
• Colorized Wireframes can make a wireframe communicate more of the design intent without necessarily placing any finalized graphics into place. Coloring the background, text, buttons, and other interactive items can highlight the elements that deserve the most attention. Just be careful not to over-color, or you’ll end up creating something that looks like a bad mockup instead of a high-fidelity wireframe.

Some firms advocate putting specific pictures or even videos in place, or adding interactive elements to a wireframe — to me, that’s losing the focus on what the wireframe is for. This is a design tool; creating a mockup has an entirely different purpose.

Customizing Your Wireframe To Your Needs
Keep in mind that none of these concepts are hard-and-fast rules. If you’re wireframing and you’re the designer, the prototyper, and the programmer, you can skip most of the detail. If you’re working on a team with a skilled graphic designer, you might not need to worry too much about the graphical details and can focus more on flow, usability, and so on. If you’re preparing a wireframe for an entirely different team — perhaps one working overseas — you’re going to want to annotate the heck out of that wireframe to make it as clear as possible.

Moving Forward From the Wireframe
Once a wireframe is complete, there are two essential steps forward. In the first case, the wireframe is merged with other wireframes for other related webpages through the use of flowcharts that show the intended path of user activity. In the more advanced version of the same activity, all of the wireframes of a site are placed together on a storyboard or slideshow in order to show the user flows.

In the second version, the wireframes are actually given interactivity, allowing a tester to click through as though the wireframes were websites. By allowing a tester to actually perform the interactions (tapping, double-clicking, swiping), you allow a designer or developer to potentially encounter problems before a full website is put together. This kind of interactivity is almost exclusive to wireframe-specific software.



Design Principles of Wireframing

Time to get down and dirty. What does it take to design a wireframe correctly? Unfortunately, the answer is that there is no single recipe for success. The best advice I can give you is this: plan a little bit…then go Nike on that project and just do it.

Planning a Little Bit
Answer these questions for yourself:

• Who is your audience? (The users of the site, not your clients.)
• What are their goals?
• What do they need from this site to accomplish those goals?
• Does the client have any existing pages that work well that you should be basing your design on?
• What are your limiting factors (time, money, skill, the negative desires of the business, etc.)?

Answer these questions once, quickly, on paper – and then get to work. As you sketch and frame the page out, you will probably find that your answers to the questions change — that’s OK. Note the change on your paper and move forward.

Just Do It, Part I: Start at the End…User
Start with a simple question: who is going to use this page, and how? It doesn’t make any sense to draw a single box until you know what you’re designing this thing to do. Wireframes need to keep in mind that every website’s goal is to solve a user’s problem. If the webpage doesn’t make someone’s life easier, they don’t give a crap about it, end of story.

Keep in mind that the last word of that simple question is ‘how’, not ‘what’. If you focus on what you want them to do, you’ll get into the marketing mindset of making that what front and center in your thinking. Focus on how they’re going to interact with your page, and you’ll keep your focus where it belongs. Ask yourself what the page needs to function; ask yourself what you can take away without losing the core purpose.

Just Do It, Part II: Less Is More
Why ask what you can take away? Because everything you can take away isn’t your business at this point. Imagine that you’re designing a new kind of fork. There are a hundred details you could get distracted by: number of tines, the degree of the curve, and so on…but if you can’t use it to stab a chunk of steak and put it in your mouth, it’s not a fork, is it? When you’re making a wireframe, stripping the page down to the essential elements of its functionality will free up creative space for later while still giving you what you need. That’s two birds with one stone in my book.

If you do less with a wireframe, you can measure more with it — which means you can do more useful experiments with it. Also, you’ll save money in the long run by focusing on the parts of the website that matter the most.

Just Do It, Part III: Everything Should Have a Purpose
Eventually, there will be parts of every webpage that are the way they are ‘because.’ This is not that time; when you’re creating a wireframe, you shouldn’t create anything except the most vague placeholders — except for those elements that you’re absolutely positive of the purpose of. Anything you create that doesn’t have a well-defined purpose is just generating noise when what you want at this point is the closest thing to pure signal you can get.

That said, as you recognize what elements you’re going to need, don’t hesitate to add them — or at least rough approximations of them. Adding the parts you know you’ll need is just as important as leaving out everything you don’t.

Moving On: Iterate And Reiterate
Once you finish the roughest, most fundamental wireframe that conveys the essence of the product, start over and do it again. Solve the same problems you solved last time, but solve them differently. You’ll be amazed at how differently a low-fidelity wireframe will come out if you choose a different solution to one of the first questions you stumbled upon. Because you’re only making low-fidelity frames at this point, you should be able to come up with several significant variations relatively quickly — but it’s only after you have several options and you can ‘playtest’ them all that you’ll get a good idea of which one is the best idea.

Keep in mind as you do this that falling in love with a given design is exactly what you want to avoid. If you’re wireframing an idea you already have your heart set on, you need to change your heart — or skip the framing and move straight into the design phase.

As you determine at the low-fidelity level which sets of solutions are actually going to best serve the end user, you can start the whole process over again at a higher level of fidelity, creating several riffs on the theme set by the winner of the low-fidelity selection of the fittest. Ultimately, you can spend as much time wireframing as you have time to spend — but if you don’t move on and turn your wireframe into something deliverable, all of your effort will be for naught.