Mar 6, 2017

30 Examples of Innovative Navigation Experiences

30 Examples of Innovative Navigation Experiences

In this article we want to go beyond the common and safe navigation patterns that provide an easy and natural way to access content. Everybody knows that the easiest way to navigate, in terms of usability and accessibility, is to use standard patterns and UI controls like tabs, off-canvas menu, navigation drawers, etc.

But this is Awwwards and we have a strong vocation of inspiration and experimentation, so we want to look further than the well known common solutions. The past few years had been dominated by the omnipresent parallax navigation effect, long scrolling websites and the scroll hijacking usability nightmare. Storytelling navigation has become very common too, and WebGL projects have come up with a lot of creative solutions to navigate content.

We are still waiting for more examples of gesture-driven interfaces, hopefully, the standarization of APIs accessing device hardware is bringing us all those longed for interaction experiences.

One step further in navigation is voice controlled interfaces, where a combination of speech recognition, natural language APIs and machine learning will show you great new ways to access content and delightful user experiences.

Finally we would like to mention the new “black” in user experience design topics: VR and AR. Navigation is one of the most difficult tasks to accomplish in virtual reality scenarios. We need to go beyond Gaze and teleport navigation. Fortunately this is a topic we have to deal with now because VR and AR are no longer a future dream.

Here we look at a selection of sites which implement different navigation patterns and techniques like timeline or scroll triggered navigation, infinite canvas, parallax and storytelling navigation. You can find more in our collection The Best of Navigation. We will keep adding to it in order to provide you with an up-to-date reference.

Creative Navigation Experiences


If you have liked our selection of Navigation elements and experiences, why not add it to your favorites? Did you know you can follow your favorite collections (which are continually updated to provide you with the most up-to- date inspiration) or you can even create your own. To see how, follow this simple YouTube tutorial and keep your eye out for the new Chrome extension that will be available in the next few weeks.