🤯 50% Off! 700+ courses, assessments, and books

Ten Examples Of Unconventional Site Navigation

    Jennifer Farley
    Share

    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?