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?
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 government.