< Back to Design Stream

Case Study: Awesome use of Contrast


Odopod site isn't especially stunning, but its portfolio pages have a simple but effective use of contrast.

Why it works

The pink at the top contrasts with the white below. This brings hierarchy, clearly organising the page into two separate sections.

The photo links the sections together creating unity.

The pink area houses the most important information and makes use of white text to establish unity with the white area below.

Although the white area is secondary, it can make use of bold black text to bring a second level hierarchy to its content.

The result is an eye catching page, which has a hierarchy that is strong enough to communicate a variety of messages.

Not perfect

The square pattern offers a transition from the pink area to the white. However, it seems tacked on and so doesn't work well.

Extending the idea

Although the square pattern feels tacked on, it could be used as a substitute for the pink background:

The impact is lowered, but it allows for a cleaner look while still maintain a clean look.

Return to Design Stream


Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.