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.
The English Riveria Comedy Film Festival
Students’ Association at Unitec
On similar topics, please see the following posts:
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.
[…] chosen based upon their appearance and there may be some that are not up to par on usability.”read more | digg […]
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
[…] chosen based upon their appearance and there may be some that are not up to par on usability.”read more | digg […]
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
[…] 25 Examples of Creative Navigation […]
[…] Twenty-five examples of creative web navigation from Vandelay Design. […]
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/
[…] di navigazione creative Oggi vi segnalo questa fantastica raccolta di navigation bar proposta da […]
‘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!
[…] 25 Examples of Creative Navigation […]
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
[…] article 25 examples of creative naviagtion on vandelaydesign.com shows 25 very creative uses in […]
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
[…] 25 Examples of Creative Navigation […]
Really appreciated. that “kukral” page really stand out with great 3d look. Nice.
Very interesting
[…] Vandelay Design : 25 Examples of Creative Navigation […]
[…] Creative Navigation Designs: Look at that style? […]
[…] 36. 25 Examples of Creative Navigation […]
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!