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

Helmy Bern

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.

Helmy Bern

UFC Social

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.

UFC Social

CO3 – Le Mouv

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.

CO3 - Le Mouv

Guillaume Pacheco

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.

Guillaume Pacheco

Getranke Kukral

The beer mats that the bottles sit on are the navigational links on this site. A very creative idea.

Getranke Kukral

Gene’s Sausage Shop

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.

Gene's Sausage Shop

Fundo Los Paltos

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.

Fundo Los Paltos

C & C Coffee Company

Hanging, waving, hand-drawn tabs are the navigational style of this website, and they perfectly match the company logo shown on the paper cup.

C & C Coffee Company

CL Designz

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.

CL Designz

HydroHolistic

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.

HydroHolistic

Lab for Culture: Case Studies

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.

Lab for Culture: Case Studies

Fresh Bar

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.

Fresh Bar

A Guide to Making Things

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.

A Guide to Making Things

Shiralea Backpackers Resort

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.

Shiralea Backpackers Resort

Spark Design

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.

Spark Design

New Deal Design

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.

New Deal Design

Drug Bless America

Another site with hollow circles to navigate. You can also simply scroll down this site.

Drug Bless America

Mini

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.

Mini

N3RD

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.

N3RD

Mosne

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.

Mosne

Coloured Lines

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!

Coloured Lines

Hide Listen & Find

This app is aimed at both children and parents and the whole theme of the site is very suitable, including the signpost navigation menu.

Hide, Listen & Find

Minimal Monkey

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.

Minimal Monkey

Solasie

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.

Solasie

Carbon Studio

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.

Carbon Studio

Issey Miyake – Experiences

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.

Issey Miyake - Experiences

Artist of the Year

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.

Artist of the Year

Brewery Ommegang

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.

Brewery Ommegang

Anet Design

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.

Anet Design

Corporate Risk Watch

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.

Corporate Risk Watch

Standard Navigation

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.

This is Teixido

This is Teixido

Fully Illustrated

Fully Illustrated

AFD-folio

AFD-folio

MacAllan Ridge

MacAllan Ridge

The English Riviera International Comedy Film Festival

The English Riviera International Comedy Film Festival

Sarah Hyland

Sarah Hyland

Cognigen

Cognigen

Creative Spaces

Creative Spaces

Blue Moon Dueling Piano Bar

Blue Moon Dueling Piano Bar

Keith Cakes

Keith Cakes

Conclusion

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.

Advertisement