7 Websites That Incorporate Rhythm In Their Design

Posted: 05 Nov 2012 05:30 AM PST

Rhythm is patterned movement. When visually present in a design, it creates interest and leads the eye from one element to the next. How do web designers incorporate rhythm in the sites they build?

The last couple of weeks I’ve been talking about rhythm. First was a post with some general theory of visual rhythm. Then was a post with more practical ideas for adding rhythm, specifically in grids and type. Today I want to offer examples of websites that contain rhythm in their designs.

Common Places to Find Rhythm

Before I get to the examples, let me quickly mention a few places where we almost always can find rhythm in websites. Remember rhythm is repeatable patterns and there are a lot of places we repeat patterns when designing sites.

Navigation — The navbars and menus we create always contain repeated items
Lists — are repeatable lines of text. We can explore rhythm in the bullets or numbers and in the line-length and line-height of the list items
Blog index pages — These typically list several posts with the same visual format (image, post title, excerpt, read more, etc.).
Grids of images — It’s common to show images in repeating rows and columns
Links — The color and general styling of links in content creates repetition. Since we usually don’t choose text to link based on their location on the page, the pattern becomes organic creating a flowing rhythm.

We’ll see how a handful of sites do this momentarily. Consider that as design, development, and even content are becoming more modular, there’s more repetition of similar elements. There are many opportunities to add rhythm to your designs.

Examples

I’d love to tell you that everything I say about the sites below and the rhythm I see is exactly as planned by the designer. I can’t say that, though. These are simply some sites I like and where I think their designs contain rhythm.

In some cases I’m sure it was planned. In others it may be the case of a designer following some other principle or his or her eye and I’m seeing it as rhythm. Regardless hopefully my thoughts will offer some ideas about how you can add rhythm to your own designs.

Note: Click any of the screenshots to be taken to the site and in most cases the specific part of the site being discussed. I’d encourage you to check out the sites. Rhythm or not, these are all designs worth a look.

Chartbeat

While you won’t be able to take it all in at once by visiting the page, the whole of the Chartbeat home page (left) displays an immediate rhythm which you can see to the left. Each section of the page is about the same height and has a different background color. The colors alternate between light and dark to create a regular rhythm of value down the page.

Connecting each section are a series of repeating lines and dots with endpoints in each section. These line and dot segments vary, though the interval between them is fairly consistent. They lead your eye from one section to the next.

If you scroll down to the third section there are several icons on the right side. These icons vary in their shape and in the space between them creating a flowing rhythm.

Several of the sections contain circles of progressive size creating yet another type of rhythm. Background textures, lists, and connecting lines throughout create rhythms in most places you look.

Hugs for Monsters

Hugs for Monsters is a site I’ve linked to before and take inspiration from. All three types of rhythm are present on the home page seen above.

The grid of portfolio images creates a clear and regular rhythm. The pattern of colors at both the top and bottom of the page form another. These color patterns are both located on a dark background that also occurs in the middle of the page as a horizontal line. Taken together they create a rhythm down the page. We might also include the horizontal shape of the illustration and the lines of text as part of this rhythm of horizontal elements down the page.

The navigation at both the top and bottom of the page uses hand illustrated lettering leading to a sense of movement and flowing rhythm. The textured background and strokes in the illustration are also organic and flowing.

The general shape of the illustration tapers toward the right creating something of a progressive rhythm in its shape. You’ll also notice a series of circles within the illustration that get closer together as you move to the right, creating a progression in their intervals. A series a 3 faces in the illustration become yet another rhythm.

Other pages of the site display similar rhythms throughout.

Regular rhythm in portfolio section of Nadine Rossa's site

Nadine Roßa

Another site I’ve linked to in the past is Nadine Roßa’s portfolio site. Again all 3 types of rhythm are present.

A grid of portfolio images creates a regular rhythm. Below each image are small circles representing the type of work done. These too create a rhythm as do the arrows to their left. Navigation at the top of the page repeats as we’d expect and adds interest by including both English and German labels in different values of gray on some menu items.

Progressive ryhtm in What Else section of Nadine Rossa's site

The “What Else” section at the bottom of the page, shows progressive rhythm in the text blocks. Each block grows vertically as you move from left to right and the space between each decreases as you move from left to right.

If you look at the very bottom of the page there are two small illustrations. Each contains an organic pattern. The process section of the site, shows a line of illustrated icons. Both are flowing in their rhythm.

Rule of Three

The copywriting studio, Rule of Three has plenty of rhythm in the copy of the site as you might expect. Rhythm is also present in the design.

Regular rhythm can be found in the 3 circles in the services section, in the grid of client logos, and the circles and general pattern of posts in the blog section. As you scroll down the page you encounter a series of diagonal and vertical lines that create additional rhythm.

In addition to these lines, circles are repeated down the page in most sections. A textured background creates an organic rhythm at the top and bottom of the page.

Once again text is used to create progressive rhythms. In several areas the scale of text from line to line and the measure of the line are varied in progressive steps. These are very effectively combined with the lines and circles to pull your eye through the rhythm and the page.

The World We Live In

The World We Live In (left) offers some of the same rhythms we’ve seen above. There are grids of images and rows of circles and text blocks.

The text block at the top is progressive in both scale and shape. One of the things that called my attention was how the circle rhythm is flipped from horizontal to vertical at the very bottom of the page.

One way the site adds rhythm in a way we haven’t seen is in the navigation. You’ll notice an N*1, N*2, N*3 N*4 pattern that’s repeated in the subheadings down the page. I’m not sure if they mean anything specifically, but they do create a rhythm as you scroll through the page.

TinyPNG

You might have come across TinyPNG when looking to optimize images. In a relatively small amount of space all 3 rhythms are displayed and here they’re even used to direct you to the call to action.

The illustration of grass across the top is a flowing rhythm that becomes more regular with the saw tooth pattern below.
The 3 blocks of text create a regular rhythm horizontally across the page. The last of these blocks is contained in a box with a different background color
Moving down leads to 2 additional boxes. The 3 together form a progressive rhythm, with the height of each box being half that of the box above. The last of these boxes is the call to action.

It’s interesting how regular rhythm leads directly to a progressive rhythm, which culminates in the call to action.

SOUP Agency

The site for SOUP Agency also displays each of the 3 types of rhythm. Several sections of the page make use of regular repeating circles. The Services section uses different shapes with regular spacing to create a rhythm both flowing and regular.

If you look at the Team section (above), you’ll notice in addition to the regular repeating circles there are three progressively sized circles inside each other to the left. A fun touch is found by mousing over these circles or the labels above them. Each reveals the team members in that department in the circles on the right.

Back at the Welcome section (below) there are some interesting rhythms in the use of color and horizontal shapes. Dark horizontal lines repeat vertically down the page. 4 distinct shapes are created horizontally across the page. The color of these shapes follows the pattern dark, dark, light, dark, making the rhythm more interesting than had all 4 been dark.

Summary

These are just a few sites where I observed rhythm. If you look around you’ll find most designs contain some sort of rhythm whether intentionally designed or not.

I suspect with some of the items I mentioned above the word rhythm wasn’t thought about when designing the elements. However with some it most definitely was considered. Consciously or subconsciously it was designed and is present.

Hopefully these examples and the previous 2 posts have helped make you more conscious of the rhythm on sites and particularly in your own work.

Given the move toward proportions that’s occurring with responsive design and the move toward responsive design in general, it makes sense for us to think more about rhythm and how we can make use of it in our designs.

Do you ever consciously plan for rhythm in your work? Are you aware when it’s present even when not specifically planned?

The post 7 Websites That Incorporate Rhythm In Their Design appeared first on Vanseo Design.