{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

When it comes to website navigation, I'm a traditionalist. I don't think it's something that should be messed around with, unless there's a very good reason for doing so.

The fundamentals of web navigation haven't changed at all. Obvious labels, clear scent trails, a lack of clutter, and good usability are all essential. Navigation should be obvious, prominent, persistent, and not obfuscated in any way. And as with most things, fancy design should be stomped on if the user experience is compromised. 

However, I love innovation, experimentation and evolution, and it is perhaps an opportune time to rethink our ideas about web navigation, given the rise of smartphones and tablets, as well as better tools, such as HTML5, CSS3 and jQuery.

In the past year or so I've noticed that more and more websites that have unusual forms of navigation, and I thought I'd collect a bunch of examples to show you the art of the possible.

It's worth pointing out that I don't think all of these work brilliantly. I'm including examples that are different and distinct, or that are very much in keeping with the rest of the web experience, whether good or bad. You can decide for yourself. 

Some of these might be filed under 'trying too hard'. As with everything, I think it's about finding the right fit for your site, your content, and your audience.

So then, let's prepare to navigate! Click on the screenshots to visit the websites, so you can see how they work.

LBVD

I love big fonts and bold typography, so this is a winner. Those little images are reminiscent of children's books from way back when. The feels!

Blink

More large fonts, which reduce down in size once you progress into the site. Colour coding FTW.

 

Nimbletank

This has been designed for mobile and tablet devices, and takes a colourful card flipping approach to navigation. 

Big Apple Hot Dogs

This simple map-based approach makes tons of sense, considering the business model. You can explore more about the company by clicking on the red circle and scrolling left and right. 

Toybox

This New Zealand agency knows when your cursor is on the right side of the screen. Try it...

Etch

I've referenced Etch before: it is a pretty site that reorders the content on its page when you press one of the navigation icons. Lovely.

ELI

Pull the navigation bars down the page to reveal portfolio content. Additional fixed navigation lives at the bottom of the page.

Minimal Monkey

Here's another site I've flagged up before, for its use of colour. Click on a headline (or anywhere in one of the coloured bars) to view each page. The 'about' link also expands the page.  

Coloured Lines

This one works in a similar way, but condenses the navigation on the right over to the left of the page after you start to explore the site. Pretty.

65 Media

Yet more coloured bars, and a glorious effect when you scroll down the page, which makes me yearn for a game of Super Breakout on the Atari 2600. Unfortunately the back button doesn't work, which is perhaps the worst navigational sin of all. Modern tech can solve this problem.

Silktricky

Less website, and more web page, which repositions and resizes the boxes you explore the content. In cases like this perhaps fixed navigation would be overkill.

FFF

"Spin spin spin the wheel of justice..."

FatFace

Simple, meaningful and good-looking left hand navigation, as well as persistent feature filtering. We are big fans of this approach among retailers. It's not especially out there, but it's very smart

Yodabaz

If you want to see out of focus text and navigation that shifts about as you move the cursor then look no further...

Sagmeister & Walsh

A bird's eye view of the company office, replete with clickable 'buttons'. As creative as it is straightforward, and perfect for the brand, and for a relatively small website. I love this one.

Grip Limited

Typography-driven. A monochromatic design, give or take. Scrollable columns that can be minimised. A 'GO BIG' button at the top right (top marks for being designing for bigger screens, and not just smaller ones!). 

H&M's 'Stories'

The fashion retailer's sub-brand has a fairly straightforward navigation, but dedicates its homepage to discovery. Click on one of the pictures and a cluster of related items will appear as an overlay on the same page. 

Where Are You?

Here's one I'm not at all convinced about. You'll need to tilt your head to one side and drag the homepage around to unearth the content you're looking for, which is represented as a series of miniature wireframes of each page. Navigate to the pages and there is a sketchy fade effect on the text. 

If you are likely to look at your web navigation design this year then here are a some more pointers:

What do you think? Have you seen any other examples of unusual / innovative / amazing website navigation? Do you think there is scope to push the boundaries of navigation design, or should we stick to tried and tested techniques? Do leave a comment below...

Chris Lake

Published 7 January, 2014 by Chris Lake

Chris Lake is CEO at EmpiricalProof, and former Director of Content at Econsultancy. Follow him on Twitter, Google+ or connect via Linkedin.

582 more posts from this author

Comments (4)

Avatar-blank-50x50

Website Erstellen

Thanks for updating new information about web designing. It helped me a lot to improve my businesses. Practically as a developer you have shared lot of details about website designing.

over 2 years ago

Avatar-blank-50x50

Martin

Nimbletank: "This site is best viewed on a mobile or tablet."

It's like 1997 all over again.

over 2 years ago

Avatar-blank-50x50

Laura | Ricemedia Web Design

I love designs that are completely out there and unusual. Grip Limited's design is something I've never seen before and completely ignored the minimalist trend, but FFF's spin wheel is really good.

about 2 years ago

Avatar-blank-50x50

Konstantyn Breyak, Designer at 07300

and how about this, in a 3d websites http://brejak.com

over 1 year ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.