25 Examples of Creative Navigation
Published in GalleriesIn addition to being one of the most significant influences on the usability of a site, navigation menus also allow designers an opportunity to get creative and add some interesting and attractive visual elements to a site. Of course, in some cases the creativity can hinder the usability of the site, but in many cases appearance and functionality can work together.
I have compiled a collection of 25 sites that use navigation more creatively than just the standard menu. These sites have been chosen based upon their appearance and there may be some that are not up to par on usability. The idea is to get your creativity flowing, but remember the importance of usability and accessibility when creating your own navigation.
For more inspirational design galleries, see:
The English Riveria Comedy Film Festival
Students’ Association at Unitec
For more design inspiration and resources please see:
104 Responses
Thanks for the mention Steven. This is one thing that I love about creative websites.. the little things like cool navs that make you want to pause for a minute and play a little bit.
I would have to say that my favourite is from. ‘The Things We Make` I love the simplicity of it.
Fantastic. There’s a great selection there and some top inspiration. I feel my menus are always to atypical, but some of the ideas above will provide me with some fresh direction.
Thanks a lot!
Nathan Beck
http://www.redswish.co.uk
Great collection. I’ve only seen a couple of these sites before. A few are very bandwidth-heavy, but they’re all ambitious and adventurous in their design, and I really like that.
So cool. I love these navs. My fav has to be Ben Hulse Design.
I like the “Time for Cake”, but it’s difficult for the designer to think of such creative navigation, since user usability is another important topic for a website now. Best design always need to take a balance on these issues.
‘there may be some that are not up to par on usability’. If they’re not up to par, and both accessibility and usability are important (as you say in the very next sentence), why put them in your list?
I also like the Ben Hulse design, but you have to question why the navigation links are built with images instead of using text. View the site with images disabled, the site is totally unusable. It’s the same for many of the sites in this list.
great post. lots I havent seen before. thanks!
Excellent post.
All the examples in this collections are really cool and inspirational.
Thanks for devoting time to collect and share with all.
Bookmarked and forwarded to friends.
- Suresh
http://www.realgroup.co.in
Those are GREAT.
Thanks!
I really like the MB Dragan navigation – the spaceship trail helps to highlight the navigation. very clever.
I like to think our navigation is pretty nice
Great Stuff. MB Dragan Rocks!
i like the Ma.tt navigation fentastic work.
Cool navigation i liked it!
With a design like Davroc, how are they doing a fade without using flash? Very nice.
Regarding Davroc Fade. The effect is used using Jquery. for each panel there is a saturated picture and a un saturated picture. Javascript fades between the two.
I found this through using FF Page Info, and the web developer plugin.
Cool stuff.
Misleading title – this is just graphic design, I was hoping to find
creative ways of navigating – Like data visualization (http://www.visualcomplexity.com/vc/)
but for for the web.
That’s funny. I don’t see my site in there. I kid, I kid.
http://www.filter9.com
I think it’d be really cool if the Ben Hulse design one unravelled in the picture when you moused over. Totally impractical, of course.
They have some really cool designs and navigation! Nice sites!
Andy,
To answer your question about why they were included, usability is something that you can typically fix and still get a very similar effect. For example you mention that Ben Hulse uses images instead of text – I’m not disagreeing that it would be better to use text, but if someone is just looking for some ideas of creative navigation why do they have to be limited to only ones with perfect usability? If I wanted to create a similar effect I could easily do so by using text instead of the image, but if you totally ignore anything that’s not 100% usable you may never learn some nice effects that could be tweaked or improved.
Dathan,
Sorry if you found the title misleading. I don’t think it’s an inaccurate title though.
Very nice, this gives me some new ideas to break away from my usual navigation techniques.
great links
Matt,
Good! That’s what I was hoping for.
There are some really interesting designs on the list. I try to include some creativity in the navigation of the sites I build.
Thank you.
They will be handy for my next designs.
thats creative collection ..
check out this one too
http://www.helmy-bern.cz/
‘but if you totally ignore anything that’s not 100% usable you may never learn some nice effects that could be tweaked or improved.’
I take that point completely. The trouble is there are those designers who look objectively at examples of design and can understand how they can be ‘tweaked’ or improved, and then there are those who mimic what they see, then view source for the HTML/CSS to get it working. You only have to look a the amount of designs that follow the trend for hand-written, ripped/crumpled paper navigation started by webdesignerwall.com – most of which fail on usabililty with images disabled – to see that.
From that point of view it would have been useful to have included at least a few examples of stunning designs that are also usable and accessible (for the lemmings
. Perhaps a future Vandelay Design post?
Andy,
I agree with that. Thanks for your feedback – it’s appreciated.
“Sorry if you found the title misleading. I don’t think it’s an inaccurate title though.”
I also found the title misleading: these aren’t examples of “creative navigation”, they’re (ostensibly) examples of “creative design”.
There’s nothing creative about the *navigation*–they’re just plain old menus with pictures or effects.
‘they’re just plain old menus with pictures or effects.’
I’d say they’re far from plain, and they’re certainly excellent examples of creativity in terms of layout and design. It’s worth mentioning that the majority of the sites featured are small, and with only a handful of pages, building your navigation is a much easier task.
It’s where you have a site with hundreds or thousands of pages that goes several levels deep that you need to be creative. I don’t think many of the styles featured here would be practical for a larger site, but whether you found the post title misleading or not, that wasn’t the focus of this article – it was to showcase creative layout and design, *not* creative ways of navigating a site.
Another interesting one is http://ceg.org
Obviously the proper ones are those who conform to clear user experience. I mean… some of them are confusing and now thought or consideration about the user. Is like designer doing Information Architecture with no experience at all.
When it comes to clients money, the main goal is to elaborate on the best user experience, rather than confusion.
Cute examples, but at least the winners are those aiming for high UX standards.
@Andrew: “I’d say they’re far from plain,”
They’re traditional, simplistic navigation with pretty pictures and effects. It’s not creative navigation, it’s creative artwork and/or effects. ‘Nuff said.
“*not* creative ways of navigating a site.”
That’s why I said *I* found the title misleading; it says “creative navigation”, not “pretty pictures for regular navigation”.
@Caligula – I’m agreeing with you, sorry if I didn’t make that clear. A better post title would have been ’25 creative effects for web navigation’ or something like that.
Caligula,
Sorry if the title was misleading, that wasn’t the intent. Obviously the focus was on the creativity of the design in the navigational menus.
Andy,
Good point. It’s definitely more practical for smaller sites.
David,
Agreed. User experience is more important than design. I tried to state that in the intro while still showcases the creativity of the examples.
I am not in any way knocking usability.. I would probably be fired from my day job if I did that. However, I think that the design is *just as* important. Especially for a design portfolio site… your own website is just an extension of your portfolio. For any type of site, your target market really helps dictate what the user should experience. It’s nice every once in a while to step outside the box and just get creative and have fun. (for me anyway…)
Great list
Huge selection!
These are some very creative examples. I prefer navigation’s that are easy to read and use.
MB Dragon is great because the navigation is big and easy to read.
Time for Cake seems too cluttered for my preference.
The Ben Hulse design navigation is very creative.
I like having a hover for some reason it just makes sense.
nice list, thanks a lot
Steven, awesome collection as always – no matter what the title! (just staying away from the debate!)
Ha ha ha.I love all of them.They are really very cute.Thanks for sharing.
This is great resource! I like most of the sites. Thanks for sharing this with us.
I love the one with the drinks. Beautiful idea. Really unique.
I guess we will see more nice navigations coming up because flash is now spiderable
Hi there,
I’m sure our site’s nav is too cluttered for some. We do our fair share of minimal/super clean and spaced out designs, though.
Additionally … we most definitely do care tremendously about standards, and our nav is still usable without flash, js, etc. etc. Not sure if anyone noticed.
Thanks very much!
Great collection of navigation system. Thanks for sharing this with us
Really appreciated. that “kukral” page really stand out with great 3d look. Nice.
Very interesting
These really are creative! It amazes me how designers can adapt and create innovative new features for website as the web technology changes. Inspiring.
I like the kukral website, the whole site looks as fresh as the drinks! It’s fun to navigate through playful websites, websites should provide some entertainment!
I love the Babasonicos design. It remembers me of Saturday Night Fewer. Excellent collection! Thanks
I like the “to top” navigation from my site and think that web browsers should have this build in with the scroll bar…nice collection.
Those were some creative navigation bars. I agree that the site can be creative without sacrificing usability. I would just make sure to keep the design consistent.
Wow this is really great to take inspiration. You guys doing good job in bringing creativity in one place.
Great post and it is important to mention both usability and accessibility, creativity does not need to be restrictive as long as the interface is intuitive and consistent.
Agree with the Krukal comments, visualising the links with iconic drink types is a fantastic slant and focus on great design without sacrificing usability.
Great post and it is important to mention both usability and accessibility, creativity does not need to be restrictive as long as the interface is intuitive and consistent.
Agree with the Krukal comments, visualising the links with iconic drink types is a fantastic slant and focus on great design without sacrificing usability.
Although a native English speaker, I thoroughly enjoyed the layout of the Kukral page. The site has eye-catching, vibrant colors, and the drinks seem to jump out of the screen at you. I couldn’t understand a word of text, but I still browsed around a bit.
Great stuff there, I wish I could be so creative, it must be able to come up and produce stuff like the above. I absolutely love the first one it has to be my favorite, even though the rest are just as fantastic.
Great collection! Very interesting and nice!
they’re just plain old menus with pictures or effects.’
I’d say they’re far from plain, and they’re certainly excellent examples of creativity in terms of layout and design. It’s worth mentioning that the majority of the sites featured are small, and with only a handful of pages, building your navigation is a much easier task.
You guys can take a small topic and make it sound like rocket science! i love it! thats why you guys are pro!
These aren’t really very creative at all, there all just rows of boxes like any other website but with fancier images, nothing new and exciting.
They have some really cool designs and navigation! Nice sites!
Wow, some of these are really great. If anyone is interested please check out my companies website at http://www.calindaniel.com, we have a really cool navigation system I haven’t seen anywhere else.
C
Some really good stuff there. Most are fairly complicated but for creative work they’re spot on.
some great examples here of navigation.
wow very cool. Loved “time for cake”!
This is great resource! I like most of the sites. Thanks for sharing this with us.
Medyum Niyazi
that is a really nice collection, i just started a website and some of these will give me some great inspiration
Cool Stuff. Sometimes it’s difficult to find a new idea. If you want checkout http://www.druckundrepro.de. I made this Website – some years ago – but I still like it. It’s using Flash. Today I Think I would use jQuery… Greetings, Bernard
Excellent – really inspiring stuff. A Nice collection that have spurred me on to rethink the next project. Glad I stumbled on this article.
I love John Gomez’s menu navigation.
I will try to incoroporate this for my website.
Really nice collection of creative navigation… Some might have usability issues but some really great designs, thanks!
Superb collection and source of inspiration. Thank you!
Great collection, loving the Ben Hulse Design – excellent!
These are some very creative examples. I prefer navigation’s that are easy to read and use.
MB Dragon is great because the navigation is big and easy to read.
Time for Cake seems too cluttered for my preference.
The Ben Hulse design navigation is very creative.
I like having a hover for some reason it just makes sense……
Medyum
What a collection. Great resource. I like Hugs and MB Dragan.
What a superb collection! I am a publisher myself. But there is no way on earth I will ever be able to create something like this. On my site, I have just plain horizontal navigation bar. That’s it. But I must say that I am really delighted to see your collection. And my favourite is Kukral
Yes Steven, you have given nice examples of the navigation. In the web design the most important thing is the navigation. By creating a good navigation, users can easily use the website and it is beneficial when your website has breadcrumb category. It is a good collection of the creative navigation.
I think responsive top navigation is the best way to go and also keeping it as simple as possible. I have some great nav bars with and without a drop-down menu, and semi-transparent nav bars that will match any webpage background colour or design.
Check out these Responsive Top Navigation Bars.
http://templatz.co/navigation.php
I don’t like “cloth moth”, just looks messy. “sitesguard” menu looks like it’s hard to read with those letters.
The other ones look interesting though : D
A great show of creativity in web design, I really liked the Kukral and Davroc navigation designs
I looove the Kukral navigation example (5th from the top)
It’s a stunning visual that makes it clear where you’re going. Very creative navigation.
Thanks Steven