Build Your Perfect Interface with UI Design Patterns

In spite of all the UI toolkits available these days, designing intuitive user interfaces is still a challenging task for many of us, and it’s especially difficult for new designers. Even armed with solid design principles, it’s still difficult to implement them in proper proportion to make an appealing, functional design. Fortunately, there is a solution for this situation — by collecting UI best practices and reusable ideas as design patterns, designers can find solutions to common design problems without need to “reinvent the wheel” every time they start a new design project.

As the Internet evolves and new technologies come into play, users expectations also become higher than before. “Good” design work can no longer be achieved simply by abiding by a few basic design principles. Impatient or frustrated users can give up and switch to your competitor with the click of a button. That’s why design patterns are so important today — they give you proven recipes for making your design “good” without requiring extra effort from you.

The aim of this tutorial is to serve as a guide and reference describing what design patterns are, why you should use them, and where you can learn more about them.

What Is a Design Pattern?

So, what is a design pattern? First of all, it’s not a repeatable background image — that’s a different pattern altogether. In simple language, a design pattern is a common, proven assembly of interface elements that already feels familiar to users. We can observe these kind of patterns all around us. If we take a simple example from the nature — a tree — we will see that all trees, no matter their kind, follow one and the same repeating pattern: first is the root, then the trunk, and finally the branches and leaves. Do you think that if we reverse this order the tree will still be familiar and recognizable? Of course not. Mother Nature uses a design pattern that works best and with minimal efforts. I don’t see any reason that we shouldn’t take the same approach when we make our UI designs.

Do Design Patterns Compromise Creativity?

Some of you may be afraid that using patterns will diminish creativity, but this is not true. Patterns capture only a common structure such as a form layout. You still have the flexibility to be as creative as you like. To return to our nature example, you will see so many kinds of trees, each with its own uniqueness. All of this variety is achieved while following the same design pattern.

Let’s consider a more interface-related example — a simple contact form. You can browse many websites and you’ll notice that nearly all contact forms follow the same pattern. They have input fields for the name and e-mail, a text area for the message, and a button which send the information to the server. Unlike the single elements like buttons, text fields and so on, patterns are a harmonious and logical combination/relationship of many elements. They are like déjà vu — something familiar that is seen before. If you change the order and put the “Submit” button first and the message area between the name and e-mail fields, this will deviate from the pattern, destroy the harmony, and cause confusion and frustration among your users.

Patterns focus on a specific problem within a particular context, and give guidance to designers on when, how, and why the solution can be applied, in a way that has been shown to work over and over again. But, keep in mind that these are more recommendations than requirements. Patterns are much like wireframes that you can customize for each design context. Depending on your design, context, and user needs, you can adjust them.

As you can see, patterns are used like building blocks or bricks. They are fundamental components of a user experience, and they describe and guide interaction processes. Usually, they can be mixed with other patterns (as well as other elements) to create an interactive user experience.

Design Principles vs. Design Patterns

Let’s now see why we can’t rely solely on design principles for making a good design. A short comparison between design principles and design patterns highlight their differences.

Principles are more theoretical; patterns are more practical. Patterns describe concrete instances of good design while embodying high-level principles and strategies.
Principles tell you where to go but not how to go there; patterns serve as a bridge between the principles and their implementation in real designs, thus leading you closer to the final design.
Principles tell you what to do; patterns show you how to do it, in the best possible way. Also, patterns often give you explanations of when and why to use them.
Principles are like low-level machine languages; patterns are like high-level programming languages. This means that much of the hard design work is already done, and you can focus on the actual end product without the need to worry about every single detail.

Patterns are one level above the principles — they are principles implemented at their best. But, this is not the only benefit of using design patterns. Let’s see what else they can provide.

What Are the Benefits of Using Patterns?

Patterns improve and accelerate the design process. You can design usable and engaging user interfaces with much more confidence and less guesswork.
Patterns give you proven design solutions and guidelines for how to use them. Patterns identify real solutions and not abstract principles. By making the context and problem explicit and summarizing the rationale for their effectiveness, patterns explain both how a problem can be solved and why the patterned solution is appropriate for a particular context.
Developing a library of reusable user interface patterns encourages development of consistent interfaces.
Patterns improve communication among team members from diverse disciplines by developing a common, shared language or vocabulary when explaining and discussing the design solutions.
Patterns can be an effective way for experienced designers to offer design guidance to those without a formal background in design. By providing visual and textual description, it is easier for novice interface designers to see examples of their successful usage.
Because patterns are based on successful usage over the time, their use can make the web application more usable because interactions afforded by patterns will be already familiar to users.
Finally, while using design patterns, you actually learn the underlying design principles at the same time.

Documenting the Patterns

Patterns can be documented in several ways. The first method is to collect the patterns in a library, where each pattern has detailed explanation plus a visual examples for its usage. Documenting of patterns is slightly different for each pattern library. Below are some of the most common sections which you will find when exploring pattern libraries.

Name – the name of the pattern that makes it recognizable among designers.
Problem – a brief description of the design problem(s) that the pattern solves
Solution – the core design solution to the problem. This is a brief statement about the solution (the pattern) accompanied by an example image illustrating its use.
When – this advises you when is appropriate to use the pattern.
How – this explains you how to implement the pattern in your design.
Why – this gives you the rationale for the design solution’s effectiveness.
Examples – here you can see more examples, thereby clearing the understanding of the pattern even more.
Related patterns – because it’s so often the case that several patterns are used together to create a usable design solution, this section identifies related patterns that designers may want to consider either because they are used together or are relevant for the use of the given pattern.

The second, simpler method of pattern collection is is to simply create a gallery of collected pattern examples, where the patterns are shown as screenshots without actual explanation for their use. Besides single patterns examples, you can also find examples of entire website designs. Pattern galleries are a great resource when you are in need of inspiration or faced with a common interface conundrum.

UI Design Pattern Libraries and Galleries

To help you start using design patterns, I’ve shared my favorite list of design pattern libraries and galleries that I’ve found all over the web.

Yahoo! Design Pattern Library

Yahoo! Design Pattern Library is an excellent source for new designers/developers. Visitors can download a Stencil Kit with draggable and resizable shapes that correspond to many of the patterns from the library, as well as code modules from Yahoo! User Interface Library. The shapes come in many different formats so you can use them in a big variety of design tools such as Fireworks and Photoshop.

Welie.com Pattern Library

The Welie’s Pattern Library is one of the richest and most well documented libraries that I’ve found. The patterns are listed in logical groups, thus making it quick and easy for users to find what they are looking for.

Pattern Tap

Pattern Tap is a collection of design patterns screenshots that you can browse by type, style, or user tags. Every screenshot has link to its source, so you can see the pattern in action.

UI Patterns

UI Patterns is another great source. It has both a library of design patterns and collection of screenshots. The patterns are grouped in categories.

Elements of Design

Elements of design is a big collection/gallery of design. It’s ideal for those of you looking for some inspiration. The examples are grouped in an easy-to-follow navigation.

CSSbake Ingredients

CSSbake Ingredients is another large collection of design pattern examples. Every image has a link to the web site from which it’s taken, so you can see it in action.

Pattern Browser

Pattern Browser has a large library of patterns that you can browse and filter by category, devices, and modality. When you hover on a thumbnail, you get some information about the pattern in the pattern preview panel. This library is also very well documented.

Public Patterns

This library has one of the best and most comprehensive libraries. Every pattern has a detailed description for implementation, examples with source links, and more.

Ecommr

Ecommr is a gallery focused on the e-commerce interface design. Its collection of e-commerce design patterns comes in handy for dealing with the design of online stores.

MephoBox

MephoBox provides you with both a collection of single design patterns as well as entire website designs.

Patternry

Patternry is a cool project that gives you ability to participate by adding patterns, example images, and code snippets. Since these days mobile devices are everywhere and their role is more important than ever, the next four resources are focused solely on mobile design.

Mobile Design Pattern Gallery

Here you can find examples of design patterns from Theresa Neil’s great book “Mobile Design Pattern Gallery: UI Patterns for iOS, Android, and More.”

Mobile UI Patterns

This is a great collection of mobile design patterns with nice, big screenshot examples.

Inspired UI

Inspired UI is a rich collection of mobile design patterns.

Patterns Of Design

And finally, here is a gallery specifically for iOS app design.

More Resources

If you have some extra money and want to go deeper into design patterns, you can check the following excellent books:

And, because the patterns themselves are based upon design principles, maybe it’s a good idea to read some more about principles too:

Summary

As user interfaces become more and more complex, the importance of using design patterns becomes more and more important. In order to create a good UI design, you need solid base to build upon. This is the role of design patterns. They put those design principles into action and help you abide by abstract design laws while still getting your work done. I hope that this tutorial will be useful for you as a first step into the world of user interface and interaction design.