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?
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.
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:
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.
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.
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!