Imagination is our power

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?

Advertisements

Comments on: "Effective design principles for web designers: Repetition" (3)

  1. Your method of explaining all in this article is really good, all be able
    to simply understand it, Thanks a lot.

  2. Highly energetic article, I liked that a lot. Will there be a part 2?

  3. We stumbled over here coming from a different web address and thought
    I may as well check things out. I like what I see so i am just following you.
    Look forward to looking at your web page again.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: