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:
55 comments from readers
1 Shanna Aug 4, 2008 at 11:03 pm
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.
2 Adam Aug 5, 2008 at 12:45 am
I would have to say that my favourite is from. ‘The Things We Make` I love the simplicity of it.
3 25 Examples of Creative Navigation | WebLaunches Aug 5, 2008 at 2:32 am
[…] chosen based upon their appearance and there may be some that are not up to par on usability.”read more | digg […]
4 Nathan Beck Aug 5, 2008 at 4:52 am
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
5 Tracey Grady Aug 5, 2008 at 7:40 am
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.
6 Andrew Aug 5, 2008 at 7:49 am
So cool. I love these navs. My fav has to be Ben Hulse Design.
7 Alvin Aug 5, 2008 at 8:04 am
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.
8 Andy Aug 5, 2008 at 8:25 am
‘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.
9 Matt Aug 5, 2008 at 8:39 am
great post. lots I havent seen before. thanks!
10 Suresh Aug 5, 2008 at 9:59 am
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
11 frank Aug 5, 2008 at 9:59 am
Those are GREAT.
Thanks!
12 Chris Aug 5, 2008 at 10:02 am
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
13 25 Examples of Creative Navigation | WhiteSandsDigital.com Aug 5, 2008 at 10:08 am
[…] chosen based upon their appearance and there may be some that are not up to par on usability.”read more | digg […]
14 mike Aug 5, 2008 at 10:09 am
Great Stuff. MB Dragan Rocks!
15 alfred devanesan samuel Aug 5, 2008 at 10:13 am
i like the Ma.tt navigation fentastic work.
16 Shashi Pinto Aug 5, 2008 at 10:21 am
Cool navigation i liked it!
17 Streetwise Aug 5, 2008 at 11:57 am
With a design like Davroc, how are they doing a fade without using flash? Very nice.
18 Dean Peterson Aug 5, 2008 at 1:10 pm
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.
19 Dathan Aug 5, 2008 at 1:14 pm
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.
20 Andrew Aug 5, 2008 at 1:22 pm
That’s funny. I don’t see my site in there. I kid, I kid.
http://www.filter9.com
21 Ad Club @ Wake Tech Aug 5, 2008 at 1:56 pm
[…] 25 Examples of Creative Navigation […]
22 The Great Geek Manual » Link Round-Up: August 5, 2008 Aug 5, 2008 at 2:28 pm
[…] Twenty-five examples of creative web navigation from Vandelay Design. […]
23 Martyn P Aug 5, 2008 at 2:54 pm
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.
24 Marketing Deviant Aug 5, 2008 at 4:05 pm
They have some really cool designs and navigation! Nice sites!
25 Vandelay Design Aug 5, 2008 at 6:18 pm
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.
26 Vandelay Design Aug 5, 2008 at 6:19 pm
Dathan,
Sorry if you found the title misleading. I don’t think it’s an inaccurate title though.
27 Matt Aug 5, 2008 at 9:21 pm
Very nice, this gives me some new ideas to break away from my usual navigation techniques.
28 ben Aug 5, 2008 at 10:41 pm
great links
29 Vandelay Design Aug 5, 2008 at 11:04 pm
Matt,
Good! That’s what I was hoping for.
30 Angie Bowen Aug 5, 2008 at 11:39 pm
There are some really interesting designs on the list. I try to include some creativity in the navigation of the sites I build.
31 Fox Aug 6, 2008 at 12:51 am
Thank you.
They will be handy for my next designs.
32 veerendra Aug 6, 2008 at 1:44 am
thats creative collection ..
check out this one too
http://www.helmy-bern.cz/
33 Barre di navigazione creative « Fedeweb Aug 6, 2008 at 3:44 am
[…] di navigazione creative Oggi vi segnalo questa fantastica raccolta di navigation bar proposta da […]
34 Andy Aug 6, 2008 at 5:05 am
‘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?
35 VandelayDesign Aug 6, 2008 at 6:52 am
Andy,
I agree with that. Thanks for your feedback - it’s appreciated.
36 Caligula Aug 6, 2008 at 7:42 am
“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.
37 Andy Aug 6, 2008 at 9:47 am
‘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.
38 Bret Bouchard Aug 6, 2008 at 10:52 am
Another interesting one is http://ceg.org
39 David Sanchez Aug 6, 2008 at 12:10 pm
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.
40 Caligula Aug 6, 2008 at 1:53 pm
@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”.
41 Andy Aug 6, 2008 at 4:46 pm
@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.
42 Vandelay Design Aug 6, 2008 at 6:55 pm
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.
43 Shanna Aug 6, 2008 at 11:14 pm
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…)
44 Manu Aug 7, 2008 at 12:10 am
Great list
45 Fubiz Aug 7, 2008 at 5:39 pm
Huge selection!
46 Internet Brain » 25 Examples of Creative Navigation Aug 7, 2008 at 10:40 pm
[…] 25 Examples of Creative Navigation […]
47 Kyle Aug 8, 2008 at 3:21 am
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.
48 arvin Aug 8, 2008 at 7:47 am
nice list, thanks a lot
49 Karthik Aug 9, 2008 at 4:30 am
Steven, awesome collection as always - no matter what the title! (just staying away from the debate!)
50 Logo Design Templates Aug 10, 2008 at 1:05 am
Ha ha ha.I love all of them.They are really very cute.Thanks for sharing.
51 A. Georgiev Aug 11, 2008 at 6:51 pm
This is great resource! I like most of the sites. Thanks for sharing this with us.
52 Web Design Michael Janik Aug 12, 2008 at 5:10 pm
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
53 creative use of simple web site navigation | The Life of Buford Aug 15, 2008 at 11:45 am
[…] article 25 examples of creative naviagtion on vandelaydesign.com shows 25 very creative uses in […]
54 cake Aug 19, 2008 at 5:12 pm
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!
55 software blog Aug 19, 2008 at 7:10 pm
Great collection of navigation system. Thanks for sharing this with us