In 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
On similar topics, please see the following posts:
August 4th, 2008
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.
August 5th, 2008
I would have to say that my favourite is from. ‘The Things We Make` I love the simplicity of it.
August 5th, 2008
[...] chosen based upon their appearance and there may be some that are not up to par on usability.”read more | digg [...]
August 5th, 2008
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
August 5th, 2008
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.
August 5th, 2008
So cool. I love these navs. My fav has to be Ben Hulse Design.
August 5th, 2008
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.
August 5th, 2008
‘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.
August 5th, 2008
great post. lots I havent seen before. thanks!
August 5th, 2008
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
August 5th, 2008
Those are GREAT.
Thanks!
August 5th, 2008
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
August 5th, 2008
[...] chosen based upon their appearance and there may be some that are not up to par on usability.”read more | digg [...]
August 5th, 2008
Great Stuff. MB Dragan Rocks!
August 5th, 2008
i like the Ma.tt navigation fentastic work.
August 5th, 2008
Cool navigation i liked it!
August 5th, 2008
With a design like Davroc, how are they doing a fade without using flash? Very nice.
August 5th, 2008
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.
August 5th, 2008
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.
August 5th, 2008
That’s funny. I don’t see my site in there. I kid, I kid.
http://www.filter9.com
August 5th, 2008
[...] 25 Examples of Creative Navigation [...]
August 5th, 2008
[...] Twenty-five examples of creative web navigation from Vandelay Design. [...]
August 5th, 2008
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.
August 5th, 2008
They have some really cool designs and navigation! Nice sites!
August 5th, 2008
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.
August 5th, 2008
Dathan,
Sorry if you found the title misleading. I don’t think it’s an inaccurate title though.
August 5th, 2008
Very nice, this gives me some new ideas to break away from my usual navigation techniques.
August 5th, 2008
great links
August 5th, 2008
Matt,
Good! That’s what I was hoping for.
August 5th, 2008
There are some really interesting designs on the list. I try to include some creativity in the navigation of the sites I build.
August 6th, 2008
Thank you.
They will be handy for my next designs.
August 6th, 2008
thats creative collection ..
check out this one too
http://www.helmy-bern.cz/
August 6th, 2008
[...] di navigazione creative Oggi vi segnalo questa fantastica raccolta di navigation bar proposta da [...]
August 6th, 2008
‘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?
August 6th, 2008
Andy,
I agree with that. Thanks for your feedback - it’s appreciated.
August 6th, 2008
“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.
August 6th, 2008
‘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.
August 6th, 2008
Another interesting one is http://ceg.org
August 6th, 2008
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.
August 6th, 2008
@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”.
August 6th, 2008
@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.
August 6th, 2008
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.
August 6th, 2008
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…)
August 7th, 2008
Great list
August 7th, 2008
Huge selection!
August 7th, 2008
[...] 25 Examples of Creative Navigation [...]
August 8th, 2008
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.
August 8th, 2008
nice list, thanks a lot
August 9th, 2008
Steven, awesome collection as always - no matter what the title! (just staying away from the debate!)
August 10th, 2008
Ha ha ha.I love all of them.They are really very cute.Thanks for sharing.
August 11th, 2008
This is great resource! I like most of the sites. Thanks for sharing this with us.
August 12th, 2008
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
August 15th, 2008
[...] article 25 examples of creative naviagtion on vandelaydesign.com shows 25 very creative uses in [...]
August 19th, 2008
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!
August 19th, 2008
Great collection of navigation system. Thanks for sharing this with us
August 29th, 2008
[...] 25 Examples of Creative Navigation [...]
August 31st, 2008
Really appreciated. that “kukral” page really stand out with great 3d look. Nice.
September 12th, 2008
Very interesting
September 14th, 2008
[...] Vandelay Design : 25 Examples of Creative Navigation [...]
October 19th, 2008
[...] Creative Navigation Designs: Look at that style? [...]
October 20th, 2008
[...] 36. 25 Examples of Creative Navigation [...]
October 27th, 2008
These really are creative! It amazes me how designers can adapt and create innovative new features for website as the web technology changes. Inspiring.
October 30th, 2008
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!
December 3rd, 2008
I love the Babasonicos design. It remembers me of Saturday Night Fewer. Excellent collection! Thanks
December 11th, 2008
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.
December 24th, 2008
[...] 25 Examples of Creative Navigation submit_url = ‘http://vandelaydesign.com/blog/galleries/inspirationalnavigation-menus/’; [...]
January 26th, 2009
[...] http://vandelaydesign.com/blog/galleries/creative-navigation/ Filed Under: Web DevelopmentTagged: interactivity, links, site navigation, sub-navigation, top-navigation Enter Google AdSense Code Here [...]
February 9th, 2009
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.
February 24th, 2009
[...] An effective way to have user-friendly navigation is to add images to your links. “Search” links in the navigation bar usually as a picture of a magnifying glass while a house icon is used on “Home” links. The navigation also is the element where you could practice your creativity and wild imagination. Here is a great link of Creative Navigation Links. [...]
March 12th, 2009
Wow this is really great to take inspiration. You guys doing good job in bringing creativity in one place.
April 4th, 2009
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.
May 6th, 2009
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.
May 12th, 2009
[...] naviation menus’. It’s worth a look! There’s also a list of sites that display creative navigation. The examples are really cool, but I think it might be a bit much for my simple tech-brain to [...]
May 25th, 2009
[...] and getting featured in some creative posts such as the Webdesigner Wall’s trends of 2008 and Steven Snells Vandelay Design creative navigation posts respectively. Nowadays if I do take on any freelance work it is via word of mouth and it is mostly [...]
June 15th, 2009
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.