Pattern in Design

What is a pattern in design? A pattern is repetition that has become regular enough to predict.

That prediction is the whole of it. Once you have seen three cards in a row, you know where the fourth one starts. Once you have seen two stripes, you know the width of the gap.

A viewer who can predict the next element stops reading each one separately and starts reading the group. That is useful, and it is also the risk, because a group is easier to skip than a list of individual things.

---

Pattern, repetition and rhythm

Three words for one family, and the difference is worth holding onto.

Repetition is using an element again. Rhythm is the interval between the uses. A pattern is the surface those two produce.

Repeat a square and you have repetition. Repeat it at an even distance and you have rhythm. Keep going until the eye stops counting squares and sees a grid, and you have a pattern.

This is why a pattern needs a minimum. Two repeats is a coincidence and three is usually the point where the eye commits. Below that threshold the viewer is still reading individual elements.

Interval, from scattered to even

For more on the two ideas underneath this one, I suggest you read my articles Repetition Principle of Design and Rhythm Principle of Design.

---

The two meanings of pattern

The word does two jobs in design work, and conversations go wrong when the two get mixed.

1. A visual pattern is a repeated motif across a surface. Wallpaper, fabric, a tiled background, the dots in a halftone. This is the meaning the principles of design are talking about.
2. A design pattern is a reusable solution to a problem that keeps coming back. A date picker, a login form, an infinite scroll, a confirmation dialog. This meaning is borrowed from software architecture and has nothing to do with motifs.

A visual pattern is something you see. A design pattern is something you reuse.

Both are worth knowing and they rarely appear in the same sentence honestly. When a team says “let us follow the existing pattern” they mean the second one.

---

Pattern in interface design

Visual pattern shows up less in interfaces than in print. Where it appears, it is usually structural rather than decorative.

A table with alternating row colors is a pattern, and it earns its place by keeping the eye on one line across a wide row. A card grid is a pattern, and it tells a reader that every item in it is the same kind of thing.

That last point is the useful one. A pattern is a promise that the things inside it are comparable. Put one unlike item into a regular grid and the reader will treat it as the same kind of thing anyway.

Texture and pattern meet here too. A pattern seen from far enough away stops reading as repeated shapes and starts reading as a surface quality. For more on that, I suggest you read my article Texture In Design: Types & Importance [Infographics Included].

---

Where pattern goes wrong

The first failure is putting a pattern behind text. A busy background competes with letterforms for the same attention, and the text loses. If a patterned background has to stay, it needs enough contrast against the text that the pattern reads as a separate layer.

The second is pattern as filler. An empty area is not a problem to be solved, and filling it with a motif usually costs the rest of the page its rest.

The third is the pattern nobody meant to make. Three unrelated elements at an even spacing will read as a set. The eye commits to the pattern before it reads the content.

If three things share a spacing, a reader will assume they share a meaning.

---

Why is pattern important in design?

Pattern is important because of the following reasons:

• It lets a viewer read a group instead of reading every element in it.
• It signals that the items inside it are the same kind of thing.
• It creates a surface quality, which is where pattern becomes texture.
• It gives you something regular to break when you need emphasis.

---

Final Words

To sum everything up, a pattern is what repetition becomes once it is predictable, and predictability is the thing you are handing the reader. In this article you learned:

• What a pattern is? Repetition that has become regular enough to predict.
• How does it differ from repetition and rhythm? Repetition is the act, rhythm is the interval, pattern is the surface they produce.
• What are the two meanings? A repeated visual motif, and a reusable solution in interface work.
• Where does it go wrong? Behind text, as filler, and whenever an accidental spacing implies a group that does not exist.

If you would like to learn more about the other principles of design, I suggest you check out my article on the core concepts here: The 11 Principles of Design and Art [Infographics Included]

Further Reading:

• Repetition Principle of Design
• Rhythm Principle of Design
• Texture In Design: Types & Importance [Infographics Included]