Your viewing the DMD archive. Visit the Design Meltdown Portal to find the latest DMD content.

Or skip straight to Monster Meltdown - the new face of Design Meltdown

Repetition

1st edition — by Patrick McNeil — Dec. 5, 2007

The Design Principle

For the fifth design principle we will be taking a look at the concept of repetition. With this principle the focus is on how elements of a design are used more then once throughout a design in varying ways. By doing so designs that contain such repetition become far more unified. This repetition can come in many forms, things such as: color, shape, line, fonts, imagery, theme, or just an overall approach to style. Repetition is an inevitable design principle. If no elements in a design are repeated it typically lacks a unified and cohesive feel.

Lets start with an obvious sample to see how this principle can work to our advantage.

Sample 1 - Lets Fax

http://www.letsfax.net/

This sample makes use of repetition in pretty obvious ways. And yet, it is still worth talking about. Overall the design of this page is rather simple, and pretty straight forward. No over the top design going on here. But there is a richness to the design, an overall aesthetic that feels soft and cozy, a design which feels unified and clean. In this case repetition has single handedly unified and elevated the design of this site. Rounded corners in this case have been used over and over to bond the page together.

The main frame for the content had rounded corners. As do the main buttons, sub containers and numerical highlights. Even the logo and font choice is all based on soft rounded corners. Clearly the designer consciously chose to unify the page through the repetition of such an element.

The service this site offers is simple and straight forward, as is the design of the site. No cheesy stock photos. No goofy fax machine cliches. Just a simple straight forward design which is nice and cleanly designed.

If instead of rounded corners the designer had chosen the typical pointed ones, the design would feel more typical or default and would simply not feel nearly as sharp.

Sample 2 - Ed Did It

http://www.eddidit.com/

This site is of course another demonstration of how to effectively use repetition. In this case the use of it is not necessarily what makes the page such a grand success, but it certainly is an element of the design which makes it successful. It is obvious of course, but the curly brackets on the side elements echo the same treatment in the logo. This simple, semi graphic element, unifies the bare bones page in such a way so as to give it a much more designer feel. With out these simple little brackets, the design would feel very bland. It is truly amazing how such a small element can be make the difference between success and failure.

Sample 3 - Bandpush

http://www.bandpush.ca/

The Bandpush 07 site is an interesting example. In this case the usage of repetition is somewhat hidden, or at least it is a less dominant element of the page. Sure the bold yellow headings repeat each other and from a glance visually unify the page. But what really pulls the page together is its rich use of texture and distressed design. The wooden background fits well with the worn and tattered paper. Every element of the page has been worn and battered to visually unify them.

Sample 4 - iMarc

http://www.imarc.net/

Another less obvious approach can be found on iMarc . Here repetition has been used in terms of layout. Well sure color has been repeated, but a 3 bucket layout has also been repeated. In the header we find 3 main elements. Then we find two bands of 3 elements. It is these repeating chunks which manage to give the page an overall unified feel.

Next we will be looking at the principle of flow, the final principle in this series.

divider

Sample Usage

divider

Comments

Make a Comment:

All fields are required & all posts are hand moderated.



(not displayed publicly)



Captcha