Could you imagine landing on a website with no navigation? It would be like trying to find your way in the ocean with no compass. It would be terrible.

Lucky for you, most sites have at least some kind of navigation, so you’re not completely lost. Recently, the Betterment blog featured a UX Flows post on navigation, where we discussed the importance and function of navigation in a web site. Navigation is critical — and it’s safe to say that some sites do it better than others. For this post, we’ve decided to take a look at some navigation that’s breaking the mold.

Take a look, and say “ahoy” with your thoughts in the comments!

Ahoy, Matey! Let’s Set Sail to 23 Web Destinations.

1

Disqus

Disqus offers simple and effective navigation. The streamlined header is highlighted in white, which stands out against the blue background, and a footer navigation also appears with more options after scrolling down.

2

Big Spaceship

With a different approach, Big Spaceship offers left sidebar navigation that expands from a menu icon that is similar to what you see on mobile sites. The nav is easy to find in the upper left hand corner of the main landing section, which displays a paint splash animation against a black background.

3

Dataveyes

Upon loading, the Dataveyes navigation is conspicuously displayed in the center of the header, but then shrinks to a mobile navigation icon, allowing you to easily access the information without intruding on the content.

4

Glossy Rey

With contrasting white text against a black background, the split navigation header is easy to locate and offers a really cool hover animation for each menu option.

5

Words Pictures Ideas

This single page, anti-navigation website is captivating and organized — users can still find their way around the site with ease.

6

Equus Design

Simple, clean, and minimalist, the navigation design for Eqqus Design pops against the page’s dark background.

7

Miss Julia Piep

When you land on Miss Julia Piep’s page, the company logo is centered with a row of five menu options below it, and when you select an option, the responsive navigation moves to the top of the page. Neat.

8

Teehan+Lax

Teehan + Lax’s mobile navigation icon flies out to offer six menu options that you can later close.

9

Danielle LaPorte

Danielle LaPorte’s nav is fancy, as the navigation responsively appears in both the header and the footer as you scroll. Best of both worlds!

10

Olympic Story

A mobile nav icon flies out to be a substantially sized sidebar menu that also can be closed. Boom — mobile can be anywhere and now it is.

11

Curad Mir

Users’ attention is drawn to the upper left hand navigation icon, and without even clicking — just hovering over the icon — a menu sprawls out along the top bar while a white frame outlines the page.

12

Weyland Industries

Neatly tucked under the company’s logo with an arrow that implores you to click, the mega- navigation flies out to offer three main categories of navigation with multiple options below it. For sites that have a ton of content, neatly organized mega-menus with flyouts are where it’s at (jussayin’).

13

Lexus

This navigation is different from most top bar menus. Lexus layers it up with a full navigation bar that flips out directly below the “MENU.” Layers of navigation = layers of fun. (Plus the option to use your keyboard!)

14

P’unk Avenue

P’unk Avenue’s navigation keeps it easy breezy for users with a horizontal grid-esque design at the top of the page that’s also numbered, titled, and provides a short, one-sentence description of what you’ll find.

15

SRG

It’s the circle of navigation! The pageless design is navigable by way of a responsive hero area circle navigation. I clicked to learn more — would you?

16

I Think I Might

Easy to use icon navigation in the upper right hand corner of the page makes navigating this site caveman-picture simple.

17

Zaarly’s Employee Handbook

Zaarly’s nav starts out as a boring mobile icon — then BOOM! Fun, full-screen navigation with color bar menu that cascades down and across the screen. I love it when designers realize the nav doesn’t have to be boring.

18

Editer

Speaking of top bar navigation menus, Editer provides us with just that, but the flyout feature enhances the experience and organizes the content, which is essential for mega-sites.

19

Firestorm

The Guardian’s completely interactive site is exploding with drool-worthy design aspects. The vertical navigation menu is easy to see but doesn’t take away from what’s going on visually — and it’s educational! Bonus!

20

Petersham Nurseries

Petersham Nurseries gives you two navigation menus: vertical navigation menu on the left, providing new users with information on the company, and a horizontal navigation menu on the top right for account holders.

21

NKI Studio

This site’s navigation commands attention from a different perspective in the bottom left of the page.

22

Cloud Nine

Cloud Nine has left side icon navigation in a blue colorblock bar, which nicely complements the responsive, pageless design.

23

Pervasive Light

Pervasive Light’s light bulb nav is exciting with an electric wiggle mouse over feature. The nav also smartly flies up and out of the way when users reach their destination.

THE END

At the end of the day (and the end of this post), you’ve probably come to realize that this sampling of fresh navigation is only a small drop in the bucket compared to all that’s out there. Hopefully, you have some inspiration to experiment with your site’s navigation and try something new. You’ll have to let me know if you do!

Meet the Author
Comments
  • http://www.iedesign.co.uk/blog Josh

    These design really inspire me NKI Studio. I have used sites like this in the past and the navigation has either been to slow or a bit confusing. Site like NKI Studio are a real eye opener.

    • http://www.copywritinganimal.com Stephanie Irvine

      We really liked that one, too. I’m glad you found this roundup beneficial!

  • http://responsivecss.net/ Adam

    Thanks for sharing this. Very fresh and innovative examples. You would also love to visit “http://responsivecss.net/” for more reference on responsive design websites.

    • http://www.copywritinganimal.com Stephanie Irvine

      Thanks, Adam!

  • Alen

    This is the first time I’ve ever read one of those “top 10 design inspiration blah, blah, blah” that wasn’t recycled dogshit. This is a great post. Tons of intelligent design in here and great inspiration.

    • http://www.copywritinganimal.com Stephanie Irvine

      Your comment cracked me up. Thanks for your honesty, and I’m glad you enjoyed the post!