Design Patterns

The nuts and bolts: Design patterns are general, reusable solutions to a commonly occurring problem within a given context in software design. It’s not a finished design that can be turned into source or machine code right away.

---

There’s nothing wrong with improving our work, but there’s nothing wrong with getting a head start, either. Design patterns are proven solutions to common patterns in user interface, user experience, and aesthetics. They’re starting points so you can spend more time on details that matter for each project.

Using patterns doesn’t mean designs on which they’re based look the same. Their colors, imagery, and features build on the general ideas that patterns provide.

Mimicking is Not Copying

Patterns are meant to be emulated, not copied. There’s a difference. Copying is when you apply something to your own work exactly as you found it. Claims of plagiarism aside, it’s important to realize that what works for someone else may not bring you the same success, no matter how much you like it.

Emulating is when you try to understand what made a pattern work for someone else — and how you can make the idea work for you.

Take the ubiquitous navigation bar. Its job, in most cases, is to let people hop to major sections of a site from any page. It’s a list of links. But designers find many different ways to display that list.

Above: Navigation bars can be stacked vertically. This strategy works best when each link has many words.

Above: Navigation bars can be stacked horizontally. Doing so often keeps links out of the way — unless designers make them part of the site’s header.

Above: Sometimes nav bars are not even “bars” in the usual sense. But the idea remains: to present users with a list of links that lets them move about the site.

Navigation bars aren’t the only pattern. Every conventional part of a website may begin with an idea. It’s a customization that turns general patterns into actual products.

What Patterns Are Not

Maybe the best way to understand patterns is to think about what are — and what they are not.

• Patterns alone are not worthy of your portfolio. They’re ideas that lead to works in a portfolio.
• Patterns are reliable. They can be improved or modified, sure, but a good pattern is ready to be used at a moment’s notice.
• They are not guides or tutorials. They do not tell you what to do. Patterns are starting points to spark your own creative ideas.
• Patterns are not skins. They are not themes, plugins or production-ready widgets. If someone can put a design element into their site as-is, it’s not a pattern.

The other way to get into patterns is to look at many variations of the same solution.

Finding Inspiration Without Being Unoriginal

If you’ve ever been so impressed with someone else’s work that you wish you’d made it yourself, you’re not alone. The act of looking to peers for ideas is as old as having peers. While there’s nothing wrong with feeling envious — err, inspired — by someone else’s design, there’s a danger in trying to imitate what you like too closely.

A simple solution is to find a second, third or fourth implementation of the same pattern. Do you get jazzed by a cool navigation bar technique? Terrific! Go find another and compare the two. Finding many examples of a pattern will give you a well-rounded view of the pattern while helping you avoid becoming an outright copycat.

Resources exist to help you do just that.

Practical Patterns at Work

Some time ago we decided to unify the footers across all websites we owned. The catch: each website has had different requirements. After deciding what we wanted in every ZURB footer, we created a design pattern — a visual guideline — of how the ideal footer should be arranged.

As the diagram above shows, we sketched out a general layout that organized content into layers. Copyright, major sections, calls to action and email signup forms fit into a coherent package.

We drew from the pattern to encourage consistency among all footers but didn’t let the pattern restrict us. Each site had its own needs, such as width and brand color. Not every site needed a signup form. Not every site had the same width. That’s fine. Unlike templates or skins, patterns don’t carry exact specifications. We created exceptions as necessary — and it worked. Check it out by clicking on the image below:

Whether you’ve been consciously using design patterns or not, using them as a foundation for your work can get you up to speed quickly. The more versed you become in each pattern, like types of forms, navigation bars, and grid structures, the faster you can move away from them. That’s the paradox of a good pattern: It’s the first step. Where you go from there is up to you.

Are Your Patterns Working?

Patterns are only as good as the users ability to understand them. That’s why it’s important to test your audience’s UI Comprehension. Helio makes it deadly simple for you. We even have a template you can use. Check it out: