Contrast
1st edition — by Patrick McNeil — Nov. 28, 2007
The Design Principle
The second key principle of design we will be discussing is contrast. Contrast as you might expect is pretty self explanatory. But hey, this is the basics, so some clarification is in order. Contrast is simply the visual differentiation of two elements. Elements with strong contrast look distinct, elements with low contrast appear similar or blend together. There are many ways to achieve contrast, some of these include: color, size, position, font choice and font weights. Through contrast a site design can have visual variety, and avoid being stale. It is also through contrast that focus can be achieved, there by addressing the need for emphasis on certain elements.
A key purpose behind contrast is to implement the hierarchy of a page and enforce the desired emphasis. Contrast can be used to draw attention to the most important elements of a page. Things like the content, action items or purpose statements. Depending on the needs of a site, the designer can choose to draw attention to certain elements though the deliberate control of contrast. As always, lets look at some samples to see what designers have done with this.
Sample 1 - Studio 3k
The Studio 3k is a great example of a common sense approach to the use of contrast. The design of this site features a very logical approach to the use of contrast. By playing into the strengths of contrast and the natural order of things the site makes no attempt to force contrast to achieve difficult tasks. Enough with the abstract talk. Lets break down the design to see what I mean.
Above all this site uses position combined with contrast to establish hierarchy. The hierarchy of the page rather clearly goes from top to bottom. The top most elements of the page are first in the hierarchy and the steps just go down from there. It most certainly took some time for the designer to tweak the design to ensure this happened. A little to much contrast here or there and all the sudden this order would change and the viewers eyes would bounce around the page.
Lets start at the top of the page where the highest contrast part of the page is found. The bright white logo stands out on the gray background. This reinforces the brand of this design shop and helps its logo and name stand out. A wise thing considering the vast selection of design shops.
The next band of content we find is a simple purpose statement. The white background of this section helps to establish a more powerful contrast. Especially when combined with fairly large and dark text. The photographs are also the largest in the page and overlap the section above it. This type of contrast has been leveraged to effectively focus users attention on an important element of the page.
Below this white section is the final third of the page. At the top most portion of this section we find the third level of hierarchy in the page. Again we find the use of color contrast, in this case blue on gray. Additional larger type has been used to help draw attention. This image serves as a header to the 3 columns below it and are visually connected to them by being placed inside the same gray section. This is important because it helps keep the user from wandering off. If the visitor has made it that far down the page with out clicking on something, the 3 columns provide a host of links that might be of interest.
It is easy to see how the top down approach of this sites simply makes sense and plays on visitors natural top to bottom motion. This creates a really clean and effective design that doesn't leave the user confused or lost.
Sample 2 - Clear Function
Clear Function is a great example of the use of contrast in a more complex way. For starters their home page is very content heavy and with out the use of contrast all of it would run together and be impossible to scan. By careful usage of contrast they have reduced the overwhelming nature of so much content and made it far more manageable. Lets look at this site from a few different perspectives.
One of the first things I notice is the large bold purpose statement across the top. Several elements give this text an increased contrast that ultimately makes it stand out above the rest of the page. The text is larger then any other text on the page, even the main logo. It is also white on dark, where as the main content chunk is dark on light. Also, it contains the only green text on the page. The green is echoed in other smaller parts of the page to unify things. The prominent placement at the top of the page also gives it more weight and plays nice with the need for greater contrast. All of these things basically give this chunk of text the first order of hierarchy in the page and ultimately the most emphasis.
From there the eye is drawn in several directions. But each section has effectively used contrast to direct attention. For example the main content text is the only part of the page with text set on white. This makes the container of this text pop out the page. This is a really nice way to help avoid content overload. The side bars for example has quite a bit of text which combined with the main copy would cause a visual meltdown. Instead these side bars are far lower contrast. One has dark gray on light gray text, the other light gray on dark gray. Both of these are very low contrast and don't draw the users eyes as easily. The copy in these chunks is also smaller, further contributing to this order of things.
Notice how in the main content region the article headings stand out very nicely. This vastly increase the scanability of the page and makes for a much friendly presentation.
Conclusion
Contrast is a tool we all use, whether we think about it or not. The trick is to remember that your using it, to put some thought into the contrast of the page. Contrast is one of the most powerful tools in the quest for effective hierarchy.
Next we will be looking at the principle of balance, so be sure to tune back in tomorrow!
Sample Usage
