Repetition, Pattern, and Rhythm

Let’s look at three subjects that, at first glance, may strike you as being incredibly basic and self-explanatory. However, although they mayseemlike they should need no introduction, we should study them. By understanding these concepts, you’ll be able to apply them more effectively to captivate your users’ attention while making your designs more effective.

Say “repetition” and you might think about someone who says the same thing over and over again. However, it’s different indesign. Repeating things does not have to be boring! In fact, it canempowera design when used in the right way. It can also ensure that messages are better understood. As designers, we have threerepetition methods:repetition,patterns, andrhythm.


Repetition is simply repeating a single element many times in a design. For example, you could draw aline horizontally and then draw several others next to it.

Repetition can be useful in web and app design. For example, you’d expect the logo of a business to be repeated on every page and in the same place. Menu items are also often repeated in the same place on a page. This helps provide a consistentuser experience. By repeatingelements, we as designers not onlydeliver according to our users’expectations in this way, but we also improve their experience. Our being consistent makes the users more comfortable. Remember that the eye works in a certain way by default. Using repetition to keep the eye familiar with our design’s elements means we’re taking advantage of this tendency. We can also use shapes, colors, textures, fonts, etc. to maintain this consistency via repetition.

You can also achieve repetition by using repeated messages. If you want your customers to know that you’re the cheapest or the fastest in the business, you’ll want to tell them that on more than one occasion if you want the message to stick. In this instance, we use repetition forreinforcement. You may rememberlearning your times tables by repeating them until you drummed them into your mind. The principle here is the same. We retain information better the more often we encounter it and internalize it.


Patterns are simply a repetition of more tan one design element working in concert with each other. Aseamless patternis one where every element within a design (no matter how often it’s repeated) combines to form a whole. This is most common in backgrounds on web and app pages. It’s also popular in carpet and wallpaper design. Look around you: your bed cover, wall, notebook cover. If you see a seamless pattern, look at it closely. Do you see how the elements (circles, spirals, cones, pineapples, etc.) appear again and again in the same way? Sometimes, they touch; sometimes, they have space between them.

Author/Copyright holder: Dirk Stoop. Copyright terms and licence: CC BY-NC 2.0

As you might expect, designers base most patterns on colors, textures and shapes, rather than words. We can recognize shapes far more quickly than words, which we have to read, no matter how quickly. You can find such patterns in architecture, too. Architects tend to include a unifying motif on the inside and outside of buildings to enhance the aesthetic appeal. This is nothing new. Think of ancient Greek buildings such as the Parthenon. Ancient designers could be ingenious in their use of patterns of such elements as lines and spirals.

When you consider using patterns in your web or app design, you’ll want to think about the pattern’s complexity. While it might seem like a nice idea to tile a single image as a background, this can make it much harder to read the text that lies over the pattern. If you want tocreate a design for a site that deals with travel to Greece, you could use the top of an ancient column for your design. At first, it looks great; you’ve got a beautiful design that features circles and grape leaves.

However, you still have to add text. So, writing over this, you soon notice a problem. The dark writing sometimes falls over the image’s dark lines. You could use brighter text, such as white or yellow, but you’ll find that the gray stone makes it hard to read, too.You’rehaving trouble reading it, and so will your users. They want to engage with your design, not work to try and read text.Simplicity andsubtlety are key considerations if you want to maintain the user experience, keeping usersonyour page.


When you repeat elements, the intervals between those repetitions can create a sense of rhythm in the viewer and a sense ofmovement. Musicians create rhythm in the spacing between notes, effectively making these “silent” gapsplay offthe notes. Designers insert spacing between elements to makerhythm. There are, broadly speaking, five types of visual rhythm.

Author/Copyright holder: Eden-Lys. Copyright terms and licence: CC BY-NC-ND 2.0

Random rhythm–Repeating elements with nospecific regular interval creates random rhythms. The spacing could be a millimeter here, a centimeter there, while the elements could be all over the place. Think of falling snow, pebbles on a beach, traffic movements: they are all examples of random rhythms in action.

It’s also worth noting that a rhythm mayappearrandom if you examine asmall section of the rhythm. However, if you step back and examine a larger section, it may be that there is a regular but complex rhythm applied to the design. Remember that you have positive and negative images, which you can use so that both the elements and the spaces between them make your design hard to “predict”. By using a larger series of elements, you’ll have virtually limitless possibilities toplay with. The artist René Magritte made particularly interesting use of random rhythm.

Regular rhythm–Like the beating of aheart, the regular rhythm follows the same intervals over and over again. You can easily make a regular rhythm just by creating a grid or a series of vertical lines. The user’s eye will instantly recognize a regular rhythm, scanning it for any irregularities in the process. Remember, the eye “likes” to be drawn to outstanding elements. Therefore, there is a risk that when you’re using a regular rhythm in a design that it can become monotonous (like the dripping of a tap).

Alternating rhythm–You can repeat more than one element in a design. In an alternating design, you use a 1-2-1-2-1-2 pattern. Think of the black and white squares on a chessboard: that’s an alternating rhythm in play. An alternating rhythm is, in fact, a regular rhythm with more complexity. It could be as straightforward as our chessboard, or we could envision something more intricate. Some fantastic alternating rhythms include rows of fish, birds, or other animals. Taking fish as an example, we can see that each identical fish is following another. Below, the sequence is repeated; however, thenegative space betweenthe rows shows fish of theothercolor (which we take to be the background) swimming the other way, the fine lines of their fins and tails interlocking with those of the first pattern of fish. M.C. Escher’sLizard(1942) is another great example of this, incorporating three colors of lizards with a pair of lizards of each color facing away from each other, tail to tail. As simple or complex as we want to make an alternating rhythm, it can be an easy way to break up the monotony of a regular rhythm.

Flowing rhythm–A flowing rhythm shows the repeated elements following bends, curves, and undulations. In nature, you can see this in the waves on a beach or sand dunes. As designers, we can mimic nature by making wonderful patterns of elements with flowing rhythm. We can show clumps of seaweed underwater, their strands gently facing in a series of directions. The user imagines them washing against each other.

Progressive rhythm–We can make a progressive rhythm simply by changing one characteristic of a motif as we repeat it. We could draw a series of circles, one above the other, making each lower one larger. Do you see how the largest one at the bottom looks like it’s closest to you? We can make a progressive rhythm change subtly or dramatically. You could add shade to the smaller circles progressively so that the smallest one at the top is dark, the middle one in partial shade, and the biggest one only slightly shaded. Progressive rhythms surround us. If you were tovideo someone dancing and then examine that video frame-by-frame, you would have a progressive rhythm.

Designing with Repetition, Pattern, and Rhythm

The use of repeated visual elements is a technique designers commonly employ inweb design. You can repeat design elements, for example, to provide a consistent visual experience. It will make it easier for users to focus on the content because they know where they can find specific types of content ornavigation options.

You can also use repetition to draw attention to a particular area of content or design. You can use it to show relationships between content blocks, too.

Also, you can use patterns for backgrounds to addtexture and consistency, and you can deploy them to deliver consistency between pages of the same type.

As designers, we can use rhythm to create excitement (building gradually over time) or reassurance (a heartbeat might be perfect on a page aimed at expectant mothers, for example). Or, we can use it to influence otheremotions.

The Take Away

As a designer, you have three types of repetition:

  • Repetition
  • Patterns
  • Rhythm

You can use these toshape the user experience of your web or app. Through repetition,patterns, or rhythm, you set “the mood” of theuser interface and use these elements to either reinforce your message and/or create the look and feel of your product.

Repetition is the simplest element you can use. Pattern is a combination of elements that are repeated. Rhythm involves using intervals or spaces between elements to give the user an impression of rhythm or movement. We can use five types of rhythm:

  • Random Rhythm
  • Regular Rhythm
  • Alternating Rhythm
  • Flowing Rhythm
  • Progressive Rhythm

There is also another conception of pattern that comes from architect Christopher Alexander. We will examine that in a later article. Rhythm, like in music, helps build a cadence in your design, engaging your users with all sorts of interesting variations. With some thought, you can maximize the impact of your message by working the right rhythm into your design.

References & Where to Learn More