Wireframing With Patterns

By Lindsay Ellerby

Published: March 20, 2007

“When you’re starting out as an information architect (IA), being part of a strong community of fellow practitioners helps immensely.”

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.

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 absolutely 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.
“Wireframing in patterns does away with the necessity of reinventing the wheel each time and brings greater consistency to our designs.”

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.”

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.”

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
“The more detail you include within the actual patterns, the less annotation is required.”

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

“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.”

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.

15 Comments

Good article.

Are the Visio stencils you’re using ready for download?

Thanks

Inspiring article. I’m going to start compiling my own pattern library for my work. Thanks!

Great article.

Great article. I was actually looking for some informal meetings of IA/UX in Toronto area. Could anyone email me with some info? Thanks. max at bluetreedirect dot com

Would it be possible to share your patterns online?

For wireframes, instead of using Visio, just have a look at Axure. It’s powerful software!

Aritz—I know this article is all about sharing, but unfortunately, I can’t publish the Visio stencils used on internal client projects. There are some great resources for stencil downloads, however. Check out Nick Finck’s Visio Stencils for Information Architects and Garrett Dimon’s Free Visio IA Stencil.

Thanks for all the comments. I’m glad people are gaining insights from the article. Some responses:

Starting a pattern library is a great idea, Chris. If you have any specific questions as you proceed, let me know. I have found that one of the most important qualities for patterns is backup research. I always include references to secondary research articles, etcetera.

Max—I will send you some information about the community group. Thanks for your interest; it’s always good to find fellow practitioners!

If you want to see more design patterns, check out the Yahoo! Design Pattern Library. The nice people there have shared a whole bunch of stuff.

David—For now, the patterns we use are shared internally only. I think it’s important to share practices more broadly, so I hope in the future we can. For the time being, check out the pattern libraries I’ve referred to in the article. There’s loads of great stuff.

Are there any tools for leveraging the Yahoo Grids? I will stick with almost instant prototyping in Drupal rather than pay a month’s wage for a locked up tool. KOffice sometimes helps.

Hey Dave—I haven’t used the Yahoo Grids, so not sure if there are tools to leverage there.

Lindsay—Thanks for taking the time to write such an informative article. I will be using your suggestions.

Hi Carla—You’re welcome. I’m glad it was helpful to you. If you have any questions in the future, let me know.

Nice article.

I agree with Eric that Axure is powerful software for wireframes . I use Visio and Axure at the moment to design wireframes. The most important advantage of Axure against Visio is that it can create interactive wireframes!

I started designing wireframes a month ago, and I believe that creating a shape library is one of the most important things, and if you have the opportunity to share the libraries of other information architects, that could save you a lot of time :) and develop your designs in a different extent.

Join the Discussion

Asterisks (*) indicate required information.