Learn basic principles of website design.  Home Web Design Basics Design Principles Rhythm and Repetition
Your Ad Here

Rhythm and Repetition


Aside from alignment and grouping, elements can be linked using rhythm: a regular or irregular repetition of common stylistic features.

Rhythm is the most subtle and abstract of the 'associating' tools.

It helps to associate elements by repeating a common stylistic feature or arrangement. This even works when elements aren't grouped or aligned, but often works in conjunction with these techniques.

Rhythm is a common technique in graphic design. It can work whenever a style is repeated. Familiar examples include bulleted lists and headings.

It's easiest to show how rhythm/repetition works through examples.

Example of simple rhythm

Example of rhythm from US Republican Party's web site

This snippet from the US Republican Party's homepage (no affiliation is implied), shows rhythm in effect.

The section headline style is repeated, all the instances are left-aligned and separated with a common horizontal divider. This creates a rhythm. Once you've decoded even one or two examples, your brain creates a rule or pattern on the fly You then use that rule to recognise and interpret subsequent examples of the header.

The brain also applies rules in this way when scanning a page.

You quickly notice that the bottom Features are also clearly related. As well as being horizontally aligned, rhythm is also noticeable in their regular size, regular spacing and repeated styles of the images, headlines and copy

Example: Associating elements using rhythm alone (no alignment or grouping)

Sopwell House Hotel

In this example, the 6 main navigation links aren't all grouped or contained spatially, or aligned around any common axis. They are clearly associated as peers, which is effected through rhythm.

The rhythm is created through a number of stylistic features: font, visual layout of each item, and a roughly circular arrangement.

Using rhythm allows for a spacious and informal layout, using an elegant balance, without loss of clarity.

Example of lack of rhythm

Skinnycorp's menu - awkward lack of regular widths This is the menu from Skinnycorp's (otherwise great) site.

It's a good example of missing rhythm. The first-level menu items ought to be regular widths, to make it clear that they are related.

The result is a menu that's dominated by the dark grey negative space. It's difficult to focus on the second-level items.


About the Author:

Principal consultant at Scratchmedia Ltd., Ben Hunt is a very successful professional web consultant who has designed internet and software solutions for all kinds of clients in Europe and the USA, including: the BBC, Freeserve, HM Customs & Excise, ProQuest, Morrisons, Which? Online, Sky, Reebok, Bechtel, France Telecom, J P Morgan, and Breathe.com.

Author's URL: Ben Hunt
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Learn web design basics about usability, layout, colors, design principles and more. Take an in-depth look at what attracts a visitor to your site. More Web Design Basics: Most Popular Materials | Fresh Materials | Website Templates

Add comments to "Rhythm and Repetition"

Only registered users can write comment

No comments yet...