10 Awesome Websites With The Best Navigation Structure

Home » Design Inspiration » 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

Racket
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 Collective Film
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

jeugdraad
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
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
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
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

Por Las Dudas
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

Oink
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
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

Jolly Duck
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.

Author
Iggy
Iggy is an entrepreneur, blogger, and designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design fonts, themes, plugins, inspiration, and more. You can follow him on Twitter

15 thoughts on “10 Awesome Websites With The Best Navigation Structure”

  1. “Hermetik” and “Modernus” are my preferite like design and impostation. Even “The Collective” don’t like so much because remember me the first site in the 90’s.

    Reply
  2. Nice little selection here, I generally find creating navigations to be tedious but I may try to be a little more creative on my next project…

    Reply
    • A lot of time and effort is required in building the navigation for a site. You want it to get viewer’s to the information they’re looking for quickly and efficiently, but you also want it to be a fun experience that keeps them on your site and clicking around after they’ve found what they came for. Developing the navigation is a crucial part of the creative process.

      Reply
    • The Betsy Smith site definitely took a unique approach to the home page and navigation, they were definitely thinking outside the box on that one. I really like the Modernus site as well, it’s clean, simple, and stylish.

      Reply

Leave a Comment