Navigate in Style or Fail Miserably

Good navigation is the most important aspect of a well designed website. If the visitor is not presented with a clear navigation, it won't matter how well your site is designed, it is highly likely that they will leave your page in a matter of seconds. It is a very tough challenge to create  a meaningful and unambiguous yet stylish navigation that allows users to view content easily.

Some of the most important rules of a good navigation are;

1- Visibility: Make sure that your navigation is one of the first things that catches the eye. Do not make it obscure. Don't let it get hidden because of clutter or problematic placement.

2- Consistency: Make certain it has a certain style and placement that it keeps on every page. 

3- Clarity: Make sure that every item in the menu is %100 understandable. No one likes to guess where the link will take them. Use either clear names, or little explanations, hover titles are a good way as well. If you are using thumbnail images as links in your menu, make sure they are clarified one way or another.

4- Creativity: Creative navigation will always make your site stand out more, just make sure you don't overdo it, sometimes simplicity is the real creativity.

Good Examples of Stylish Navigation

The Adaptd

It is both stylish and easy to use. Very clear menu with a classic top tier placement.

StephenCaver

Clear well designed navigation. Nice use of typography.

OwlTastic

This is especially for those designing blogs, very slick and clear navigation ina 3 column design. Nice use of sidebars and top level menu design.

CreativeNZ

A very good example of how to fit massive amounts of content into a navigation in a stylish way.

Sarah Hyland

Clear, playful, hand-drawn and animated navigation.

Jordan Gray Creative

Simplicity, minimalist design, left aligned side navigation.

Work at Play

Nice clear navigation.

RedNoseDay

Playful navigation consistent with the style and content of the page, usability is top-notch.

Typographica

Very simple and very attractive, everything is easy to follow and you always get to where you want to go.

Bernat Fortet

Creative way of categorization. Easy to follow, the only problem is it is a bit space consuming.

Nuttersmark

Interesting and creative menu design. Takes a little bit of getting used to but the filter and sorting menu is a must see.

Epic Agency

Impressive use of top tier navigation, clear simple and yet stylish.

Pixel Resort

Good example of Apple inspired navigation, everything is consistent and clear.

Paiko.de

Little explanations when you hover over the menu items is a great way of guiding your visitors through your site.

Things We Make

Another clear navigation

Blue Cadet

Very slick navigation. 2 tier top level navigation, the sub tier works especially nice in works section. It is a bit graphic heavy when you use the works next, previous project navigation, but it looks really cool.

Design Intellection

Unconventional right-side tabbed navigation does actually work very well in this site. Scroll down to see how the navigation changes style beautifully.

Also see these...

Students Association at Unitec

Unstoppable Robot Ninja

Time for Cake

Christina Ung

Sarah Longnecker

And when it fails....

ThereStudio

First of you are presented with bouncing links that kind of sattle later on. And guess what not everything that looks like a link is clickable, not a very satisyfying navigation for a visitor.

Design Sul

Seriously.. where is the navigation. Am I supposed click on those bottles, is that it?

Zinc Bistro

Don't get fooled by the top lunch and dinner items, they are unclickable. There is a small thing under the disturbing video called navigation, well it seems to work if you refresh the page 10 times.

HBO+EMTB

When simplicity fails miserably. Worst use of top tier navigation. It looks like a word document rather than a webpage. And that isn't the worst part, just go on, decrease the size of your browser window and see what happens.

Nomek Solutions

Wow simply amazing, the middle menu runs away when you move your mouse to click. Plus the content font is so small that it is impossible to read. Check out the news section and you will see.

mxyplyzyk

Menu items continiously change into images that don't give any clues to what they are connected. Very irritating navigation.