Showcase of Creative Navigation Menus: Good and Bad Examples

Advertisement

Good navigation is the main cornerstone of an effective website. In practice, however, it’s often a tough challenge to come up with a meaningful, unambiguous way to organize, arrange, and display content to users; and it’s often not much easier to find a visually interesting solution either. The wide adaption of JavaScript libraries like jQuery is making it increasingly easy to add various kinds of sleek animations to navigation design. For instance, many recent promo websites are essentially single page websites with an array of animation effects used to make navigation a smoother and richer user experience.

We need to be very careful and cautious when using these dynamic effects in our designs. A simple, calm navigation is usually much more user-friendly than an evolved, dynamic one. Users want to use the website, not be baffled by the weird and hardly usable navigation. But that’s not to say that a creative navigation should be avoided at all costs; in some contexts, an interactive menu does make sense, especially when it comes to promotional websites such as online campaigns, portfolios or advertising — on these sites, interactive navigation can lend some dynamics to an otherwise dull and boring experience.

Below we present some interesting examples of website navigation menus — they are not necessarily very usable, but they are certainly inspiring and original and thus you could build your designs upon the ideas presented below: use them, tweak them and improve upon them. We also discuss the potential usability problems of each of the techniques presented in this post. Before using a similar technique in your design, please make sure that it fits the context of your design. Test, validate and verify that the technique would actually make sense in your website. Approach these techniques with caution. Let’s take a look at some interesting ways to present navigation menus content for both smaller promotional pages and deep informational websites.

Parallax and Scrolling

Parallax is an animation effect that allows layers to move in response to a particular viewpoint. The effect is used to add a three-dimensional depth illusion to the design and make interaction more responsive and interesting. Recently, this technique has been frequently used to animate background images, as in the famous Nike Better World1 site.

Nike Better World

Rich graphics and parallax 3D effects

Vertical scrolling navigation with parallax background effects.2
Vertical scrolling navigation with parallax background effects

On the Nike3 page, the effect is visible when a user scrolls the page vertically. The background images seem to overlap, as if they were piled up in a slide deck. This effect is particularly strong when you click on the circles in the right area of the site. Notice the dashed horizontal and vertical lines which are displayed as you scroll the page. They vividly connect parts of the site and help to create a more consistent user experience.

One drawback of the navigation here is that the navigation controls are very subtle. In fact, on many sites which use this technique, the strong emphases are on the rich, detailed illustrations which make it a bit more challenging to actually find the navigation. In this example, perceiving the dots on the right side as navigation and not mistaking them for part of the design may take a while. Still, a very original and memorable design.

Rosso Carmilla

Horizontal parallax animation

Horizontal scrolling with parallax animation4
Horizontal scrolling with parallax animation

Rosso Carmilla5 features an interesting twist on a combination of the Parallax-effect and scrolling navigation. The designer uses a horizontal rather than a vertical orientation, with a classic navigation menu at the top. As the user hovers over visual elements, they seem to move, creating the illusion of depth. The limited color palette and original illustrations work very well with the animation to create a memorable experience. The subtle animations are visible only when the user hovers over the content area.

The idea is very interesting, and the execution is done fairly well. However, a larger font size and additional navigation controls for a smooth transition between sections might improve the overall usability of the site: the horizontal scroll bar at the bottom of the page isn’t easy to notice and isn’t very comfortable to use.

Discover Tennessee Trails & Byways

Horizontal scrolling navigation, clarified.

Horizontal scrolling with parallax animation and clarified navigation6
Horizontal scrolling with parallax animation and clarified navigation

Discover Tennessee Trails & Byways7 incorporate a “trail viewer” navigation for their users. The designers of the site use the same idea of horizontal scrolling navigation with a Parallax animation, but they decided to explain to users first how to use the navigation on the site. Usually, this is not a sign for an effective navigation, but it works quite well in this example, especially because the overall design appears to be very novel, playful and experimental to users anyway. In the case of uncommon or particularly innovative design techniques, this kind of instruction might be necessary until users understand the paradigm of the new navigation pattern.

When the user clicks on a trailer icon, further related details are displayed in a lightbox. Also notice how the “map” with trailer on the right side moves when the user uses the main “trail viewer” navigation. The other interesting navigation menu on the site is the one displayed at the bottom of the page; when a user selects an area, secondary options are displayed in the menu on the right side and this selection doesn’t change wherever the user’s mouse is. This navigation menu is also very nicely integrated in the overall site’s design.

Siebennull

‘Cluttered desk’ meets Parallax

A unique and original take on the 'cluttered desk' style8
A unique and original take on the ‘cluttered desk’ style

Strikingly original, Siebennull9 features a’cluttered desk’ style wooden theme, along with a 3D feel provided in part by shadows and other realistic graphics and in part by the Parallax effect which is applied to the whole page. The overall effect feel very interconnected without too much clutter.

One pitfall with an animated background, however, is that the background doesn’t necessarily hold still while the user is viewing something in detail, whether in a model box or a simple zoom-in. This can make it more difficult to read large blocks of text. The page does feel a bit difficult to focus on due to a strong Parallax-effect. This is probably an example of the Parallax-effect being used too strongly, thus deteriorating the purpose of navigation.

Storytelling

It’s common practice to keep the design as simple and intuitive as possible, making it very easy for the user to click from one page to the next, almost mindlessly — “don’t make the user think” is the rule. However, you could as well engage users on your site, making them think about what’s going on in the page and involving them in the experience on a deeper level. For instance, you could employ storytelling to increase the engagement on your site by telling a story that your users would like to pursue or interact with.

One way to make your visitors feel involved is to turn the website into an interactive journey. While users interact with the page, they can learn something along the way, being baffled by the originality and uncertainty of the site. This technique is probably best-suited to promotional landing pages rather than content-heavy websites. If a story is intriguing and presented in an interesting, perhaps unconventional way, it will capture users’ attention and encourange them to continue through to your site’s call to action. A few fine examples of these types of navigation are highlighted below.

Ben the Bodyguard

A narrated landing page

Ben the Bodyguard10
An exciting user experience, creating user-engagement with design and effects

The designers of the Ben the Bodyguard11 landing page have chosen a very memorable metaphor for their main character. Instead of presenting a generic “coming soon” page with a description of the upcoming service, the site effectively tells a story. The main tagline of the page is “A Frenchman protecting your secrets. Yes, seriously.” Next to this statement, a description of the tool is presented subtly. The mysterious character is displayed in the background, yet it very well captures users’ attention and interest.

The actual interesting part of the page happens when you scroll the page slowly. If you pay attention to illustrations and read all the details presented, you can watch as a story unfolds. While the narrator walks down the street, he gives you some explanation, but only enough to raise your interest. As you keep scrolling, the story reaches its climax and ends with a prominent call-to-action buttons. Notice that the design is responsive and the illustrations adjust to the user’s viewport. On the whole, it’s not classic navigation, but it’s not a traditional site either. Ben the Bodyguard is a remarkable website and storytelling works very well in this context of a promotional piece. That’s the reason why the site has received so much attention when it was initially released.

Youzee

Smooth, gentle storytelling

Smooth, gentle animation12
Smooth, gentle parallax animation

Youzee13 is another example of a smooth, vertical one-page scrolling navigation which employs storytelling. The page has the main navigation at the top, yet it is not linked to separate pages, but rather to the sections of the loaded page. In fact, each section slides up neatly, with a bit of animation but not enough to make the user dizzy.

Notice how carefully the designers use storytelling to involve the user in a story and engage them in learning about the tool. Opposite to Ben the Bodyguard, the design doesn’t rely heavily on a character, but rather uses more familiar, existing metaphors to unfold the story. The main area on the top isn’t saying what the service is about; the user learns it along the way as he scrolls the page. Also notice how well designers use the “Turn on” metaphor for the button on the top of the page; it looks as if it wanted to be clicked on and responds appropriately to a click. Well done, guys, well done.

Scrolling Navigation

Tried and true, scrolling navigation is a simple and elegant way to guide users through your content. Many designers are experimenting with scrolling navigation on single page designs which accomodate the full information of a website on one page rather than spreading it across multiple pages that would load separately. Usability studies are required to determine if this navigation pattern is more effective than a classic one, and it would be wrong to apply it to contexts without verifying its usefulness first. Some ways of making your scrolling navigation unique are highlighted below.

Polecat

Back to the basics

Simple solid scrolling navigation14
Simple solid scrolling navigation

Polecat15 is a yet nice example of a single page site with scrolling navigation. The primary navigation in the upper right corner is very minimal, plain text almost, but it works well because it’s not in the way; it’s clearly available and makes the user feel like they know exactly where they are. The illustrations are unique and engaging. When you visit the page for the first time, you might feel overwhelmed with a number of information items thrown at you, but this feeling goes away shortly after the site is explored in more detail.

When a navigation item is clicked, the page smoothly scrolls to the chosen section of the page. The interesting part is that various parts of the page are clearly divided using distinctive background colors, so the user always knows exactly where a section begins and where it ends. Also, each section is vividly illustrated, leaving a lasting and memorable impression. It has a more interesting and engaging design for a portfolio website than many of the similar websites out there.

The main drawback: at first glance, it’s not quite clear which elements are clickable and how the navigation works, which can be a bit confusing at first.

Cornerd

Simple vertical scrolling navigation

Simple vertical scrolling navigation16
Simple vertical scrolling navigation

Very much like Polecat, Cornerd17 features lots of illustrative eye-candy. The monster theme is working very well and subtle eye movements of the monsters create an inviting, playful atmosphere. The designer Denise Chandler does not take herself too seriously and this is exactly what invokes empathy and sympathy on the site, making it easier to develop trust for designer’s ability to produce engaging and attractive work.

The sections of the page work well, but a fixed navigation at theop might really help to establish more of a sense of freedom, especially in the long sections like the portfolio section. Instead of that, the user is only provided with the option to move back up.

Curious Generation Group

Single page scrolling with a twist

Curious Generation Group18
Single page scrolling with a twist

While clean and organized, Curious Generation Group19 feels a bit unexpected with its colorful round shapes. A simple static navigation bar at the top is both subtle and plays well with the overall design of this website. Sometimes a fixed navigation bar can feel clunky and distracting, but this one feels light and airy with its transparency. The positioning of the content works well with the animation of the scrolling and does a good job of leading your eye through the website. Notice that all single areas are interconnected: for each area, there is a sidebar navigation displaying further navigation options. A very vivid, colorful and memorable design.

Eric Johansson

Riding on a scooter

Eric Johansson, riding on a scooter20
Riding on a scooter, featuring parallax animation

Eric Johansson21 does a couple of things that make the exploration of his site interesting for the user. The page provides subtle cues on how to use the navigation and there is also a (kind of) horizontal scrollbar which appears within the context of the page. It’s a small difference, to have a scrollbar a few pixels above the bottom of the window as opposed to using the browser scrollbar itself, but it provides almost enough distinction to make it clear that the user is supposed to click and drag.

As the users scroll the page, they need to look out for arrows and handles that need to be clicked on in order for further navigation options to be displayed. Eric is playing with the users, and does so in a very unique way. Users that do not feel comfortable with it are nevertheless provided with the option to View the extended & “normal” site. The graphics on the page could be improved a bit to make the design look a bit realistic, but maybe it is designed this way on purpose. But it would be great if the users could scroll the page without necessarily using the integrated scroll bar on the bottom of the page (see Scroll Page Horizontally With Mouse Wheel22).

Haunted Cathouse

Vertical scrolling navigation with storybook graphics

Haunted Cathouse23
Vertical scrolling navigation with storybook illustrations

Haunted Cathouse24 is a yet another, very detailed and very illustrated page which breaks the flow of the page by displaying unique illustrations between the sections of the page. As the user scrolls vertically, he can either see the current section, jump to the previous one or to the next one.

Clicking on the little owl in the lower right corner reveals a slide in navigation bar at your service wherever you are on the site, a better indicator however may save the visitor some time. While some users may be happy to start scrolling away on their mouse to get to the content, in this particular design it might be useful to provide multiple options. A top-level navigation bar also provides a way to highlight what kind of content users can expect to find below.

Sam Web

Horizontal scrolling within horizontal scrolling

Sam Web25
Horizontal scrolling nested within horizontal scrolling

Sam Web’s26 horizontal scrolling panels, while a fairly classic navigation model, are very cleanly executed. It’s also nice that some sections slide horizontally while the contact link scrolls to the bottom, since that element is present globally.

The interesting thing here is the nested horizontal scroller on the portfolio page. Since it scrolls in the same direction as the main content area, but isn’t controlled by the same navigation, it has some potential to confuse users. The left and right arrows are visual indicators that something is different about this section, but it also might benefit from being a slightly different kind of scroller, or using some other interaction to navigate that content. It’s a tricky thing, finding a slick way to add navigation to subcontent already inside of some sort of interactive navigation.

Denny’s Restaurant

Too much of anything is bad for you

Denny's Restaurant27
Combined horizontal and vertical scrolling

The designers of Denny’s Restaurant28 probably overshot when searching for a way to accommodate a lot of content. The combination of horizontal and vertical scrolling is rather disorienting than helpful. Without the small hint on the home screen, the user may even miss the content only reachable through the extra vertical scroll. Additional content is hidden in sliders and it seems easy to get lost. In addition to being confusing, the site is not very friendly to mobile users, looking to order or find a restaurant on the go. The site might create a feeling of “fluid content” which is a bit difficult to grasp and focus on, since everything is moving; everything is interactive and everything is changing. The design could use a bit more calm.

Experimental Navigation Menus

It seems that designers often feel a bit underwhelmed with classic navigation pattern and inventing new methods of navigation or just add a new twist to convenient design patterns. The sites featured below present navigation in some interesting ways.

Ferocious Quarterly

The more unconventional tabs

Ferocious Quarterly29
Interesting illustrations

Ferocious Quarterly’s30 tabs in the upper section of the site are a little out of the ordinary. The single fact that they are presented in a different way, creating an illusion of depth, makes the design stand out a bit. A good example of how a small detail can make an otherwise quite unspectacular design look a bit more interesting.

Zut Alors [Warning: First five seconds may cause a headache!]

Pop-up-mania at its best

ZUT ALORS!31
Front and center tabbed navigation

Overall, ZUT ALORS!32 is extremely avante garde and very non-traditional. The large front and center letters are the only content on the page, and they are the navigation. Each letter pops open a series of thoroughly arranged pop-ups with subsequent page content.

While this approach is unique and bound to stand out, it will also deter average users. The short, simple statement on the landing page isn’t very informative and makes the user get confused. The pop-up secondary pages could backfire though: if the user has many windows open, the new opened ones won’t necessarily be the primary focus, which could make the design confusing. Although it is possible that that was the intention of designers in the first place. A very weird, noisy and extremely memorable design. Please do not try this at home.

Method Design Lab

Up-to-date news

Method Design Lab33
Graphic equalizer selector

Method Design Lab’s34 menu to follow their feed is one of a kind. Following their activity on the site is made easy by the graphic equalizer-like history in the top right hand corner. Clicking on an hour brings up all posts, media releases and tweets of the past hours. Differentiating between the different types is easy since each is assigned a specific color. A click on one of the news bubbles pops open a window with the actual message. Both the idea and the implementation are quite refreshing and do not overstrain the visitors patience.

The Web Standards Sherpa

Skipping through content

The Web Standards Sherpa35
Clear and easy — as long as the content is limited

The Web Standards Sherpa36 basically comes without much of a navigation. The content is presented on slides that can be skipped through. The arrows clearly indicate the preceding and following articles. While it is still manageable to skip through less than ten articles, this type of navigation is of no greater use once more than twenty articles are up for view. The link to a list of all published articles as well as the search function takes care of this. A level deeper into the site, the horizontal navigation only consists of three clear options that leave no one in the dark about their whereabouts.

BonLook

Illustrated Drop-Down Menu

BonLook37
Offering choice by shape using pictograms

BonLook38 features a nice example of a clean and simple illustrated drop-down menu. Choosing glasses by shape instead of brands makes the product catalog easier for any customer’s browser. In general, using pictograms in menu contexts eases orientation and helps customers find what they are looking for.

Design Intellection

Right-side dynamic navigation tabs

Design Intellection39
The right-hand navigation changes its appearance

The guys at Design Intellection40 present their portfolio-style site with a tab navigation on the right hand side. Interestingly enough, the navigation changes appearance when scrolling into the context section of each page, replacing the original literal menu with small icons. A click on the icons brings the user back to the top of each section, giving them a quick hint that the icon style is simply a smaller version of the main menu, not a submenu for the specific content section.

Generally a nice and intuitive menu style worth adapting and easily extended to cover subsections of content.

Bernat Fortet Unanue

A creative and interesting way to present your work

Bernart Fortet41
Clear and interesting categorical menu design

Fortet42 features 22 categories of work in the form of circular navigation buttons. The full menu reappears at the end of every page, making the site easy to skim through. Even though it is quite space intensive, the user is already used to its look and recognizes the visited categories. Another example of a clear visual indication contributing positively to the look and feel of the site.

Lega-Lega

Intuitive and clear pictograms with roll-over titles

LegaLega43
Straightforward Navigation

The Lega-Lega44 is simply structured and slick. The menu only consists of seven categories, each featuring a single layer. Only minus: the horizontal scroll-bar may easily be mistaken for part of the layout rather than being recognized as a scroller. Adding a mouse-over effect might fix the issue. A clean and easy site with straightforward navigation — you certainly will not get lost here.

Bluecadet Interactive

Clean submenu

Design Intellection45
Letting the user choose the category

Bluecadet46 sets an example in implementing a clean version of a graphics-heavy submenu. The design features a slider on the right side; as the user browses the items of the slider, the background image changes as well. Once an item in the navigation is chosen, the page displays the previous and next projects as well as provides a link to get back to the main menu. Also, the user can personally check the categories being displayed.

Danilo Iurlaro

Creative animation effects

Danilo Iurlaro47
Creative animation effects

Danilo Iurlaro48 features a creative use of scrolling animation effects, and it certainly stands out in a crowd. However, the text that jumps down from the top whenever a navigation item is clicked is truly annoying and distracting. At first, it gives the impression that this text is the title of the page, not just a transitional graphic, which actually isn’t the case. Letting the users scroll down manually to view the actual content with such a large navigation area is quite a challenge.

When using novel navigation techniques that many users might be unfamiliar with, it’s really important to utilize clear labelling to help them find their way through the site.

Fantasy Cartography

A map of navigation

Fantasy Cartography49
A map of navigation

Fantasy Cartography50 is a site showcasing maps, with navigation that is modelled after a map itself. While the content sections are basically a take on scrolling navigation, the organization and layout of the navigation options is unusual. The site is also full of ‘soft effects’ which tie it well in with the illustrations.

Clear visual indication using the link-corresponding dots correlates the active tab with the displayed content. Labelling is key in atypical navigation situations.

C&C Coffee Company

Charming animation

C&C Coffee Company51
Simple and fun, animation that enhances the navigation without distracting from it

The upper navigation of C&C Coffee Company52 is an example of animated navigation that is minimal, simple, and although being dynamic, doesn’t force itself onto users. The dynamic navigation elements fit nicely to the overall design of the page which also contains other “hand-written” elements, giving the brewery a more personal, friendly touch. Still, having seen the animation once may be enough for some visitors.

Breadcrumbs

NOS

Context-sensitive breadcrumbs

NOS53
Interactive breadcrumb

The top-level navigation in this example is really simple, but very clever. NOS54 displays sub-categories to the right of each top-level category when clicked, almost like a breadcrumb. This is a really interesting take and a good way to handle a large content-heavy site with a lot of categories. It lends itself well to the blog format where a lot of different new categories may be coming and going constantly.

MDM Bank

Persistent breadcrumb

MDM Bank55
Persistent breadcrumb

<p.MDM Bank56 features a classic breadcrumb-style navigation. However, it not only keeps track of where users have been so they can always return easily to any given point, but clicking on the site map tab reveals the complete interactive map for easy pinpoint navigation throughout the site.

Sliding Sections

Sliding sections are a great way to display a lot of content in less space. You have the advantage of focusing the user into that specific content block at a time, which can be useful if you’d like to present certain information and are trying to not distract the user with other information at the same time. Below are some examples of effective implementations.

Directions

Accordion style navigation links

Directions57
Accordion style navigation links

Directions58 is a well-executed example of sliding sections. There’s a lot of content on this one page, but it doesn’t feel overwhelming because not all of it is displayed at the same time. This is a good method for a site with a lot of links, or that’s just deep.

The secondary navigation is carried through to the secondary pages, so users won’t get lost. One suggestion, however, would be that if the navigation pattern would somehow reappear on the secondary pages as well, instead of the classic navigation. This might just help make the site appear a bit more striking and coherent.

Coexhibitions

Expand to see content

Directions59
Expand the calendar elements

Coexhibitions60 basically is one big sliding menu. Clicking on the titles reveals information about past and current events taking place in their showrooms. Certainly a good choice for a site with limited content, even though an easy way back to the top is not offered. Hiding the content in sliders is comfortable. In this case it helps create a calendar of events taking place at the venue.

Bankwest

Multiple expanding levels

61
Multiple expanding levels

Bankwest62 does not use sliding animations, but it’s a good example of a multi-tiered navigation system. They have a left-aligned top level navigation, which expands first vertically and then horizontally as the user navigates deeper. This is another good strategy for a very deep, content-heavy site. While it works very well as it is, a little JavaScript interaction allows users to peruse the deeper levels of navigation a bit more easily, making it even more effective. Notice the breadcrumbs navigation at the top of the content area: it supports the navigation and helps the users track their path throughout the website.

Elliot Lepers

Sliding boxes with captions

Elliot Lepers63
Sliding boxes with captions

Elliot Lepers64 uses an interesting grid layout with interactive sliding boxes. They load quickly and the website is easy to navigate. The simplicity of the information being on the main page makes it extremely difficult to get lost, as there are always arrows to follow and to click. The colors are quite energizing and the content nicely organized.

The secondary pages for each project are also well-done. The big arrow on the left is the only navigation that appears on each, but since the primary navigation is the front page, it still perfectly serves its function.

Global Humanitarian Assistance

Hidden sections help deal with large amounts of content

Global Humanitarian Assistance65
Hidden sections help deal with large amounts of content

One of the first things a user probably should notice on Global Humanitarian Assistance66 is the bright yellow left slide-out menu. It’s neatly executed, yet because all other elements are yellow, too, it doesn’t really jump to an eye. The site is very data-heavy and intended to provide visitors with access to many reports and case studies which are all hidden behind the yellow bar; in general, it’s a very neat and simple way to hide secondary navigation until it’s needed (context-sensitive navigation). An interesting idea: such slide-out panels are generally a good way for content-heavy sites to hide things while making them globally available. In this specific case, the secondary navigation panel could have been a bit thicker to attract the user’s focus.

Creative NZ

A lot of information in a small amount of space

Creative NZ67
A lot of information in a small amount of space

Creative NZ68 features a “mega drop-down-menu”. This is a nice example of a navigation that makes good use of the space by adding classic navigation (like the contact form, advanced search, etc.) as well as informative blocks along the bottom of each one. If you’re going to use such a menu, it’s really worth taking the time to carefully study the content and make sure that you’re efficiently selecting the content to be included in each submenu.

Additionally, notice the categorized slider on the main page. By making use of categories, it actually presents multiple slideshows at once.

Conclusion

Some final points to keep in mind when working with creative navigation:

  • Use appropriate descriptions to clarify when necessary. Not every engaging navigation paradigm is self-explanatory; sometimes a little explanation or introduction to the technique may be of greater help to the users of the site. Do not exaggerate and do not overcomplicate things, though. The experience should be smooth and simple.
  • Consistency is crucial. Even completely avante garde navigation can work well when key elements are always accessible, allowing the user to permanently have an overview as well as a sort of life buoy.
  • Use clear labels. Simple image cues aren’t always enough to guide users, and animated clues might not be perceived as navigational elements.
  • Consider telling a story. You could employ storytelling to increase the engagement on your site by telling a story that your users would like to pursue or interact with. This technique is probably best-suited to promotional landing pages rather than content-heavy websites.

Related Posts

Note: Thank you to Smashing Magazine’s proofreader, John von Bergen.
(ik) (vf)

Footnotes

  1. 1 http://www.nikebetterworld.com/
  2. 2 http://www.nikebetterworld.com/en
  3. 3 http://www.nikebetterworld.com/en
  4. 4 http://www.rossocarmilla.com
  5. 5 http://www.rossocarmilla.com/
  6. 6 http://tntrailsandbyways.com/
  7. 7 http://tntrailsandbyways.com/
  8. 8 http://www.siebennull.com/
  9. 9 http://www.siebennull.com/
  10. 10 http://benthebodyguard.com/index.php
  11. 11 http://benthebodyguard.com/index.php
  12. 12 http://youzee.com/
  13. 13 http://youzee.com/
  14. 14 http://ipolecat.com/
  15. 15 http://ipolecat.com/
  16. 16 http://cornerd.com/
  17. 17 http://cornerd.com/
  18. 18 http://www.curiousgenerationgroup.com/
  19. 19 http://www.curiousgenerationgroup.com/
  20. 20 http://ericj.se/
  21. 21 http://ericj.se/
  22. 22 http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/
  23. 23 http://portfolio.hauntedcathouse.org/
  24. 24 http://portfolio.hauntedcathouse.org/
  25. 25 http://www.samweb.com.br/
  26. 26 http://www.samweb.com.br/
  27. 27 http://www.dennys.com/#/home
  28. 28 http://www.dennys.com/#/home
  29. 29 http://fe.rocious.com/
  30. 30 http://fe.rocious.com/
  31. 31 http://zutalorsinc.com/
  32. 32 http://zutalorsinc.com/
  33. 33 http://methoddesignlab.com/
  34. 34 http://methoddesignlab.com/
  35. 35 http://webstandardssherpa.com/
  36. 36 http://webstandardssherpa.com/
  37. 37 http://www.bonlook.com/
  38. 38 http://www.bonlook.com/
  39. 39 http://designintellection.com/
  40. 40 http://designintellection.com/
  41. 41 http://bernatfortet.com/
  42. 42 http://bernatfortet.com/
  43. 43 http://www.lega-lega.com/english/index.html
  44. 44 http://www.lega-lega.com/english/index.html
  45. 45 http://www.bluecadet.com/
  46. 46 http://www.bluecadet.com/
  47. 47 http://www.daniloiurlaro.com/
  48. 48 http://www.daniloiurlaro.com/
  49. 49 http://www.fantasy-cartography.com/
  50. 50 http://www.fantasy-cartography.com/
  51. 51 http://www.candccoffee.com/
  52. 52 http://www.candccoffee.com/
  53. 53 http://nos.nl
  54. 54 http://nos.nl/
  55. 55 http://www.mdmbank.com/
  56. 56 http://www.mdmbank.com/about/
  57. 57 http://directions.com/
  58. 58 http://directions.com/
  59. 59 http://www.coexhibitions.com/
  60. 60 http://www.coexhibitions.com/
  61. 61 http://www.bankwest.com.au/
  62. 62 http://www.bankwest.com.au/
  63. 63 http://viteungraphiste.com/
  64. 64 http://viteungraphiste.com/
  65. 65 http://www.globalhumanitarianassistance.org/
  66. 66 http://www.globalhumanitarianassistance.org/
  67. 67 http://www.creativenz.govt.nz/
  68. 68 http://www.creativenz.govt.nz/
  69. 69 http://www.smashingmagazine.com/2010/09/07/showcase-of-interesting-navigation-designs/
  70. 70 http://www.smashingmagazine.com/2010/01/04/showcase-of-modern-navigation-design-trends/
  71. 71 http://www.smashingmagazine.com/2009/04/06/showcase-of-well-designed-tabbed-navigation/

↑ Back to topShare on Twitter

Sarah is a UX Engineer for Durham-based startup Adzerk. Adrienne is a graphic and print designer currently working from Syracuse, NY. We work together to create and build beautiful easy-to-use things at Kahnlab.com.

Advertising
  1. 1

    Grégoire Lemaire

    April 19, 2011 5:56 am

    yeah ! thanks for this extra article !!!

    0
  2. 2

    I have to disagree with a few – Rosso Camilla’s site – just was mor eannoying, and the parallax was tied to the body, not the navigation. Nothing was particularly impressive about the navigation.
    I dug cornered – but I didn’t like how a tall browser throws off the experience.

    Eric Johansson’s site was a tad annoying. Blue skies increased, but not the “content” areas, and dragging along was a poor experience – I switched to the “extended” site instead.

    Haunted Cathouse… well, if I can’t find your navigation, how am I supposed to use it? Hunting for the navigation shouldn’t be part of the experience (I found it, reloaded the page thinking “oh, maybe it was a timer”, and no, it simply is hidden and not indicated by anything except a floating owl).

    For whatever reason, Web Standards Sherpa is down (here’s a cache link: http://webcache.googleusercontent.com/search?q=cache:yOdxPhIyp5AJ:webstandardssherpa.com/+web+standards+sherpa&cd=1&hl=en&ct=clnk&gl=us&source=www.google.com)

    Actually, I’m getting “server not found” on several of these…

    Overall an incredible collection with some truly cool examples.

    1
  3. 3

    Nice Collection, thanks!
    I got blind for 10 seconds after opening Zut Alors though :)

    8
    • 4

      Yeah…. me too. Actually just sent them a nasty email. I cannot speak about their site with any more contempt!

      0
      • 5

        Take it easy son, I didn’t mind it. Definitely unconventional. Its refreshing occasionally to see different forms of expression. Not sure I would ever make a website quite like it, but I suppose that’s part of it’s appeal. It’s going in my bookmarks.

        1
      • 6

        I see they’ve posted your email on their blog :-)

        yes, the site is a bit of an abomination but it’s not the end of the world….I think that was their purpose, to get a strong reaction from people….it’s worked because here we are talking about it….

        0
        • 7

          I do agree its unconventional but its just unusable on a laptop…

          0
        • 8

          I think more than anything, Zut Alors is just negligent. Besides the fact I can’t get the site to load beyond the flickering lights… it’s just really sad they would present something like that to users without any warning. I’m all for avant garde, but this is neither good or bad… just irresponsible…

          - From their about section: “Zut Alors… are focused on creating work that is thoughtful and unique, for anybody.” – I call BS

          0
  4. 9

    Great VISUAL website… but most of them are bad case of Mystery Meat Navigation

    4
  5. 10

    Great article but can you put a seizure warning on the Zut Alors site? It does a kind of multi-coloured seizure inducing animation that actually just gave me a headache…. What an abomination of a site.

    7
  6. 11

    Wow great article with a lot of really interesting websites!!!
    Ben The Bodyguard is just awesome.
    Thanks for this great source of inspiration

    1
  7. 12

    So that´s what you call *creative* navigation?

    -4
  8. 13

    Jorge Rodriguez

    April 19, 2011 9:31 am

    Great collection of animated navigation. There’s a couple that are not very usable, but interesting ideas, hopefully some of us can build on them.

    Thanks

    0
  9. 14

    I’m taking on a project for a non-profit (need to learn how to say no better). This collection gave me some sound advice for building a web presence (that I posses very little skill) to engage users.
    Thanks

    0
  10. 15

    When it comes to web site navigation usability should always trump creativity.

    4
  11. 17

    Should have included http://2011.beercamp.com/ , it’s a very nice example of vertical scrolling and some fancy stuff.

    Those story telling examples were awesome. I especially liked “Ben the Bodyguard”

    1
  12. 19

    I like to keep navigation simple. Too much creativity can confuse (or blind) someone. Graphics need to be controlled while letting the navigation pop out of the background.

    -2
  13. 20

    Excellent article which enriched by a lot of interesting website. This great source of inspiration inspired me most. Ben The Bodyguard is exceptional, I like it! Thanks for the article again.

    0
  14. 21

    Yep! I think you guys should put a seizure warning on Zut Alors Link, because that can be enough to originate a seizure to an epileptic person.. Not my case, but shame on you guys!

    1
  15. 22

    check out: tijuanaflats.com/ – probably the best and creative use of the ‘one page scrolly type-o-site’ out there – Awesome!

    -3
  16. 23

    This post has truly some eye catching ideas for navigation! even better then the previous post on the navigation menus! NOS is a nice one through!

    0
  17. 24

    Smashing Magazine, you have the BEST galleries. AND, this is no exception. Nice collection, great commentary.

    1
  18. 25

    While Fortet has some nice work, the navigation is just a template from Cargo Collective.

    0
  19. 26

    Scotty the Menace

    April 19, 2011 6:44 pm

    Most of these are great examples of the “just because you can, doesn’t mean you should” rule for good web design.

    -1
  20. 27

    Though some of the site are pretty neat implementations, I agree with Olivier Labbé and Scotty the Menace. If you have to give your visitors instructions on how to navigate your site, you failed. Quite a few of the sites do not scale well to large screen sizes. Causing epileptic seizures, again a big fail.

    Great examples of showing off “gee-whiz” effects and making a site hard to use in most cases.

    3
  21. 28

    Brilliant article! Also, check out this nice implementation of mega-menu’s where the content within the menu changes depending on what link you hover on, this is totally cutting edge…: http://www.optimalusability.com/

    0
  22. 29

    For me as a user the navigation has to be easy. Nothing else! To many gimmicks put me off and sometimes are a real frustration. Nice examples though.

    -1
  23. 30

    Joram Oudenaarde

    April 20, 2011 1:36 am

    Excellent post with tons of inspirational sites and techniques, thanks! :)

    0
  24. 31

    Great to see a large corporate like Bankwest doing things a little differently. A really nice example of multiple expaning menu’s.

    0
  25. 32

    Kevin Craighead

    April 20, 2011 5:11 am

    Some truly awful concepts and ideas that are designed to satisfy the ego of the designer.

    The whole point of the navigation is to make it easy for visitors to move round the site using a familiar technique. On that score they all fail.

    Just about all of these are useless as regards usability and standardization – check out Jakob Neilsen and see what visitors actually do on web sites and then design based on the results. Otherwise you are simply designing to make it look cool and ultimately to fail (unless the whole point of the site is to be different and look cool that is).

    2
    • 33

      Designing something flashy and difficult to use has a long, storied history of being a good way to get paid. I don’t think you can just dismiss these techniques, you just have to be aware of their limitations and how they fit your project.

      1
    • 34

      Kevin, if you were to abide by the recommendations of Jacob Neilsen the world would be very dry and there would be so such thing as an iphone. Having designed one of these sites I can tell you that it under went a lot of end user testing and no one had a problem with navigation. In fact quite the opposite.

      Different doesn’t mean it doesn’t work.

      1
  26. 35

    Ben the Bodyguard is nominated in two categories at the webbys awards this year, to me its worth to give a vote.

    0
  27. 36

    All of these are very unique and interesting designs. A very well designed navigation to me is something where I don’t have to look for to find, I don’t need to think about using it, and where It allows me to get anywhere on the page and is the same throughout all the pages.

    A good example I saw is from a Optimum Lightpaths new navigation (http://www.optimumlightpath.com/) which I came across the other day. I like the look and feel and it is very functional with has a nice mix of links and images.

    -2
  28. 37

    I opened a couple of these on the iOS simulator and wasn’t very impressed. Complex parallax-based navigation techniques are great for design-and-dash projects, but probably a poor idea for anything that has to have a lifetime longer than a few months.

    Increasingly we can make fewer assumptions about the capabilities of a browser—especially concerning the mouse and scrollbars.

    0
  29. 38

    A lot of these sites are so gimicky and desperate to add a little motion to their sites without using Flash. Makes me wonder what the hell we’re getting rid of Flash for in the first place, if this is the result. WTF?

    So it goes…

    -dp

    1
  30. 39

    In rare cases the navigation effect can be nicely linked to the product. Have a look at http://www.aquatube.eu where the page is actually simulating the toilet roll paper.

    4
  31. 41

    Nike’s navigation does not work on Opera (?!). Dunno, how do you need to write something, that does not work in newest Presto.

    .. and ZutAlors was “popup-blocked” mania at it’s best (except for first one, which is user initiated, so it opens).

    Otherwise very cool (as in opposite to usable) :)

    1
  32. 42

    Some nice looking sites.
    I prefer function over form though.
    Some of the examples had me closing the tab immediately.

    Doesn’t matter how clever you are, or how awesome your fiddly navigation is, if you frustrate the user – they leave. period.

    they are pretty though.

    2
  33. 43

    Great Article Great Websites Thank you

    0
  34. 44

    I think we need to recognise many of these sites designers as the trail-blazing experimentalists that help us to see what works and what doesn’t. We need designers (and clients) that are prepared to take risks. Full marks to them for trying – even if some have failed miserably!

    I tried IE9 on all of these sites – a number didn’t work. So much for all the hype about how it was catching up with the other browsers!

    -1
  35. 45

    Quite good selection!! nice to see designers takin’ risks… but I must ask: Any of these sites were tested on multitouch screens? ’cause i’ve been trying to navigate some of them and there are some issues like the rollOver, drag zones and some others.. great article BTW!!

    0
  36. 46

    also very innovative: http://www.webfire.ch

    0
  37. 47

    Jeremiah Selengia

    April 25, 2011 10:11 am

    Some interesting and very functional navs. But some were utterly annoying and hindering to the whole UX

    -1
  38. 48

    Another site worth noting would be http://blondblonde.com. They do a really good job of the one page scroller type navigation but blend in color very well to highlight and create a bond between the different sections.

    0
  39. 49

    I really love the collection of sites here. I think that the Nike site is really good but, I am not really keen on how many people have tried to use it. When I see it on other sites, I am like, oh no not again. This is a really good post though, some amazing looking sites that have very crafty navigation.

    -1
  40. 50

    I like the navigation at versapay.com but… I’m biased.

    -1
  41. 51

    and the example that gives the most irritation … they offcourse choose a flash site.
    really, there where no other good examples showing creative navigation build in flash? ( THE tool know for it’s explosion in creative navigation – or irritating…)

    I really don’t understand what zut alors is doing here only to create a stigma.

    -1
  42. 52

    very original, and fun ..
    I think an excellent suggestion which each use
    designs that suit the content of the page ..

    -3
  43. 53

    What’s up with the “everything on a single page!!” fad, lately? Seriously, I just don’t get it. To me, it’s one of those things that’s cool the first time, and for small sites, if implemented right, but that style doesn’t really scale, and is a pain to implement properly, among other things. I gave up looking at the sites at about Sherpa, because every one I looked at was just a different implementation of single page scrolling.

    Ferocious Quarterly was cool (albeit not the most semantic), as were a couple others that I saw, but I agree with the others who said that most of these don’t really have anything to do with navigation menus or are examples of “just because you can, doesn’t mean you should.”

    -4
  44. 55

    These sites remind me of the early days of Flash, when people decided to make everything move simply because it was possible. White these sites are cute, they’re slow and I feel they fail to do the #1 task websites are meant to do, which is communicate who/what/why you are.

    CSS has progressed to a point where we can now animate everything, but that doesn’t mean that we should.

    Site speed, decent design and really good copy will get you a lot further in site design that flashy animations.

    Just my .02

    2
  45. 56

    I like the nike website, very innovative, very unique./..

    0
  46. 57

    What would be a good way to display a whole chapter of a book online. Putting the entire capter as one page really makes for a very heavy page considering tons of attached images. The next obvious extension how would display an entire book online?

    0
  47. 58

    The Examples are really looking irritated and none-user friendly. Better to look for simple designs here
    http://uicart.com/gallery/ui/navigation.htm
    http://www.cssdrive.com/index.php/menudesigns/category/C20/

    3
  48. 59

    Hey
    I just tried to use the Parallax scrolling effect (like the nika better world) as online portfolio.
    http://geoffrey-menissier.fr/
    Tell me what do you think. (I still have lot of problem with screens size, mobile version, IE.. but i’m trying my best to fix it)
    Thanks for this tutorial, and inspiration.

    Geoffrey

    1
  49. 60

    nice work, man :)

    thanks for the recommendations

    0
  50. 61

    Probably just me but I think we have not seen all that “sticky” elements could achieve.
    I Think sticky navigation can work well, especially for side-scrolling sites where the nav scrolls with the content presenting new options as well as affixing standard content (really basic PoC for something I have never seen http://jsfiddle.net/LewisCowles1986/S3E6L/ no javascript sticky menu). Something else I have always enjoyed is stackable sticky navigation where additional content appears to affix to the bottom of the sticky, we are working on a brand re-vamp for one of our USA clients and are really jazzed about affixing to existing stickies

    0

↑ Back to top