Web Development

Effective design principles for web designers: Repetition

Ryan Boudreaux reviews the design principle of repetition. Find out why it is such an important element and how it aids your website design.

In my previous post, I introduced the four standards of design, and reviewed the design principle of contrast - particularly as regards designing for the web. This time, I will review the principle of repetition, leaving alignment and proximity for future posts.

Repetition typically shows up on websites as repeated visual elements that appear throughout the pages on the site. Elements that can be repeated with effectiveness are colors, shapes, textures, fonts, typography, graphics, images, videos, spatial relationships, line thicknesses, headers, footers, navigation, sidebars, widgets, and on. Repeated elements in a consistent manner help to promote the organization of the website and reinforce continuity. The use of regular or irregular, even, or uneven elements can be utilized, as long as they are deployed in a uniform manner. Components can also be repeated in a gradation or progression state, where elements either get larger or small as they are repeated, as in the example of "Repetition" above. Variation in repetition helps solve the challenge of websites becoming humdrum and boring.

Repetition is important to the flow of web design

Repetition is a common part of nature; for instance, next time you are outside take time to study a forest of trees, and notice how many of the same species are counted. Ever notice a flock of birds as they fly south in the winter -- the patterns they make are repeated with variation in the familiar "V" shape, and the repeated variations found in a herd of zebras at the local zoo is an example of repetition with variation. Notice the repeated pattern of stripes on the two zebras in below, yet also note that each strip has variation, and no two stripes are exactly alike. Repetition without variation on a website makes it a monotone, dull, tiresome, and all too familiar haunt. Give your visitors a reason to return to your websites and avoid the chronic broken record routine.

Repetition also gives your visitors a sense of site recognition and consistency. Using a repeated logo and keeping the headings, fonts, colors, sizes and styles the same across all pages adds a repetitive continuity that enhances the flow of the website. Flow is created by the movement or rhythm of elements as they occur throughout a website. Repeated use of elements, which have a common attribute, create a pleasing visual pattern, and slight variations to a simple repetition will enhance the visitor's curiosity and attention.

Repetition creates continuity and looks professional

Consistency is gained from the repetition of similar elements such as navigation sections that remain in the same location as you go from one page another. This helps the visitor feel comfortable that each page will respond with similar functionality and maintains equilibrium throughout the online experience.

What if every time you approached a roadway intersection the rules changed with every traffic light? On one intersection you might find that the lighted purple square means go, at another intersection in the next town, the rectangular blue light means go, and in yet another, a round flashing pink light means go!

While the above analogy is extreme, try to remember any websites you have visited recently that lack that same level of continuity and balance. When very few elements get repeated, the flow and rhythm becomes more like a faltering heart beat on life support. Repeating consistent elements including navigation, footers, typography, graphics, and overall styles within a website gives the visitor a road map, and a way to navigate confidently around your websites. Visitors who are comfortable with the repeated design elements will most likely stay the course and revisit your site time and again.

How do you use repetition in your web design and elements such as font, color, images, graphics, navigation and such?

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

2 comments
sofargood
sofargood

HI, Here are the basic principles of a web design Good design is innovative Good design makes a product useful Good design is aesthetic Good design makes a product easy to understand Good design is unobtrusive Good design is honest Good design is long-lasting Good design is thorough Good design is environmentally friendly Good design is as little design as possible all good design will attract the viewers, according to me, instead of trying to design a site by ourselves, we can go for a web builder which will gives us templates to design. Even we can design there a multimedia site if we need. There are web builders sites online but my experience with http://www.tucktail.com/ has been wonderful because they charge only $12.99/month for a premium service. Thanks.

Ares S.
Ares S.

I think that more than repetition, what you are looking for is consistency. A consistent navigation schema in all pages, a consistent color for links in your site pages, etc. I think the definition of consistency matches what you are trying to describe much better than repetition: con·sist·en·cy/k?n?sist?ns?/ (Noun: ) Conformity in the application of something, typically that which is necessary for the sake of logic, accuracy, or fairness. The achievement of a level of performance that does not vary greatly in quality over time.

Editor's Picks