Wireframing With Patterns

March 20, 2007

When you’re starting out as an information architect (IA), being part of a strong community of fellow practitioners helps immensely. A little over a year ago, on Sunday, February 22, 2006, I participated in an informal workshop on wireframing techniques that took place here in Toronto. Bryce Johnson, Director of User Experience Design at Navantis Inc., facilitated and hosted the workshop at his workplace. The knowledge sharing and the wireframing best practices that emerged from the workshop, plus the sense of community I experienced there, helped me build a foundation as an information architect and got me started on developing my own design workflow. Now, I’d like to share the techniques I’ve learned with a broader community of information architects.

Why a Wireframe Workshop?

There is a fairly informal IA community in Toronto. People in that community see value in sharing ideas and practices with those who are new to the field. This democratization of information is quite astounding in an increasingly competitive market. The wireframing workshop provided an opportunity for participants to introduce different ways of doing wireframes to each other, explore how wireframes factor into different design processes, and get some rookies started with easy tips and tricks. No organization sponsored the event. It was just a bunch of practitioners coming together to share ideas.

Champion Advertisement
Continue Reading…

What Are the Ingredients for a Successful Workshop?

For a wireframing workshop like this you need:

  • a facilitator with practical IA experience
  • a place to hold the workshop that allows group viewing of visual documents—a projector is preferable, though not essential
  • a group of people who are willing to share ideas and ask questions
  • people who bring documents with them to share, whether they are large printouts or visuals for projection on a screen
  • a common desire to build a greater community outside individual workplaces

What Emerged?

A strong sense of community among IA practitioners was the most significant thing that emerged from the workshop. People shared some wireframing techniques and tricks that I’ll discuss in more detail later. First, here are some highlights from the wireframing workshop:

  • Distinguish the role of wireframes early in a project. Who is your audience? Who will see and use the wireframes and how? Are they a client deliverable or solely for use in an internal design process?
  • Use high-fidelity wireframes to provide precise design direction; low-fidelity wireframes to allow more design interpretation. When there is the opportunity to collaborate with a design team, it is wise to create low-fidelity wireframes that designers can interpret and easily modify as work progresses.
  • To maintain consistency, create a branded Visio stencil for a project that you can use for all wireframes. Use the same shapes to communicate common interactions across wireframes and across different projects for the same client.
  • Visio offers lots of shortcuts—use them. At the beginning of our wireframe workshop, the facilitator handed out a tip-sheet of Visio shortcuts.

A year has passed since our wireframing workshop, and I have developed many a wireframe since then. With the foundation I gained during the workshop, I was able to build my own wireframing model. Because I needed both flexibility in design and the ability to reuse interactions across many different projects, I have developed the beginnings of a pattern-based design system. I started to see that I could use patterns many times over with just simple modifications. Wireframing in patterns does away with the necessity of reinventing the wheel each time and brings greater consistency to our designs. Thus, I began to understand the role of wireframes in the larger design process, which Figures 1–5 depict.

Figure 1—A design workflow
Design workflow
Figure 2—Detail of design patterns
Patterns detail
Figure 3—Detail of a wireframe
Wireframe detail
Figure 4—Detail of a design comp and code
Design comp detail
Figure 5—Detail of a resulting Web page
Web page detail

How to Create Wireframes Using Patterns

Wireframes can comprise many different patterns, each of which is a discrete element that provides specific functionality and may include instructive copy, images, text fields, buttons, links, etcetera. Together, the patterns create a complete Web page. Of course, when wireframing in patterns, it always helps if there is a pre-existing library of patterns to draw from, but I have found that getting through the first wireframe reveals most of the reusable patterns.

Here are a few steps that you can follow when wireframing in patterns:

1. Map out what the page will contain at a high level.

The wireframe starts to take shape, as shown in Figure 6.

Figure 6—A basic wireframe
Basic wireframe

2. Brainstorm about what patterns should fill the high-level regions of the page.

This is where a pattern library comes in handy. Here are some links to pattern resources:

Once you’ve identified the patterns you want to use and started to fill in the high-level page structure, the wireframe might begin to look something like that shown in Figure 7.

Figure 7—The evolving wireframe
Evolving wireframe

The patterns that make up the basic page layout for a Web site will be consistent across most pages. For example, the Branding Header, Global Navigation, Secure Page, Secondary Navigation, Page Title & Intro, Customer Support, and Footer patterns are included on every page in the flow and look and behave the same, regardless of the purpose of a specific page. Therefore, each wireframe should include all of these patterns. However, the large Application Form section in the center of the page might contain several different dependent or independent patterns and, at this stage, can be represented by a generic box. The patterns that reside within that box should appear on subsequent pages of the wireframe.

3. Use the same patterns across various Web pages and design documents.

When designing a Web application, for example, you might use the same pattern at the bottom of several different pages within a process—for example, Pattern A: Call to Action, as shown in Figure 8.

Figure 8—Pattern A: Call to Action
Pattern A: Call to Action

You can illustrate this pattern in detail once, on the first page on which it occurs, then represent it in a generic way on subsequent pages, as shown in Figure 9.

Figure 9—Placeholder for Pattern A
Placeholder for Pattern A

4. Annotate the wireframes and patterns.

The more detail you include within the actual patterns, the less annotation is required. So, instead of using lorem ipsum, use real or descriptive copy that communicates what the actual content might be—thus, eliminating the need to provide an annotation describing the content. As Dan Saffer describes in his article “Writing Smart Annotations,” annotations should describe

  • any elements that are conditional—for example, when and how they should appear
  • links and buttons—what happens when a user clicks them
  • any details that you cannot show in a wireframe, because of space constraints—for example, all the options in a long drop-down list
  • any elements having business, logical, or technical constraints—for example, the longest possible length of a password in a field

There is great benefit to wireframing in this way. It allows designers and developers to build Web sites and applications in chunks that they design and code once, then reuse. This technique makes wireframe documents simple to update, because typically you represent each pattern just once. This form of design documentation serves multiple audiences. Copywriters and designers need not wade through tables and tables of annotations, but instead can examine patterns to understand the content and functionality of the pages.

Creating a Pattern Library

An important follow-up step is to gather all patterns together in one central place, for fellow IA practitioners and designers to share. A pattern provides a solution to a common design problem, and if it’s useful in several different instances, it’s worth documenting and sharing. Patterns work especially well if you have a team working on a large Web site or multiple sites for one client, because it ensures all wireframes use consistent interactions and design solutions.

When I think back a year to the wireframing workshop in which I participated, what is most significant is the act of sharing that occurred that day. The willingness of other IAs to share information facilitated the beginnings of my own design process. 

Senior Design Director at Normative

Toronto, Ontario, Canada

Lindsay EllerbyLindsay started her career as a content analyst before realizing her true calling as an information architect/interaction designer. She has been involved in projects ranging from interaction design for online applications to information design for product pages to the information architecture of marketing Web sites. She has also worked on financial, home renovation, energy and utility, and automobile Web sites. With a particular interest in pattern-based design, Lindsay was instrumental in creating a robust pattern library for Critical Mass. She is an active member of her local UX community, viewing informal gatherings as the best way to share ideas and inspiration.  Read More

Other Articles on Communicating Design

New on UXmatters