Subscribe to RSS

CRAP design 2: Using repetition in your designs

This is part two in the four part series about CRAP web design, which of course stands for Contrast, Repetition, Alignment and Proximity. This article is of course about repetition and the uses it has in any type of design. It allows the user to understand that the design is similar to other aspects of the design. For instance, like a web site having the same navigational structure throughout the entire web site is a kind of repetition that can make the user more comfortable with the web site.Repetition is best used when making some aspect of the design repeat itself throughout the rest of the design. The reason for this is familiarity for the end user or viewer, this gives the person a sense of calm and understanding. Ultimately it gives the person a sense of control over the design itself by allowing them to believe they know what to expect every time they click a link or flip the page. When a user becomes comfortable with a design they will come back time and again because they know that every time they are looking for something on the magazine, brochure or web site they know that the format is going to be the same and their answer will always be in that same area.

Giving the user a sense of familiarity isn’t the only good use for repetition though, it is also used to help control where the viewers eyes go and it allows you to direct them to certain aspects of the design in a way that allows you to have control over what the user does in your web site or magazine. For instance, if you have a business card with big bold company name and in the same style of big bold you have the phone number you are going to make your viewers eyes move back and forth between the company name and phone numbers giving you the two most important pieces of information that you are looking for when you are holding a business card.

One of the other major reasons for using repetition in your designs is that it adds consistency to the web page or document, in a way that brings the whole design together enough to make it seem completed. With just the right repetition an amateurish design turns into a professional design ready to be seen by the world. Using the same blue border throughout your web site will give the whole web site a �completed� feel to it.

Another easy way to add repetition is with typography, using the same font (type face, color, and size) throughout your design will help to bring everything together. If you have 8 or 9 fonts on a single print design it will look like you were just playing with fonts. It is good to use contrast in designs but too much contrast can make it look like a circus. You want enough repetition and some subtle contrast that brings the design to completion.

Popularity: 4%

Whats Next?

  • Save to Delicious! Save the page

3 Responses to “CRAP design 2: Using repetition in your designs”

  1. Janet Says:

    I really like the series and can’t wait for parts 3 and 4.

  2. David Says:

    Thanks for your excellent part two of four. While reading this, I kept
    thinking, “Gosh, my web site looks like CRAP!” I hope I am right!

    (I
    forgot the spam code entry on last post)

  3. John Says:

    I like where this whole thing is going, the insight is nice. Maybe you
    could do a complete article that brings them all together and make it a 5
    part series rather then just the 4 part. Could be pretty interesting. Also,
    more images would be great.

Leave a Reply


Recent comments

CSS fix for the double margin float bug in IE6

On July 24, 2008, katalyst wrote:

omg finally bigtime thank you! i’ve been looking for a solution and yours works for me.

Understanding color in design

On July 23, 2008, Christy wrote:

i am what is referred to as a “traditional artist”- i am a fine art major & have taken a ton of color theory courses. I get confused when reading articles about color...

The best free web development add-ons for IE 6 and 7

On July 23, 2008, Valentinka wrote:

Сайт, да нет это целый портал - с фишкой. Буду теперь постоянно посещать…. и всем...

CSS fix for the double margin float bug in IE6

On July 23, 2008, agencja modelek wrote:

finally found what I sought! thx for this fix! regards, AM

Test IE5 or IE6 on your PC with IE7 installed

On July 21, 2008, Ken Hamric wrote:

CrossBrowserTesting.com allows you to check your site ‘live’ via connection via VNC to several configurations of OS and browsers. The browsers available...