< Back to Design Stream

Case Study: Emphasis through space

BKWolrd

BKWLD is a gorgeously clean website.

Why it works

Much of BKWLD's beauty comes from its unique use of space to create emphasise.

It also excels by reducing clutter and making use of sharp, strong layout.

Key Features

Navigation bar

The top navigation bar demonstrates the use of space for emphasise. 65px of horizontal space separate the navigation bar from the rest of the page. The navigation items are small in size, which creates further space. This allows the links to standout, as they are the only elements that break up the vast amount of white space.

Capital letters and bold type are used to add weight, but as the font size is small the weight is added in a subtle manner, which adds elegance and class.

A large vertical column of space is used to separate the logo from the rest of the navigation links, which is another example of emphasise through space. The logo itself is off-centered in a grey colour block, which allows it to have weight and presence without the use of a large font size.

Photos

On a clean, white site, photos immediately standout, as they are the only aspect that carry colour. BKWLD takes this a step further, by silhouetting photos and removing their clutter. This surrounds the objects in the photo with more white space, and so adds even more emphasise, as the core colours of the object can standout instead with being diluted by the unnecessary colours from the background of the photo.

When photos are not silhouetted, (as, for example, on the news page), they tend to be placed at the top of a large vertical column of space. This pushes them forward on the page.

Layout with tensions

On many pages the layouts have strong tension with small side bars being placed next to extremely large content areas (see for example the "Drop Dead Gorgeous" pages).

Other pages may not have as strong tension, but they all have a strong rigid layout which keeps elements accessible, clutter-free and clean.

Colour schemes

Black is used for headlines, which creates weight without requiring a large font size.

Grey is used for body copy allowing it to recede and keep the site clean. Darker shades of grey are used to draw attention to key elements.

Blue is used as an accent. It jumps out, as it is the only colour used on the site (other than photos). At the same time, it acts as compliment to the grey, creating harmony.

Return to Design Stream

Comments

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.