Blog

Design Principle No. 4: How To Repeat Yourself (In A Good Way)

This is the fourth post in a series focusing on the basic building blocks of design. With each new post we’ll feature a different principle that will help you understand how designers do what they do. If you’re ever tasked with creating something yourself, these principles can help you make good design decisions too!

Design Principle No. 4: Repetition

Why is it a good idea to repeat yourself when designing?

Put simply, repetition means the reusing of the same or similar elements throughout your design. Doing so brings a clear sense of unity, consistency, and cohesiveness to your website or printed brochure. As humans, we intuitively look for and expect patterns. As designers, we use repetition to help our viewers find what they are looking for more quickly and easily. In web design, repetition helps users understand how interactive elements work. Repeating consistent elements within a website gives the visitor a road map, and a way to navigate confidently around your site. Visitors who are comfortable with the design elements will most likely stick around and visit more pages of your site.

Repeat these elements in web design:

  • Navigation
  • Footers
  • Typography (font treatments)
  • Graphics
  • Brand Colors
  • Link Styles
  • Photography (placement and style)

How repetition helps your design:

  • Organizes information coherently
  • Guides the audience in a clear way
  • Brings everything together in a cohesive way
  • Teaches users the best way to interact with your website
  • Helps your visitors to anticipate how things work
  • Makes people feel comfortable, therefore they visit longer (yay!)

A word of caution:

Overusing repetition can make a website or lengthy brochure visually boring. Don’t be afraid to mix it up and add a bit of variety, where appropriate. But do so with great caution. Main website navigational design elements should never be altered, just as the placement of page numbers, headers and footers in a brochure should always be located in the exact same spot.

 

Brouse McDowell’s updated brand uses square design elements consistently. These squares are repeated from the logo in the top left. They are used sparingly on top of the photo on the homepage. Headings are always larger and red, body copy is always smaller and brown, and links are always blue and clickable.

 

On interior pages, the colorful square elements are repeated across the page. Navigationally, the main menu’s location doesn’t change when jumping from page to page. The header and footer stay put. The left sidebar guides the user to additional pages within that main section of the site. This is consistent across all interior pages. Crosslinks are strictly located on the right sidebar thus creating a navigational flow that acts in an intuitive way, regardless of where you are at any given time.

If you have any questions about design principles or the projects mentioned above, shoot us an email and we’ll be happy to help.

 

Additional resources:

Principle of Repetition & Pattern by Visscom

How C.R.A.P is Your Site Design? by Mike Rundle

Learn Web Design: How Repetition Leads to Rhythm

6 principles of design

4 Principles of Good Design for Websites by Andrew Houle

Effective design principles for web designers: Repetition by by Ryan Boudreaux

 

Related Articles:

Design Principle Blog Headers-01

Design Principle Blog Headers-02

Design Principle Blog Headers-03