Yclick.it - A Blog Exploring Persuasive Website Design

Provide Your Visitors with Clarity Using Contrast

We’ve talked quite a lot about 37signals designs in the past (1 & 2). Last week they launched Highrise and as always there is plenty to look at!

It’s interesting to see how they have used contrast to emphasise the most important elements. The most prominent elements at the top of the page are the headline (’Keep in touch…’) and the main calls to action (’Take a tour’, ‘Sign up for free’).

If we look at the design without the distraction of colour, we can see more clearly the actual tones (or shades) and contrasts being used. The headline has the darkest tone relative to its background. It’s also clear from its design that it’s not a link. So if the visitor is looking for the next step, they have to move on.

Next up the calls to action (’Take a tour’, ‘Sign up for free’). Looking at this section in black and white, you can see more clearly why this section is so prominent. Despite being red text on a yellow background, the tones of both colours are quite dark. In fact that yellow background is the largest area of dark tone on this part of the page. It contrasts strongly with its background.

Another interesting point is how they have emphasised ‘Pricing & Sign up’ in the navigation. The links in the navigation are simple blue underlined links. In this case the contrast is provided by ‘Pricing & Sign-up’ being in bold. The placement, at the end of the list, also makes it likely to be noticed.

Provide the visitor with a clear message and a clear path to progress on your site. Contrast can be used as a key design tool to do this. It can be used to emphasise the most important elements - in this case headlines and calls to action. But also used less strongly for other elements like points of resolution, testimonials etc.

What else do you think is worth noting on the Highrise site?