An Introduction to Wireframing Organize now, design better later

One of the things I love about working on the small-but-stealth Vassar Web team is that while each of us has areas of specialization, we all still wear many hats. None of us is just a designer or just a developer, and the planning of sites is just as much our responsibility. This means that when we’re leading a project, we handle all facets of the process: the information architecture (IA), user experience design (UX), content organization, and so on. We also have the freedom to choose the techniques and processes that work best for us individually.

This makes me very happy. Why? Because just as much as I love design and development, I also love the puzzle that is website planning: having a giant mountain of content and creating an architecture of organization that makes everything clear, simple, and user-friendly. My favorite method in this lengthy process of planning? Wireframing.

What is Wireframing?

Sample wireframes in a variety of styles.
Sample wireframes in a variety of styles.

Wireframing is the last step in the planning stages of building a website, when the content begins to take shape visually, and layout and hierarchy are the primary concern. Before considering design elements—color, shape, texture, pattern, typography—the skeleton of the site is “designed” with simple placeholder shapes or elements, so that the arrangement and organization of content can be easily modified. The point of wireframing is to see the layout of a page—its hierarchy of content, its navigational clarity and flow, and its individual elements—to work through iterations and difficult decisions before approaching the design process.

Why Wireframe?

Not all Web Designers that work in small, do-it-all-yourself environments choose to wireframe, but I’ve found it to be an absolutely essential tool for big, complex projects. Here’s why.

Focus on content

For years, an important mantra in Web Design has been “Content first”—and, for good reason. Beginning with content and the particular information that’s being communicated to your audience naturally means more informed design choices. By gathering the content and working with its visual organization outside of the context of style, you are able to commit your attention more specifically to the content itself: how its individual pieces are best represented and how the positioning and organization of content is aiding or detracting from the user experience.

Speed and efficiency

It’s very tempting to jump into the design phase of a project, but how often have you created a design that then had to be reworked and revised multiple times because of a lack of clearly-defined content structure? The design process, as any designer knows, is often elusive—the harder you “try” to design, the more difficult it is. Wireframing taps into your left-brain and allows you to work through layout ideas quickly without getting caught up in how individual elements will look. And, because you’re not digging through layer upon layer in Photoshop, you can quickly and efficiently make multiple iterations, try suggestions from colleagues, and test various layouts without committing to any one direction.

Test the user experience

Depending on how you create your wireframes, it’s possible to build simple prototypes that allows you to interact with (or, at the very least, visualize) the experience of moving through the site as a visitor. Wireframing is essentially bare-bones user experience testing, because, for the first time you can begin to “see” the finished product and predict potential issues with content flow and navigation. Catching these kinds of problems in the wireframing stage saves you from back-tracking in the design or development process.

Design with Clarity

In my opinion, the best reason to wireframe is to enter the design phase with absolute clarity about the content, purpose, flow, and structure of the site. Oftentimes, when I reach the point where wireframes are complete and it’s time to start designing, I can see the site so clearly that the design is nearly finished in my mind. Having that kind of an understanding of your project is essential to designing with ease and allowing creativity to bloom.

Where do I begin?

If you’re interested in adding wireframing to your process for the first time, I recommend the following tools and techniques:

Sketching

Wireframe Sketches

Yes, that’s right—a good ‘ole pad of paper and pencil should do the trick. If you’ve never wireframed before, I recommend that you start here to get a feeling for the process. Print out some wireframe templates and begin roughly shaping your layouts until you’ve solidified some ideas. You may choose to digitize your sketches, but if you have a small project or are more of a hands-on designer, this may be the only technique you need.

Adobe Illustrator

Wireframing in Adobe Illustrator

Since you’re probably already familiar with Illustrator and likely have it installed, too, this is a good first step for digitizing your wireframes. I find Illustrator quick and easy, opting to use the “Gray Box Method“, a technique coined by Jason Santa Maria back in 2004. It may be old-fashioned in web terms, but it still works well and is an excellent way to wireframe without purchasing extra software.

Balsamiq Mockups

Wireframing with Balsamiq Mockups
Wireframing with Balsamiq Mockups

If you’ve tried the above two techniques and are ready for something more robust and specified, Balsamiq Mockups is a fantastic and affordable tool to add to your arsenal. Creating detailed, complex wireframes is as simple as dragging and dropping preset elements and customizing them. The most invaluable feature is the ability to create mockup links, allowing you to export PDF wireframe sets that allow the previewer to click through navigation and button elements and simulate the browsing experience.

These are just the tools I’ve used myself. There’s a whole slew of wireframing apps out there today, so if you find the process as invaluable as I do, be sure to look around and let me know what your tool of choice is. In the end, it’s all about creating a smooth and efficient process that best meets your personal needs, so that you have the space and the clarity to create beautiful work. Happy wireframing!

2 comments

  1. This is a great summary of wireframing. I wish I’d been thinking that way even two years ago. A lot of the sites I was working on had fairly simple layouts, and none of them were responsive, so I wasn’t presented with the kinds of content arrangement problems that wireframing is so effective at addressing. I used to do most of my wireframing in the sketchbook and then jump right into Photoshop.

    Conceptually, though, I didn’t really separate the wireframing from the overall design process – I’d work out the site layout and colors/typography/adornments/etc simultaneously. I basically saw the site as one single design instead of a collection of well-synchronized chunks. That was a pretty muddled thought process.

    Building the skeleton first has helped me put the emphasis back on those chunks. Instead of focusing on visual issues that reinforce the context of an indivisible design, I’m thinking about how to fit the search box into the side column, or how to manage frontpage modules, or how to make a gallery layout consistent with the overarching grid of the layout. I’m dealing with a collection of parts instead of a picture.

    (Also smart of Balsamiq to visually underscore the unfinished nature of wireframes – I really have had at least one person see one of my wireframes and go “It’s…nice and clean, but are there going to be colors and images and things?”)

  2. Such a great way to help the content folks on your team focus not so much on the visual design but rather on flow and well… content!

Leave a Reply

Your email address will not be published. Required fields are marked *