< Back to Design Stream

Case Study: Navigation Collection

Design Navigation is a tricky task. A good navigation system should be easy to identify and access, but also integrate with the site and not call undue attention. Here is a study of good navigation examples.

Emblematiq

NORBAUER

Norbauer has an excellent navigation system. The use of the shadow and redline at the top make it easily identifiable. The use of fonts integrate the bar with the rest of the site. There small size also ensures that the bar is not overpowering.

The active link has a little speech bubble tail that ascends into the content area. This is a neat little touch and integrates the bar with the site.

Glasgow

The Glasgow header/navigation area marks itself as separate form the rest of the site with the use of a large size and bright red colours. The thin white line at the top allows the header to standout from even the browser chrome.

However, the cut out pattern at the bottom integrates it with the the site, as does the shade of the red for the active links.

Ballpark

Ballpark's navigation/header uses a subtle inner shadow, which subtly separates the site from the browser chrome.

The actual navigation buttons follow this inset look.

A second bar contains a description of each page. All though this increases the usability of the site, it creates a stripy look.

Jepco

Jepco marks out the navigation with the use of a black bar, but this is repeated in other areas of the site such as the footer to create consistency.

The active links match the background colours of the pages allowing the navigation to integrate with the pages.

In active tabs are dimmed. This makes the navigation bar less cluttered but also makes the links harder to read.

Nasi Briyani

Nasi Briyani effectively has two headers - one for the logo and question navigation and one for the site navigation. The logo extrudes into the space of the navigation and the active links extrude into the space of the logo area creating unity between the two areas.

The logo also makes use of a simplified cloud image which allows it to connect to the white space of the pages.

Joyent

Why it works?

Separation

- The navigation bar uses a 3D gradient effect, which seperates it from the rest of the site (which mostly consists of flat colour).

The yellow line underneath helps to further seperate the navigation bar and give it a sense of depth, by making it appear slightly raised.

Connection

- Although the navigation bar is seperate, it does incorporate elements to link it to the site. The most obvious is the colour scheme, which although not mirrored elsewhere on the site, is very similar to the lighter colours used on the site. The yellow strip makes use of transparency, which allows a slither of content to show through and in turn creates a connection between the navigation bar and the rest of the site.

Defined space

- The navigation bar contains two etch lines to define its space. This is only a simple touch, but it helps to ensure that the use of right alignment for the links and left alignment for the logo does not appear accidental. Without these etched lines, the alignment of the navigation would lack an anchor and so seem random.

Small Contrast - Because the navigation is so different from the rest of the site, the content can be compact and still standout. There is no need to use large lettering (not even for the logo), as the use of the 3D gradient and other separation techniques will ensure that the navigation bar is one of the first things that audience see.

The use of the yellow for thin strip is not accidental - it is the same yellow used in the logo and so helps to reinforce the logo in a subtle but noticeable way.

CSS Vault

CSS Vault has a number of good techniques for its navigation bar. I don't think the design works as a whole, but the techniques are worth reviewing.

Separation - A dark grey bar is used to seperate the header from the rest of the website. A dark blue area is used for further separation purposes.

Connection - A blue/white gradient is used as a transition between the link area and the header. Only the active link uses the dark blue. This not only adds emphasises but also creates a further connection. An inverse triangle is also used for the active link. This makes use of negative space to connect the main area to the navigation.

Microformats Microformats navigation uses a subtle 3D gradient to seperate the navigation bar from the rest of the site. The bar uses a similar colour scheme to the site to form a connection.

Get Menus ca

Get Menus.ca makes use of depth to creating a beautiful navigation menu. The faded graphic on the right side is an effective use of the space.

BartelmeDesign

On Bartelme Design, the navigation is placed in the surronding frame of the website. This keeps it in a prominet place, but also allows the logo to take centre stage.

Freelance Switch Freelance switch uses an example of speaking navigation (where captions are used to describe the links). The navigation and links uses striped bars, but the mascot helps to link the bars back to the main site. The logo bar uses a dark green to tie into to the top (dark grey) area of the site. The links use a bright green to standout.

Ten By Twenty

When placing the logo and links on seperate bars, it can create the problem of creating too much empty space. Ten by Twenty make uses of radial gradient to overcome this problem.

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.