Design Principles #3 - Getting down to the Rhythm

Rhythm is mentioned by one of my arty farty heros Henri Matisse

An artist must possess Nature. He must identify himself with her rhythm, by efforts that will prepare the mastery which will later enable him to express himself in his own language.

Now Mr. Matisse was taking about paintings but it is equally true about music, poetry or indeed web and app design. We as devs create rhythm by simply repeating elements in predictable or surprising patterns. This repetition is a natural thing that occurs everywhere in our world. As people, we are driven everyday by predictable, timed events. The Olympics every 4 years, telegraph poles along a road, fence posts receeding off down a beach, breakfast coming after gettting out of bed.

Rhythm in design is just re-creating that, re-creating these predictable timed patterns, creating a pleasing sub-conscience relationship between the elements in the pattern.

Humans are designed to seek for and recognise patterns being able to recognise a sabre tooth tiger was a definite advantage to our hairy anchestors!. Patterns are familar and are reasuring to the user, unordered chaos (the opposite of rhythm) jars and unsettles the viewer and should be avoided - unless that IS what you were looking to achieve ;-)

In your app or web site rhythm creates a sense of movement for the user. A good website shouldn’t feel template based, it should tell a story. The fluctuation or repetition  of key elements on a website express rhythm.

So rhythm - tell me more ... there are 3 types Regular, Progessive and Flowing.

Regular Rhythm

Dead easy ...it just repeats elements in timed or predictable intervals like this .. on Play.com

Button equal sized and horizontal, large main image in the area where the eye naturally gravitates, and "KNOCKOUT DEALS!" slap bang in the hot zone of eye movement. Then four small rectangle panels along the bottom. Even these 4 panels have text on the left similar sized image on the right.

All regular, safe , rhythm!

Beware regular rhythm! It can be ... boringly template looking ... if not done well and with some stylistic flair.

Progressive Rhythm

A progressive pattern used changes in size or colour or possesion but not in a regular way. Progessive patterns lead the eye progressively through the elements. In http://flairbuilder.com/ above the asymmetric circles and dotted thread are perfect examples of a Progressive Rhythm leading the naturally from Circle to Circle right to left.

This is particularly skillful blend of regular rhythm in the navigation and footer and progressive in the center panel. It works visually and that is always the acid test of a good design.

Flowing (or Fluid) Rhythm
A flowing rhythm gives a sense of movement, and is often more organic in nature. Think of the stripes on a Zebra, they are regular white and black stripes but arranged in a fluid almost random way. (The rhythm on a Zebra comes the repeating white and black not the size position or shape.)

Flowing is perhaps the most difficult of the rhythms to get right with elements on the page however you can use it to good advantage with your masthead or footer images, which can give the over all impression of a flowing movement on the page.

... and in this website , the sadly now defunct http://www.aw-digital.com

 .. the dev has used a mixture of regular (the stripes top left) and progressive (the semi circular arc) and fluid with the different sized circles. The combination gives a very pleasing effect. Also note there in the top left quadrant the home button.. right where the eye will settle and there diagonally opposite are the "social" buttons balancing the home button nicely.... Lovely!

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.Our own demon drummer Bruce Elgort will tell you that good drumming can be the back bone, anchor and driving force in music and as you can see it can be the same in web and app design! Every design has rhythm even if you didn’t plan for it, so a good dev will  take control of it and use it to the best advantage.

.. and so on to how to do "Emphasis" to your app's best advantage in the next design post