Examples of Creative and Inspirational Website Navigation
Website navigation has always been, and remains one of the most important parts of the design. It must be clear where it is and where the links will lead the user. Poor navigation will very quickly lose viewers, possibly more so than any other part of the design.
Navigation menus have traditionally appeared at the top or sides (or both) of web pages. As website design progresses, navigation has become more and more prominent, and the importance of good navigation has been fully recognized by designers, developers and even clients.
Creative and unusual navigation is starting to trend in website design, and full page navigation is becoming more and more commonplace. However, just dedicating a lot of space to navigation is not, in itself, the creative part. The creativity can be in the animation, the hover effects or simply in the shapes of the navigational links. Here we have selected some very creative and inspirational examples of website navigation for your viewing pleasure.
Creative and Inspirational Website Navigation
This site doesn’t have an unusual navigation style in terms of placement, the menus are situated across the top and down the left side, but in terms of presentation, this navigation style is very unusual. The menus are presented on torn corrugated cardboard, and are in keeping with the overall grungy style of the site.
This site is dedicated to Tweets having anything to do with UFC. As the Tweets come in (very quickly!) the Tweeter’s icon flies out from the center circles and you can click on those icons to read the Tweet.
The segments of the center hexigon open on mouseover, and the whole page changes to shades of different colors. A very creative style of navigation.
With just 3 menu items, this navigation design is pretty unique. As you hover over the navigation tabs at the top of the page, the image of the designer changes and the speech bubbles have relevant text within them.
The beer mats that the bottles sit on are the navigational links on this site. A very creative idea.
Another site where the placement of the navigation menu is not remarkable, but the use of a ‘specials’ chalk board with complementary chalk fonts is very creative and totally in keeping with the products being promoted.
This whole site is very organic in design, and the navigation menu is no different. Wooden tabs for the categories and a leaf cursor as you hover over them, then the dropdown submenus are linked-together wooden tabs.
Hanging, waving, hand-drawn tabs are the navigational style of this website, and they perfectly match the company logo shown on the paper cup.
A very busy home page with manga-style illustrations – presumably representative of the designer – for navigational links. These illustrations are monotone until you hover the mouse over them, then they are full color.
In keeping with the water theme of the site, the navigation menu is a row of overlapping clouds. Hovering over the tabs will cause a description tab to fly out. The drop shadows make the clouds appear to be floating – a pleasantly creative design.
The background of this site contains thumbnail images of all the case studies – these are not links. The navigation menu runs horizontally across the middle of the home page, and when you hover over the categories the relevant thumbnails change color and a text box appears in the top left corner with a description of the category.
The home page is presented in a collage style, and the bottles on ice at the bottom of the landing page are the navigational links.
The navigation on this site is a series of hollow circles at the bottom right of the page. As you click on each, a line connects the circles. The circle further right, on it’s own is the link to site information.
Another organic site, which you would perhaps expect as it is for a backpackers resort. The wooden direction arrows form the navigation menu and they have a purple painted effect on mouseover.
The navigational icons are at the bottom of this home page and are apparently placed on a shelf. A different idea, being at the foot of the page, and very nice icons. The social media icons at the top are in the same style.
This site has placed their navigation menu towards the bottom of the home page, with a full screen video as the background. On mouseover a large, opaque rectangle appears, highlighting your choice.
Another site with hollow circles to navigate. You can also simply scroll down this site.
This is a Russian version of a timeline for the Mini car. The car follows the road as you click on the colored pictures along the roadside.
A very simple navigation menu that takes the entire landing page. Horizontal strips of shades of gray with white text contain the categories, and the strip and text are inverted on mouseover.
This landing page is presented in the currently trending flat style, with many pastel colored circles that are links to examples of the studio’s projects. Each circle display’s the client’s logo on mouseover.
This site has a very small amount of content on the landing page and two thirds of the page is taken up by the navigation menu which are, as the site name would suggest, colored lines!
This app is aimed at both children and parents and the whole theme of the site is very suitable, including the signpost navigation menu.
This site’s landing page is nothing but navigation – presented in vertical strips of color. Scrolling will move the strips vertically, and hovering over any strip will cause it to widen slightly and the text on the other strips turns gray and the colors darken slightly, giving the effect of them moving behind the chosen strip.
Once you have clicked on the Enter button on this site, the navigation menu is a series of circles that reveal their link on mouseover.
This is a very different and unique navigation style. Again, the whole landing page is dedicated to navigation, and you drag and drop any of the icons into the center bubble to visit the links.
A page full of large text titles. When you hover your mouse over each title, all the others disappear, and when you have visited a link, it will then be struck through on the home page.
This site not only has creative navigation, but it also follows the current trend of being remarkably flat. Hovering over any of the titles causes a pink label with a ‘read more’ link to pop up.
The landing page of this site is filled with diamond shapes containing gold colored images. Hovering over any of the diamonds will put the image into color and a description of the link will appear.
This is not the typical presentation for a bodypainting and tattoo studio. The theme of the site is based around hexagons, and the navigation menu on the right is a series of connected, multi-colored hexigons. A beautiful, flat design that is surprising for this trade.
This site, at first glance, is probably nothing remarkable. It is flat design, it is tidy for sure, but when you hover over any of the links along the top navigation bar, a solid black column appears, making this navigation pretty unique.
After looking through some of the more unusual navigation styles that some designers have created, I thought it might be nice to also showcase some sites that bring us what we know as ‘standard’ navigation, ie: positioned at the top or sides of the home page. These sites have ‘standard’ navigation menus beautifully presented.
Hopefully you have been inspired by some of these examples of website navigation. Have we missed any from this list that you have come across? Please share your comments and links in the section below.