Last week we talked about alignment as one of the four design basics. We looked at a web page who’s elements were randomly strewn across the page and by aligning those elements, we began moving from an amateur design to a professional design. Today we’re going to take a look at repetition.
The difference between our starting and end points won’t be as dramatic as they were last time, but you should still see an improvement to the design by adding some repetitive elements. Next time when we talk about contrast the dramatic should reappear.
Alignment: Where we’ve been
Let’s start by taking a look at where we left off last time.
Our design elements are aligned, but overall our design is still pretty bland. Elements are only connected to each other by lining them up. Let’s add some other visual cues to connect a few of the elements to each other.
Setting up the logo for repetition
First we’ll revisit alignment a bit as I’ve reworked the header area slightly.
The logo above is where we left off in the last post. Below is a slightly reworked logo
I’ve added a horizontal line between the company name and tagline and also changed the font of the tagline to Apple Chancery from the Verdana we’ve been using everywhere else.
Also note the contact info and search box have now been realigned so the center of each should run through the center of the new horizontal line.
The main reason for altering the logo was to provide a few things we can now repeat throughout the page.
Repeating color and font
Here’s our first attempt at adding some repeating elements
You can see that I’ve repeated the color throughout the h2 level headings. The color is the same blue used in the logo. I’ve also used the new font from the tagline for each of these headings. Each of the headings is now clearly the same, though they are also clearly different from the h1 heading at the top of the page.
Now look to the sidebar on the left. I’ve also used the same blue for the links in the navigation and used the same font for the Navigation heading, though this time without the color change. Ideally this would still flag Navigation as a heading while showing it’s different than the h2 headings in the main copy.
Repeating an aesthetic theme
Let’s take the repetition a little further
This last example adds thick horizontal lines below each of the h2 headings. Again we’re using something taken from the logo to reinforce the repetition. Notice too how the lines end just past the text as in the logo, for another repeating touch. Ideally your eye will first fall on the logo and then noticing the repeating elements be drawn right into the page content.
In the sidebar we’ve also added some thinner lines to separate the links. Once again we’re repeating the horizontal line theme and giving another visual clue that each of the links in the sidebar are related.
In our case the strong horizontal lines might be communicating a steady and consistent company. Think of the steady horizon. The choice of blue is further communicating feelings of trust and consistency.
Conclusion
Compare the first and last images on this page to see how repetition adds to the design. Perhaps not as dramatic as when we first aligned things, but still you can see a more finished look begin to appear.
When it comes to repeating elements look at your page and think about which design elements should look the same. Page headings are a natural here, but look for other elements that share some commonality and then give your visitors visual clues that they’re connected.
Be careful about overdoing things. You don’t need to repeat everything. A little repetition will show various parts of your page as being similar and begin to add some overall themes to your design.
Next time we’ll consider Contrast, which will be a more dramatic change and have our design looking much more finished.
Posts in this series
Download a free sample from my book, Design Fundamentals.