ÎÛÎÛ²ÝÝ®ÊÓƵ

Rhythm

ÎÛÎÛ²ÝÝ®ÊÓƵ

Repetition considers elements that repeat across pages, sites, or platforms. Rhythm describes repeating elements within a layout. Most humans find rhythm aesthetically pleasing. Layouts without rhythm can feel chaotic or overwhelming. Rhythm helps organize content, and it can draw the eye through longer layouts. The four main types of rhythm are:

  • Regular
  • Alternating
  • Progressive
  • Flowing

Regular rhythm uses the same intervals and design cues for repeating elements. Grids and lists are classic examples of regular rhythm:
Nine items in a 3 x 3 grid

Regular rhythm feels orderly and neat (although it can also be monotonous if it's too long or items are too similar). Regular rhythm is a great choice in this example because it draws attention to the icons, which serve as a memory aide for the different standards.  

Alternating rhythm is a variation on regular rhythm. Instead of using the same intervals and design cues throughout, alternating rhythm alternates between two types of element:

Three-row layout with alternating three and one row blocks

In the example above, a white three-column row is followed by a black full-width row and then another white three-column row. This type of rhythm is more dynamic, but still orderly. Alternating rhythm works well on longer pages: the consistency makes the layout feel simple, but there’s enough visual variety to draw the eye through the page.

Progressive rhythm shows repeated motifs that evolve as the eye travels over the design:

Layout with one, two, and three-column rows

In the example above, you can see how the rows of blocks progress from one column, to two column, to three column. Key elements (titles, buttons, images) are repeated, but the block width, format, and proportions vary a bit with each row. In this case, the progression communicates a clear sense of visual hierarchy in spite of the similarities in the content presented.  

Flowing rhythm isn't directly applicable to layout design, but it's visually pleasing and can be incorporated in imagery used on your site. Rather than having abrupt and obvious demarcations and highly consistent shapes, the repeating elements or the transitions between them are more natural and fluid. Flowing rhythm is often found in nature:

images of leaves, bark, and tides

Humans naturally perceive this type of rhythm as soothing. This makes it an interesting choice for images or illustrations.

Like the other principles we've covered, building a good rhythm takes planning:

  • Know your content - and the visual hierarchy you’re trying to achieve.
  • Sketch your design before your build. This will help you play around with different chunks of content to find a rhythm that works.
  • Once you have a sense of your content and how you’ll arrange it across rows and columns, you can use photos, typography, and background colors to support rhythm.

One last tip: Unless you’re deliberately using regular rhythm, try to make each row to be a bit different from the rows immediately above and below it. Slight variations between rows add visual interest. (You might have noticed that our "alternating rhythm" example had a slight variation between the top and bottom rows. The layout wouldn't have been as engaging if it had followed a strictly alternating pattern!)

Back to top