Websites with Exceptionally Creative and Unique Navigation

Websites with Exceptionally Creative and Unique Navigation

Navigation is, obviously, one of the most important things to get right in website design. Traditionally, menus have been placed at the side or top (or both) of a web page, but these days things are changing. We will never be able to change the importance of good navigation, but it can be taken to higher levels these days, with some navigation menus taking all of the landing page space.

Users are more likely to stay on a site if they firstly understand what they are looking at and are not confused by the page, and secondly can interact with the page, making them feel involved. These examples meet one or both of those criteria, and even if you are not interested in the product or service offered by the sites, their navigational designs are well worth taking a look at as the designs are creative and unique.

Creative, Interactive, Unique Navigation

Lebenswerk
The navigation on this site is not available until the user has clicked on the ‘start’ button. Once that is done, hovering over the split-image will expand the section and a box of text pops up from the bottom. A nice and different navigational system, I just don’t understand the need for the start button before you can navigate this site.

Lebenswerk

Westin Finds
The landing page for this site consists of a full screen background slideshow with beautiful images of destinations, and a text box in the center of the screen: “At Westin, everything we do is designed to help you make the most of your stay. Now we even help you find great, local places near your hotel. For a better you.” At the bottom of the box is a search bar, and there is an arrowhead, which when clicked on brings up the navigation menu. This seems to be a pretty unique navigation style, moving away from top, bottom or side navigation.

Westin Finds

Graf von Faber-Castell
This home page has a slideshow that depicts their four main categories. Each image has a call-to-action button in the center for the user to navigate to that particular section. A very clean, clear and different design.

Graf von Faber-Castell

Secret Study
At first glance, this centrally positioned navigation is perhaps not particularly unique, but as you hover your mouse over the categories, the red diamond shape gets bigger and smaller… it is an interesting effect!

Secret Study

Carbon Studio
This is definitely a different kind of navigation… to select any of the categories you have to drag and drop it into the center bubble – maybe more novel than unique, but creative for sure!

Carbon Studio

Van Alen Institute
This is a timeline of Van Alen Institute’s projects in public architecture, and there are a lot of them! The slits of paper slide out, but only slightly, on mouseover, so not enough information is revealed to see what the project is, but a decent way to present so much information.

Van Alen Institute

Organic Grid
A very colorful home page on which the navigation uses most of the space. Clean, clear and interactive leaves you in no doubt where each link will lead.

Organic Grid

Nick Jones: Narrow Design
This website has a very interesting navigation system. At first, it seems a little all over the place, but you soon see the organization. There are links all over the home page, and moving your mouse around highlights the links in red – so they are fairly difficult to miss.

Nick Jones: Narrow Design

Studio Stemmler
Here is another site where the navigation takes up all of the home page. A different and somewhat retro approach using a table-style layout with the main categories above the columns of squares containing the sub-categories. Each square gives a little glow on mouseover.

Studio Stemmler

Light Motion Design
It is not so much the unique navigation on this site – although it is pretty good – it is that the first thing you are faced with when you bring the site up is directions on how to navigate – now that is unique!

Light Motion Design

Section Seven
This is a wonderful idea for navigation. As the page loads, multi-colored columns grow upwards, then when loading is complete, they rotate and reveal the cover of a book with a small ‘open’ button below it. When you click on that button the pages of the book fly out. The screenshot below shows both the home page and the expanded navigation.

Section Seven

Salt Films
The hand becomes the cursor, and grabs the different salt pots. For the small icons, the finger points on mouseover. Another novelty style navigation.

Salt Films

Sensisoft
There are two ways of navigating this site: by hovering the mouse over the ‘About Us’ button at the bottom, or by clicking on the arrows in either direction. Once again, there is nothing but navigation on the home page.

Sensisoft

Yuna Kim
A very creative navigation style is used here. Once again, the navigation takes all of the home page, but the categories are arranged as shapes. There are three main categories that are denoted by squares, triangles and circles.

Yuna Kim

Cathy Beck Communications
An effective interactive navigation system is used on this site. Hovering over the either of the sets of initials at the bottom makes a menu fly out. The bee in the top left is a novelty, but I’m not sure of the practicality of it or the reason for it – when you click and hold, everything on the page reduces in size and collapses into the bottom left corner until you release the mouse button again.

Cathy Beck Communications

Small Stone Re-cordings
A bit cheesy perhaps, but definitely on theme – the navigation on this music site is presented as an amplifier, and the knobs are the links. I also like the grungy buttons for social media just under the amplifier – everything works well together.

Small Stone Re-cordings

Alzheimer’s Research UK
This is a vertical scrolling site, and as you scroll down the links fly onto the screen in the form of purple circles. Very creative and interactive.

Alzheimer's Research UK

Zervice
On this site, you can just click on the navigational buttons down the left side of the page – but why would you do that when clicking on the red button just below the van takes you on a journey around town? You stop at intervals and can either learn more where you are or continue, and a little van at the very left of the page shows your progress through the menu. Very creative indeed!

Zervice

TBWA/Hakuhodo
Amazingly interactive and creative home page – it’s one of those pages where the more you look at it, the more you see – notice the little man jumping up and down the telegraph wires. There are only four categories for this site, but many of the objects in the image will lead you to them – just move your mouse around the screen and enjoy the interactivity!

TBWA/Hakuhodo

65 Media
Yet another site that uses all of it’s home page for navigational purposes. This one is a little different however – you can waste a lot of time just moving your mouse across the screen – every little movement changes the shades of all the colors on the page.

65 Media

Form Follows Function
The content of this site is a collection of HTML5 interactive experiences. The navigation is presented as case sheets that expand when clicked on.

Form Follows Function

Oz Consignments
This is a simple navigation style, but nonetheless creative and well presented. The navigational links are the pictures hanging on the wall, making them an integral part of the overall image. This style of navigation is something we used to see from time to time, but is more unusual nowadays.

Oz Consignments

Conclusion

Hopefully you have visited some or all of the listed sites and seen for yourself how creative their navigation menus are.

Which style is your favorite? Have you created a unique navigation style that you would like us to see? Please share your comments and links in the section below.

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.