
There are a number of showcases demonstrating creative navigation throughout the design community. Despite this, the majority of them just showcase nicely designed horizontal and and vertical menus. Of course, they were probably creative at some stage. However, some web designers test the laws of usability and like to experiment with design. Today, I have showcased over twenty stunning forms of navigation in website design. I hope these websites inspire you to forget all forms of current navigation and to design new, better and improved ways of navigating websites.
65 Media are group of passionate individuals that produce fantastics experiences. They have creativity running through their vains, just take a look at their fantastic homepage:
There are a few websites out there that use a horizontal layout, Carefully Considered is one of them. However, I like how they have made browsing effortless, just click to the right to view the next project and double click to read about the project.
A great website that allows you to browse both horizontally and vertically smoothly by dragging and dropping.
Gritti Rollo has demonstrated how simplicity can be perfect navigation. Along side some beautiful hover effects and revealing areas with jQuery, Griiti Rollo has produced a fantastic and inspiring website.
Daniel is someone who clearly has lot of creativity. He has mastered the parallax effect supplied by the jQuery library and created a 3D environment in which to browse the content. I feel with a background image containing a little perspective would work wonders with this design.
Organic Grid have taken a similar approach to 65 Media (vica versa), a simple vertical menu with a gradient of backgrounds. With some beautiful sounds complimenting the mouse over and beautiful transitions throughout the website, it is a joy to browse.
Khai Liew has gone for the horizontal but vertical approach. Although it can be hard to read the menu item names without tilting your head slightly, the design alongside beautiful transitions is incredibly unique.
When looking at Young for the first time, you predict that it scrolls horizontal, however with no horizontal scrollbar appearing, you begin to question yourself. However, once hovering over work you notice the black bar thicken; indicating that it is a scroll bar, very stylish.
There are very few websites that try something totally different. Hello Goodlooking is one of the few. Navigation is based around a mind map design. Menu items are clicked to reveal new items and content. A stunning example of creativity using Flash.
Wallswaps is a great idea procured by Erskine Design. It is a virtual cork board where companies and designers can add their work, business cards and a lot more. A beautiful idea with some exceptional navigation.
Now this site is a must see! I am yet to see any other site demonstrating such enormous creativity.
Another click and drag site, but unlike its counterparts it is incredibly smooth. It is a joy to navigate and I am sure you will spend just as long as I did browsing the site.
Daffy’s take a look at traditional navigation techniques and just pushes them aside. Mouse over each menu item to reveal a a description and entirely different background image.
Frost Design have developed and smooth coverflow type navigation to display their work. Incredibly smooth and incredibly effective.
Another click and drag website, however this site use the google maps navigation methods to browse the website. Unsure how they implemented this so hats off!
Josh takes a different approach to typical web design. Based around a grid, the main homepage is made up entirely of navigation withe each menu item taking up a different amount of blocks. Not sure what determines how many blocks an item takes up but nonetheless a very creative design.
A website that allows the user to browse both horizontally and vertically, by hovering the cursor over the arrows positioned at the edges of the screen. Also allows you to zoom in and out.
Flash just blows my mind sometimes. The BBH homepage features a rotating world in which to navigate. One can position the mouse around the screen to determine which way the world rotates or one can click the world and drag yourself around its surface. What’s more impressive is the exquisite transitions throughout the website.
Not just a standard jQuery scrollto website. Fons Hickman m23 has a lot of creative nooks and crannies to seek out.
Beautiful navigation and transitions.
Probably the most creative navigation I have ever seen. How was this achieved? By finding inspiration from objects and the environment around. Get outside once in a while, don’t let the CSS galleries plague your mind.
Nick demonstrates how a vertical menu can be both appealign and fun to browse through.
What seems to be just a large vertical menu, actually contains the content as well. Click on the arrow to the right of each menu item to have the content smootlhy scroll in.
Athough 24 ways is comprised of just horizontal and vertical menus, it is the way they have been made that demonstrates creativity. With full height and translucent backgrounds the end result is very appealing.
The simplest navigation you will probably see. Chris shows how effective a simple list can be. Check out the gorgeous filtering as well.
Similar to Hello Goodlooking, Alp Tugan’s navigation is based around mind map design.
Zachary has designed and developed a masterpiece. I’m sure you will have as much funs navigating through his website than I did.
Probably not the most practical navigation, but still damn impressive!
Easier said than done, no? If you find it tricky to ‘think outside the box’ don’t revisit the same CSS galleries over and over, they will only prevent your creativity from developing, instead they will lead you to copy. Many of the web designers above have taken notice of their environment and the objects that it consists of. They have determined what feels natural and have developed them suitable for web design.
What is your favourite form of navigation from the list above?
What inspires you? How do you find inspiration?
I look forward to your comments.

Discussion
Hey Liam, that’s a nice collection!
I have seen only couple of them like 24 ways and wonder wall…
But rest are also fantastic.
.-= Nikhil´s last blog ..Things You Should Consider Before Building Your Website =-.
Thanks for stopping by Nikhil
you might be interested in:
LAb[au] : http://lab-au.com
(try a deep link: http://lab-au.com/projects/touch/ )
Lisa Pram: interactive barcode image gallery http://www.lisapram.com
Wow, beautiful work Alexandre
Thanks for sharing.
Amazing collection you have there.
Incredible what some of these web designers/developers achieved!
Thanks so much for sharing!
.-= DesignLovr´s last blog ..Weekly DesignLove #3 =-.
Anyone has the potential to achieve unique and creative design such as this.
You’ve just got to give it some thought.
I never realized Web designing can be so beautiful and fun. What an incredible collection!
Thanks for sharing, Liam!
One of the many reasons to why I just had to get involved with design!
Nice collection. All of these sites deserve a recognition. Thanks for sharing.
They deserve more that recognition, they deserve appreciation
If only the majority of web users were 20-25 college student with the web in their blood. Anyone actually know who Jakob Nielson is? Wow.
Thanks Liam.
Feels great to see my 5 years old portfolio still appreciated today.
I guess a serious refresh wouldn’t hurt though… (I’m working on it)
Amazing examples. Thanks for best practices
Nice list, thanks for sharing!
Sites like these (especially BBH and Thibaud) are the reason why I will always prefer using flash for creative projects and site’s that are out of the ordinary.
It just reminds me of the reason I started working in this field in the first place. Thanks for the list!
Great inspiration list. Navigation shouldn’t be fixed. It should be fluent and interactive.
Thanks for sharing Liam.
.-= Aidan´s last blog ..Using Philosophy to Better Understand The Methodology of Design =-.
Good collection. Thanks
.-= SM´s last blog ..Новое доменное имя блога =-.
Wow that is a really cool list of “special” sites. Love it!
Leave a comment