Navigation has to be by far the most important piece of any design, as it will be the most used element on any website. There has been a huge push in the last few years to increase usability and SEO standards in web navigation, thus making them CSS and JavaScript based. Personally I love it, I think that creating menus outside of flash and DHTML has increased these 2 areas substantially. The only problem I have begun to see is that navigation menus aren’t really pushing the limits, they all look the same and seem to just be the same CSS based menu with different color schemes.  I want to touch briefly on a few key notes on how to improve both usability and design of navigation:

Ways to improve usability:

1. Make parent link names short and sweet
2. Use page names that are easy for everyone to understand
3. Use on:focus and on:hover styling via CSS
4. Place your navigation in a easy to access/read area (usually towards the top)
5. Use drop downs for goodness sakes, there is no need to have 15-30 pages listed in your nav bar

Ways to improve appearance:

1. Ditch the tabs
2. Be creative, use elements already in our design
3. Use corporate fonts (not just arial, or verdana)
4. Style your drop downs with more than just background colors (use images)
5. Don’t be afraid to use JavaScript (there is only so much that CSS can do alone, let them work together)

Now as I stated above, usability has really been pushed lately so I want to dive more into the design and appearance of navigation, so I’ve decided to list a few examples of sites that fall into the category of “bland CSS menus”.   As well as provide a few designs that really push the boundaries that I have had a privilege to work on. It’s time to bring design back into navigation!

Boring Examples:

Pixellogo.com

Digital-web.com

Tonyyoo.com

Arstechnica.com

CSSvault.com

Now this isn’t to say that these aren’t great sites, but the navigation just lacks flare and attention. Below are a few sites that I have been able to work on and help improve the navigation’s use and appearance.

Creative Examples:

Vino LeFebvre

Elegant Occasions

Brooks 1st Construction

Homier Distributing

Knipscheer Collision Center (new layout)

Navigation is the most important piece of your design, so don’t be afraid to dress it up a little and develop it to be an element of your design that could stand on it’s own. That really is the ky when designing anything, you need to ask yourself, “Could this piece of my design stand on it’s own without any other elements?”