16 Great Websites with Unique & Unusual NavigationPosted on 10
This article has been contributed by Alex Bulat.
Navigation is an essential component of any website. Comfortable, user-friendly and straightforward to use, navigation creates necessary conditions for every visitor to find what he/she is looking for. In this round-up we’d like to show you number of websites with unique and unusual navigation methods.
On this website the navigation within each category is created in a very unique manner. When clicking each bucket, it zooms a bit, while the area around get blurry. What’s more when you are in the single product view, at the bottom of the page, there appears a reference line with links to other products in this category.
Kurka Wolna is a one page website which is quite huge actually. When the site loads you are explained how to navigate, so you need to use your mouse to drag-and-drop the page. Follow the chicken traces to get to part of the site you want to get to.
Another great example of a single page website. The navigation bar is on the top of the site, just click the link and corresponding part of the site will open. The site utilizes parallax and bunch of other cool features.
House is really amazing website from the stand point of technological stuffing. Video background on the home page, parallax scrolling, and a single page design.
* * *
This is a website of an ex German goal-keeper. In his website Jens appears in five roles: coach, commentator, goal keeper, ambassador and speaker. Switch between the figures at the bottom to find more about life and activities of Jens. The Website utilizes an effect of slides; while you scroll these slides replace one another. In the left part of the page you can see the navigation bar showing you which slide are you at right now.
This websites unites information about progressive technical developments; things that will blow your mind. Parallax, full-width videos, animated logos – those are just tiny bits of what you’ll see here.
When you get to this page you are presented with a 3D cube that acts as navigation. The website then scrolls in a different direction depending on where you go.
You can use the arrows to navigate but the screen will change size while things animate in and out of place. A great storytelling experience.
To navigate around this site press GO and a car will drive you through the informational areas of the site.
This website utilizes screen space and consists of a big scrolling user interface that you can move with the help of your cursor. When you want to watch a video just click one, use the scroll wheel to reveal more info about each video.
The home page welcomes us with an animation looking like real origami. This website utilizes horizontal navigation (see portfolio) and you can use your smartphone as a joystick, just scan the QR code and have fun.
The first thing you see at this website is a video background, then there appears a horizontal menu with names of people. When clicking the name, the bar disappears and it goes to the video.
Metro style was used as a basis in this design. Move the mouse around to see cool hover effects. When clicking each item from the ones featured on the home page there appears a chess looking board that featurs all other content.
The central element looks like a ball of water under 0 gravity. To navigate around the site just drag the small drop into the center.
This is a huge sheet that you can zoom in or zoom out similar to Google Maps. Or you can just drag it in any direction or use the keyboard.
The website for the movie Wolverine Unleashed highlights the strengths and weaknesses. You can navigate by scrolling around and clicking on interactive points on his body (not all parts).
That’s it guys, if you seen some other great examples you can add them in the comments below..
- 11 Personality Traits of a Successful Freelance Designer (0)
- Free Hand-Picked Resources for Designers and Developers – September Edition (4)
- Top Responsive Design Tools + Win Templates! (19)
- Future of Web Design & Future of Web Apps Conferences (3)
- The Typographer’s Dream Bundle – 33 Pro Fonts for 99% Off (1)