Wireframing With Patterns

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.

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:

• Yahoo!® Design Pattern Library
• Martijn van Welie’s Web Design Patterns
• Designing Interfaces, the book by Jenifer Tidwell
• The Diemen Patterns Repository
• Tom Erickson’s The Interaction Design Patterns Page

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.

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.

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.

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.