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
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.
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.
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.
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!
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!
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.
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.
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.
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.
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!
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.
The hand becomes the cursor, and grabs the different salt pots. For the small icons, the finger points on mouseover. Another novelty style navigation.
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.
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.
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.
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.
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.
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!
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!
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.
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.
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.