Learn Web Design: How Repetition Leads to Rhythm

By on May 2, 2016 in Tutorials
Learn Web Design: How Repetition Leads to Rhythm

Repetition is a basic design principle that every designer knows intuitively, but you'll find that intentionally considering it when creating layouts will greatly increase your effectiveness. Throughout a design or series of designs, repetition in colors, textures, patterns, UI elements, and typography creates a sense of harmony and familiarity. This article will discuss different types of repetition and how you can use them to strengthen your work.

Learn Web Design Series

Welcome back to our series on learning to be a web designer. Remember from last time that we're not talking about code, like HTML and CSS, but the foundational principles of design. Simple lessons that will improve your ability to create an aesthetically pleasing end product for your clients. Here are a couple of other posts in this series:

Types of Repetition

Repetition is a basic design principle with both simple and complex uses. Repetition can be easily found in fonts (the use of bold, italics, and the words the fonts comprise), in bullet points and lines, and in colors. Thematically, repetition is vital to consistency by emphasizing space and to unification by bringing seemingly disconnected elements together.

Repetition has many functions: It organizes information coherently, guides the audience, brings together the elements of a design, and emphasizes space. Repeating visual elements throughout ties together seemingly separate elements, although it can become both obvious and annoying when repetition is overused.

Notice the repetition of the curved stripe concept across the theme.

What Is Rhythm?

Objects in a design (otherwise referred to as the “positive element”) alternate with negative space to produce patterns that repeat and impart rhythm. Rhythm is created through the use of repetition to make patterns and produce an alternation of contrast (think bold versus light, white versus black) and a gradation through pattern progression.

The three primary types of rhythm are regular rhythm, flowing rhythm, and progressive rhythm. Regular rhythm is the interaction between elements of similar proportions. The elements are repeated predictably with little variation. Flowing rhythm is more natural than regular rhythm. The use of patterns primarily creates a sense of movement. Nature is a good example of this type of rhythm, as you can look at a zebra’s stripes to see the variation in proportion of one stripe to the next. Progressive rhythm repeats elements with variation over an interval. The variation is typically found in the size, shape, or color of design elements. What makes it progressive is the gradations in size to impart direction to the viewer.

This designer uses circles as a foundational shape for several UI elements, which creates a nice sense of consistency throughout the design.

Creating Rhythm Through Repetition

The interaction of different elements relies heavily on space. Space is necessary when using rhythm because it is in the intervals between objects that pattern and rhythm are found. Time is also a factor, as our eye is guided along the design from one object to another. This creates rhythm within space. Emphasis and contrast contribute to the overall sense of rhythm in design as well. By using contrast, the designer grabs the eye of the audience and pulls it along a set path of elements. The contrast creates emphasis by holding the audience’s attention longer on certain elements (often bolder) than others (often lighter).

The purpose of repetition and rhythm in design is consistency. In particular, consistency is vital to designers in the marketing world since brands rely on consistency to make consumers feel comfortable, whether it’s a web page or a logo.

Notice the repetition of the outlined text treatment from the header, scattered throughout the rest of the theme. It's not overdone, but instead tactfully applied in all the right places.

Consistency is Key

The importance of consistency in design can be seen in the real world. Take city design: the rules of the road are of utmost importance. Without these rules, drivers would fear for their lives every time they got in their car. We know the rhythm of traffic lights, what each color means, and have a sense of how long each color may last (except red, which always takes forever). Repetition leads to rhythm through unification of design elements, such as color and space. Through the skillful use of variation, rhythm is made. Rhythm keeps your audience engaged and always looking at the right beats.


Header image created using Metallic stairs background.

Free lettering worksheets


Download now!

img

Download now!

Getting started with hand lettering?

Download these worksheets and start practicing with simple instructions and tracing exercises.

5 Comments

  1. ashmic

    I've been in design for a while and never really thought about this before in so many words. Thanks for a new perspective (to me) on design!

  2. imagetorque

    I've been a designer for 12 vears and I never read so much baloney in one page. Saying fancy words and writing the word "repetition" 100 times for lack of other synonyms is really annoying and it's a bad way to write an article.

  3. sanaalikhan

    Great tips! I just want to add that any font assets served by Typekit also have the “Timing-Allow-Origin: *” header set.
    http://jicstech.com/" target="_blank" rel="nofollow">uae website designing

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →