Developing Visual Rhythm in Web Design

Think about the driving, repeating intervals of drum beats in the song ‘When the Levee Breaks’ by Led Zeppelin — if you haven’t heard it… shame on you, now go listen to it so we can continue… Bonzo’s drum beat represents what a perfect rhythm is — where music notes follow each other in time, in an expected pattern of repetition. Simply put, rhythm in music or even design is just predictable repetitions.

In design, rhythm is created by simply repeating elements in predictable patterns. This repetition is a natural thing that occurs everywhere in our world. As people, we are driven everyday by predictable, timed events. The sun comes up every day and sets every day, the seasons cycle in predictable patterns every year, and we all know that the World Cup happens every four years. Rhythm in design is just re-creating that, re-creating these predictable timed patterns, creating a sub-conscience relationship with ourselves and creating comfort or familiarity.

Visual Rhythm

There are many ways to create visual rhythm, but there are three main ways to achieve it:

• Regular Rhythm
• Progressive Rhythm
• Flowing Rhythm

I’ll go into each one in more depth below, but each of these methods are simple patterns. A regular pattern just repeats elements in timed or predictable intervals. The progressive pattern repeats elements but changes in size or color to create progressive steps. Flowing patterns are organic or natural feeling patterns that create movement.

Developing a regular rhythm

Regular rhythm is a repeating pattern of timed intervals, but this doesn’t necessarily have to be boring or repetitive. When I take my daughter for a walk in her bright pink Princess Cozy Coupe car, the rhythm of the wheels clicking through the seams in the sidewalk always put her to sleep. It’s this regular rhythm, the timed intervals between each piece of concrete that relaxes her enough to lull her to sleep, but if the intervals were longer or shorter she may not fall asleep as easily.

When constructing a regular rhythm visually, there are many variables that you can play with in order to achieve a rhythm that you want. When repeating elements, you can alter the distance between elements making the overall interval bigger or longer, or you could even make the actual elements larger or smaller and there by creating a different rhythmic feel, faster or slower. The size and position of elements in a repeated, regular pattern can drastically change the presentation of those elements.

Examples of regular rhythm in web design

http://thelitpub.com/

http://www.giftrocket.com/

http://www.tenbytwenty.com/

Developing a progressive rhythm

Progressive rhythm is a pattern of elements that change slightly over time to create a progressive sequence of steps. For all of you Tool fans out there, the song ‘Forty Six and Two’ is a great example of progressive rhythm. The melodic intervals repeat constantly through the song but as the song plays, each interval changes slightly in volume, speed and melodic balance. Although the main melody repeats throughout the song, these slight changes build up to the powerful, loud crescendo of a conclusion.

The easiest way to achieve visual progressive rhythm is to alter the size and color of the repeated elements and let the visual hierarchy of the elements determine the crescendo — the focus of your design. Progressive rhythm is great for adding visual excitement and a great tool for directing the user to a specific location of a design.

Example of progressive rhythm in web design

http://www.aw-digital.com

http://www.luccaco.com/

http://nizoapp.com/

Developing flowing rhythm

Flowing rhythm is generally an organic or natural movement in a design that is most often used to create visual movement. The best analogy for representing a flowing rhythm is the stripes on a Zebra or Tiger. Each stripe is repeated throughout, but each stripe is also unique in its form. Another form of flowing rhythm plays on the space between the elements instead of the elements themselves where the elements are actually the same, but the way you move from one element the other alters creating a sort of path.

Example of flowing rhythm in web design

http://www.ufo.lt/

http://www.girleffect.org/

http://www.flairbuilder.com/

Take control of the rhythm

Adding unique interest and excitement to your web designs can be hard to accomplish, but adding some rhythm to the design is a quick and easy way to do this. Visual rhythm, just like Bonzo’s drumming in ‘When the Levee Breaks’, can be the back bone, anchor and driving force in design. Every design has rhythm even if you didn’t plan for it, so taking control of it will allow you to sharpen and polish off those web designs.