10 Awesome Websites With The Best Navigation Structure

The main thing that separates a good site from a great site is how easy it is to navigate.  If the links aren’t consistent throughout the site and the viewer gets more and more lost the deeper they go in to your site, eventually they will become so frustrated they will leave.  Or if the content is laid out in a manner that a dozen clicks are required just to get to the information they’re looking for, they’ll leave.  Let’s take a look at a few web sites that I think are in a league of their own in regards to navigation.

Racket

I like this site because it takes a very clever approach to sub-navigation. It’s not that uncommon any more to see a drop-down menu, but if they’re not developed very well then as your hovering your way through you may hover over a dead spot and suddenly lose your menu. What the creative minds at racket did was deliver the drop-down menu without requiring you to drop it down.

The Collective Film

The website for The Collective was around long before drop-down menu’s became fashionable. But the thing about their drop-down is not that it adds quicker navigation through sub-categories, but it utilizes a drop-down to add more visual aesthetic to the site. In its native state the menu seems like nothing more than a thin, text, navigation bar at the top of the page. However, as soon as you hover over it the menu drops down and reveals nine new pictures adding more amazing photography to an already visually pleasing website.

Jeugdraad

This is a fun site with lots of character to it, and the navigation is no exception. The hover effect adds a fun and unique touch that helps the site stick out that much more. No simple change of text color, no underline, or any basic CSS trick to simply let the viewer know that what they’re hovering over does something. They make navigating the site fun and since they’re all different it’s like an element of surprise, causing you to wonder what’s going to happen on the next link you hover over.

Citroen

Citroen took an interesting approach with the microsite for their DS5, a menu on demand. They know that people want things, but why let a menu interfere with a sleek page design? The native state of the site has one simple link, and that’s a button that will pop your menu out and allow you to explore all the features of the site. That is, when you’re done admiring all the features of the cars exterior.

Hermetik

Hermetik is a company that definitely thinks big; big text, big projects, big links. Indeed, there is nothing small about the navigation on their site. Using larger images and healthy sized text, this is an in-your-face approach to navigation. Though it requires a fair amount of scrolling, the images are large enough to give you a good idea of what you’re about to see and if it’s worth clicking on, opposed to tiny images that you think could be interesting.

Modernus

Modernus is a clean, simple site relying on the quality of its graphics to make the site so appealing. It’s evident that some time was put in to the layout of the navigation. Not only is it clean, simple, and fitting for the site, but notice how at first glance you think there are only three links, doors, office, and projects. Not only do you realize that each of those three links produces a drop-down, but then you realize the less prominent links to the right. It’s clear what they want you to click on, but they don’t completely axe the other important aspects of a site just because they didn’t fit with the navigation.

Por Las Dudas

The navigation on Por Las Dudas is as fun to use as the name is as fun to say. For starters, they break out of the norm by rounding out their navigation, a fun alternative to your standard perfectly vertical or flawlessly horizontal navigation bar. Aside from shapes, you also get fun bubbles expanding and things shaking when you hover over each link!

Oink

I came across this navigation bar and it just made me laugh, so I had to add it. There are certainly applications where I wouldn’t recommend using silly icons and a font such as this, but in this aspect it’s acceptable. It adds a lot of character to the page and quickly cheers up the viewer when they see it.

Betsy Smith

Betsy Smith took another interesting approach to navigation, and a homepage for that matter, by devoting her entire homepage to the navigation of her site. Of course, once you click on a link and are taken to a different page the navigation resorts to a standard bar at the top of the page. A unique approach, nonetheless.

Jolly Duck

The Jolly Duck takes incorporating a sites navigation in to the design to a whole new level. The navigation blends in to the design of the site seamlessly, but there’s no question as to where the navigation is. The shape of each flag changes slightly when you hover on it, to let you know they are in fact live links. This is truly a clever concept that gives the site tons of personality.

I always encourage fellow designers and developers to push the limits and think outside the box. It’s always refreshing to see a site that has stepped just outside of the norm to give their viewers a more unique experience when they’re on their site. Coming up with a clever navigation is just one of the ways to do that. Granted there are certainly times when things like goofy icons and chicken-scratch fonts should not be used, but that doesn’t mean that you can’t use a clever flowchart-style navigation to skirt a predictable drop-down menu scenario.

About the author: with over ten years in the freelance web design and writing fields, Scott Stanton has had his finger on the beating pulse of the industry’s hottest design trends and bends for the past decade. Scott regularly writes for Wix.com the free website builder.