While it’s important for web site visitors to be able to navigate freely and unconfused through a site, sometimes it’s nice to land on a site and use a navigation system that’s a little out of the norm. It might be unusual because of the way it looks or the way it functions. Menus don’t always have to sit at the top of the page in list form and sidebars don’t always have to exist to hold links or “about me” text.

The target audience is a major factor in how wild you can go with your navigation or layout. One of the quickest ways to lose visitors is to alienate them by making it difficult to find their way around. If you’re creating a corporate site, you may want to avoid anything but standard layout and navigation. However if you’re going mega-creative and know your audience will come along for the ride, then why not experiment?

Many of the sites I’ve chosen are Flash-based but I believe it would be possible to recreate a lot of the ideas using HTML and CSS, maybe just without the smooth animation. It’s good to look and learn from something a little atypical and get new ideas.

So, for the purpose of inspiration and new design perspectives, here are ten websites that break the “traditional” navigation mold. They are creative, different and (oh no!) might make the visitor think a little bit.

Bio-Bak

This site has a hand-drawn, collage feel about it and it’s good fun to use. There are buttons to press and icons to drag as you find your way through the content.

bio-bak

Calliope

This layout looks just like a typical woman’s glossy magazine and the headlines are links. This is a flash site but I think something very similar could be achieved using CSS.

calliope

Longboard The World

A beautiful, tactile site. The old-style Polaroid images are links to different sections on the sites.

longboard

Kashiwa Sato

Another flash site. I’m not too sure what to say about this – it’s a bit insane really, and could be considered challenging. It’s probably best to just visit this one and see what you think.

kashiwa_sato

The Back Of The Napkin

Nice hand-drawn graphics are used to show the sections of the site literally on the back of the napkin. It’s a mixture of HTML/CSS and a few small pieces of flash on parts of the napkin.

BackOfTheNapkin

Convert Code

This is very simple and easy to use. A numbered grid of rollovers provides navigation through the site. The grid stays put and the text on the right hand side changes.

convertcode

Aksident uses card holding “actors” to identify the different parts of the site. When you click on a card, you’re taken to that part of the site where the information is displayed in a novel way by the actor. Good fun.

aksident

Gleis3 uses what look like an underground transport map to layout the contents of their site.

gleis3

The Dollar Dreadful is designed to look like an old time newspaper. Rollovers on the center of the page link to free booklets. Links in the newspaper columns on the left and right provide information about the site as well as links to the various sections. This is very nicely put together.

dollardreadful

Jacksons of Piccadilly

This is a beautiful site, relying heavily on flash for the smooth animation. It requires the visitor to mouse over the images to reveal the navigation.

jacksons

How do you feel about sites where the navigation is a little different than “normal”? Have you seen any sites like this that have really impressed you?

Jennifer Farley
Jennifer Farley is a designer, illustrator and design instructor based in Ireland. She writes about design and illustration on her blog at Laughing Lion Design.
  • Scott

    Really interesting examples. Another I saw recently was http://www.permissionevangelism.com – a site promoting a book on evangelism for Christians.

    The navigation is in rollovers under some of the photos in the collection. The visitor must mouse over the photos to reveal the navigation.

  • Rick

    Another one with special navigation: http://www.station.ch Looks nice.

  • Galen

    The David Crowder*Band has a neat site nav. Just hover over the little green squares on the right side of the screen.

  • Anonymous

    Don’t like them, just want to navigate easily, don’t want to guess. they look great though. thanx

  • Mark

    Wow – can you spell Mystery Meat navigation? These are quite simply awful.

  • Rob

    well, I think having different navigation is a good thing, but it needs to be laid out simply for the person viewing the site. I did not care for the Dollar Dreadful website at all…you have no idea where the main navigation is or where you’re supposed to click..very bad!!

    Now…the longboard website has a different, cool, and simple navigation that is very easy to understand for the viewer. I love the photo images with simple text underneath serving as the main navigation.

    You bring up a great point about target audience and navigation. I do agree about that, and certainly the style of navigation should fit the style of the website. But, at the same time, it needs to be easy for the viewer to access. Besides, you only have 30 seconds or less to gain the attention of the viewer. If they can’t find out where you’re supposed to click to view the pages, they are gone never to return!

  • W2ttsy

    the only ones i felt were usable were: the back of a napkin, convert code and gleis3. The rest in my opinion were just attempts at using HTML and CSS to achieve awesome effects at the expense of the user’s experience.

  • http://edgedirector.com/ plumsauce

    Don’t forget that you can use image maps to make areas of an image clickable. This works without css, javascript or flash. Just html. Will work in most browsers except perhaps mobile browsers.

    Disappointed that the beautifiul b/w image at jacksons required flash to see.

  • Mostafa Issa

    that’s really Unconventional

  • http://www.turtlereality.co.uk jont17

    You would need to do usability testing with your target audience. The danger is that you are just hiding your content from end users – which really isn’t the point of site navigation!

  • http://www.crearedesign.co.uk TomBradshaw

    Really interesting set of examples. It can be hard to come up with new ideas. Most of these would only work in their own context but I do like Convert Code – that could be used for the sites I design.

  • jhoysi

    Examples like these definitely have their place, and are a great *varied* set of unusual navigation! Lovely examples, my favorite has got to be the Underground map.

  • conticreative

    Some of the examples are certainly interesting. But they are very limited in scope and most of them are confusing.
    Naturally, I get tired of the usual horizontal menu too, but it is undeniably a convention that works and makes good use of space.Users have come to relay on “classical” navigation and you reinvent it at your peril.
    On most run of the mill sites navigation in this fashion would be absurd and counterproductive but I can see where they could have their place.
    If I were to design a navigation like it, I would probably add a link to a SS switch where the user could choose to navigate in a more traditional fashion.

  • payclicks

    Longboard and napkin sites are pretty slick. Nicely done!

  • guest

    what i hate about all this top ten lists is that you never link the images , so if someone wants to open example webpages in tabs he have to look for one underlined word.and i also hate more things but for now its enough for you .FIX IT!!!!

  • http://www.crinkle.com.au/ crinkle

    I agree with the majority – whilst these sites are (mostly) lovely to look at, they rely heavily on a user who desperately wants to find content. We are all so strapped for time, and with a high expectation of having things provided quickly and simply I have to question the place that this kind of navigation has in today’s web. The most important rule of web design is to make it easy for the end user! Don’t irritate them with your navigation, don’t make them work to find your content, don’t confuse them.

    I’ve been to a number of sites that purportedly contained information I was really, truly interested in. I really tried to figure out how to get to it. When I couldn’t, I left. And I was dedicated to my cause. I love to see new ideas in navigation and layout generally, but I see no value in making navigation more “mysterious” to the user. It’s not exciting, it’s annoying.

    Lastly, I don’t have a Flash plugin on my work machine. Offering no alternative to Flash navigation means I literally cannot browse the site. And that makes me sad, because I do like browsing sites. Make it easy! People will leave and never come back!

  • bloodofeve

    Here is another interesting flash based website Polly and the Billets Doux. The content revolves around like a record, but even more annoyingly the actual navigation links move to different positions each time you choose to look else where and all the external links open up as new pages…I find this sort of this exceedingly irritating!
    I’m sure that bands especially seem to forget that not all their fans are either sighted or able bodied.

    I have a real dislike of Flash based sites as they really do discriminate against those users who do not use standard browsers, or live in areas where broadband services are unavailable.
    Although Jacksons of Piccadilly’s website may be esthetically beautiful, they should know better. As a British company they should get a knuckle rapping by the Department of Trade and Industry for failing to observe the The Disability Discrimination Act (DDA) 2005 which clearly states that you should make all aspects of your business accessible.

    Even when I use flash I keep it to the barest minimum and also ensure that if a browser has no Flash Plug-in the content can still be read, it doesn’t take too much effort or ‘Rocket Science’ for that matter to produce a functional, usable and accessible web site. There have been many time when a client has said to me I want a Flash website, through good explanation I often manage to steer them away from a full flash site as I will not design a Flash site without producing an HTML equivalent. If they are happy to pay for 2 sites then fine I’ll do it, but most businesses see that having a well designed HTML/CSS based website actually makes excellent business sense.

    All we can do as designers is carry on chipping away and re-educating the public that simplicity is what most end users require.

  • CopperBot

    Can’t say I’m a big fan of any of those user interfaces. Fun for some but annoying for most. The average web surfer only spends a few seconds on a site randomly clicking anything that looks useful before giving up and moving on. It would be interesting to see the google analytics statistics for those sites to see how long the average user stayed and what pages (if any) they actually tried to access.

  • Anonymous

    Nice collection

    I think J K Rowling‘s site is worth a mention

  • Abdurrahman Gemei

    Very nice! I wonder if some of them can actually be inconvenient rather than unconventional sometimes.

  • lewiscom

    that kashiwas web site makes my eyes want to pluck themselves out. I think that would fit in under the heading of ‘do not do’

  • Raphaelle

    I agree with CopperBot, some unconventional navigations are interesting, but most of the time it’s not worth it; visitors don’t stay very long on a web page. If it’s too complicated to figure out they’ll leave even faster.

    I still believe in the “don’t make me think” rule very strongly.

Stay ahead of the game Exclusive content for developers and digital experts Go Premium