1. Technology

What are Design Patterns

Creating Websites That are Usable Because the Pieces Are


Do you know what a form button looks like? What about a tabbed navigation bar? The reason you can answer yes to these questions is because of “design patterns.” Design patterns are an established structure for design and they can be used in any field that uses design, including desktop publishing, engineering, and web design.

The History of Design Patterns

Design patterns were first introduced in 1977 in a book called A Pattern Language: Towns, Buildings, Construction by Christophe Alexander. In this book he described some common patterns found in common city features like coffee shops, hospitals, and rooms in homes.

For example, a standard home in the United States includes a bathroom, and there are several design patterns that describe a bathroom. In real estate, these patterns are even further divided to define full and half baths and even 3/4 and 1/4 baths in some cases. But the standard design pattern of a bathroom includes:

  • a sink
  • a toilet
  • a bathtub or shower (or both)

A room that includes these amenities would be called a bathroom, even if it also included special features like a washer/dryer or a bidet. We know this because this is the design pattern for a bathroom.

Why Use Design Patterns

Design patterns have two parts: the problem and a standard solution to that problem. So to take my bathroom example above and make it a design pattern, I would write:

Problem Homes need a sanitary place to eliminate wastes and clean up that is separate from the other household chores such as eating and sleeping.

Solution A bathroom, which includes: a sink, a toilet, and a bathtub or shower.

Design patterns are useful in two ways:

  • They save time. If someone else has already solved a problem that your website has, you don't have to reinvent the wheel to find a solution to that problem. You can simply look at the pattern and reuse it.
  • Patterns make your site easier to use. When you use a standard pattern for a problem on your site your customers will understand it more quickly because it's already in use on other sites around the web.

The second is especially important. If you are focused on creating cutting-edge websites, you should be very clear in your design. While using non-standard features like horizontal scrolling or navigating with a photo of a street may seem exciting and even a little avant garde, many of your readers won't like it because you are skipping or ignoring the standard design patterns for scrolling (vertical scroll only) and navigation (using buttons or links). Even design patterns on the web that are common today, like tabbed navigation, took time to become commonly used.

How to Use Design Patterns on Your Website

The first thing you should keep in mind when setting out to use design patterns is that you should never use them as an excuse to copy someone else's work. Instead, you should use patterns as a way to ensure that your design has all the necessary elements to make that particular pattern work, and then put your own design spin to it.

Patterns are not a blueprint for an entire website or even just a page. Instead, they are tools to define elements of your pages and the site as a whole.

The Yahoo! Design Pattern Library is a library of common web design patterns that are found on the web. These 59+ patterns include things like:

While it's possible to use the Yahoo! design patterns for your site and leave it at that, the best way to use design patterns is to create a standardized pattern library for your website. You should include common patterns for your site and the exact design elements that you use on your site. Be sure to include things like:

  • colors for text and layout
  • fonts for headlines and body text
  • header and logo treatment
  • navigation
  • layout grids for various page designs
  • footer treatment (inlcuding what elements should be in the footer)

Even if you use a tool like SSI or PHP includes to include common elements on every page, you should describe the patterns that these create so that you remember in the future or new designers come in and don't start from scratch.

Don't Expect People to Learn Your Design from Your Patterns

I once worked at a company where the UI team spent a painstaking amount of time creating and defining the design patterns used on the site. They had graphic designers come up with the colors and layouts for dozens if not hundreds of design elements. Then they had a web developer convert all those designs to HTML with JavaScript and CSS so the web team could use them.

This was all great, but the design team (and the designer responsible for most of the work) grew very frustrated when he noticed that very few of his designs were being implemented on the website. He created a beautiful accordion for the company's press releases and then discovered that the development team had simply put up the releases in a bulleted list and would remove older items manually when new ones were added. He came to me (as the development manager) very angry that we hadn't implemented his solution.

The problem was, we didn't even know he had a solution to that problem. He had put up an internal website of design patterns and then expected us to memorize it (after all, he had it memorized!) and also recognize when new patterns had been added. But the development team had enough on their plates just trying to build the site and didn't have time to memorize the dozens of patterns that the UI team had dreamed up (and where each pattern was supposed to be used).

Creating a good design pattern library can make your site more usable for your readers, but in order to get it implemented you need to remember a few things:

  • Don't use the library to train new designers on the team, especially if you simply hand them the URL to the library and then ignore them. While some people might be able to use this, most will simply skim the material and then start doing their own thing.
  • The larger your pattern library is, the harder it will be to use. In the scenario I described above, there were design patterns that looked almost identical (in one case the difference was the width of the element, 150px vs. 160px depending upon the page location). While this is important for a good user experience, it conflicts with the ability of developers to implement the patterns.
  • Design patterns should be written so that people who aren't user experience experts can understand and use them. Helping people to understand why the patterns are useful will get them used and help your site.
  • Use your knowledge of design patterns when you create the library. Include patterns like an index and table of contents. The easier you make your library to use, the more it will be used.

Where to Find Web Design Patterns

There are many places you can find web design patterns, some of the better libraries include:

©2014 About.com. All rights reserved.