Rhythm - Basic Principles of Design

Centered arrows
Westend61 / Getty Images

The "design" part of web design is an important part of any site's success. As critically important as a site's content is, and how much of an impact best practices like multi-device support and optimal performance will have on a site, you can still not discount the benefits of a great design.

There are a number of principals that go into creating a great website design. One of these principals is the design concept of Rhythm.

What is Rhythm in Design

Rhythm in design is also known as repetition. Rhythm allows your designs to develop an overall consistency that makes it easier for your customers to understand. Once the brain recognizes the pattern in the rhythm, it can relax and better comprehend the rest of the design.

Repetition rarely occurs on its own, and so it embues a sense of order onto the design. Because of this, repetition attracts attention and prompts customers to investigate further.

Use of Rhythm in Design

One of the best ways to use repetition and rhythm in web design would be for a site's navigation menu. Having that menu designed with a consistent, easy to follow pattern will make for improved navigation that users find easier to use. Any time you can make something more intuitive for your site's visitors, that is a "win"!

Rhythm can also be used as you layout different kinds of content on a site.

 For example, if all of your site's blog articles follow a certain pattern, while press releases use another, and events follow a third pattern, you can establish a system where people can understand what kind of content something may be simply by how that content lays out on a page. Furthermore, once a user gets that pattern and is comfortable with it, they will have no problem with the other pieces of similar content on the site.


Colors are yet another great way to use consistency and patterns on a site. You can use select colors for different services that are offered, for example. This pattern of colors/services makes it easy for someone to see, at a glance, where content or pages fit in the overall breadth of a site.  One thing I love to do is to make it so one certain color on a site is used when something is "linkable".  For example, I may set text links in the color red, which means that anything else on the site that uses red in any way would also be a link. That pattern makes it helpful for visitors to identify what is what on a site as soon as they understand the pattern.

How about images?  Yes, you can use rhythm in the images that are used on a site. Repeating background images Can create an attractive design the flows with a site and adds to the overall visual appeal of a page.

Typography is yet another area where rhythm and web design go hand in hand. A limited number of fonts used on a site, but which flow well together, is a great way to create a flow and rhythm to the content. I personally love to find a typeface like Raleway that includes a number of different weights to it. You can use this one typeface, but different weights of that choice, to create a typographic pattern that works really well as a whole, but with distinct individual pieces.

For example, you would display headings at a larger size than paragraphs. You could therefore use a font with thinner letterforms (or even much thicker letters) since the larger font size will still allow them to be readable. The paragraphs, which would be set at a smaller size, could use a normal or medium weight. Together, these two styles would work really well as a unit, but a simple glance at this pattern would make it easy to see which pieces are headings, and therefore more important, and which are normal text.  This is achieved through a pattern and a rhythm which works well and looks great for a website's design.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 3/3/17