Atypical navigation isn't as much a design element as it is a structure or way to build a site. It is all about concept and thinking outside the box. You will find that all these sites make strong connections between the way they are navigated and the overall point of the site. From selling car roofs, to a portfolio of work, the navigation style is made to draw one into the world the site is meant to describe. This is a powerful way to connect to the users for sure.

One thing you will quickly notice about these samples it that they are mostly flash based. In fact only one of the sites below is entirely html/css/javascript based. I do believe though that many of these interesting navigation patterns could be adapted to more typical html/css based sites. They might not be as animated, but the variety of overall structure could be used. There is no reason every site has to have tabs at the top, or a list of links on the left. Hopefully these sites will serve to inspire css based designers to push the envelope and incorporate some more creative navigation techniques.

Three sites in particular make me wonder if the css folks couldn't draw some inspiration from the flash world: Super Famous is a beautiful site. The right navigation is in fact html based, but the content area is flash. I absolutely love the navigation, it is so original, and yet it retains a very easy to use format. Saturate is the second one I feel could easily inspire great css based work. There is no reason the disk animations couldn't be replicated with animated gifs. The end result though is new and fresh. Finally In the Habit, the cluster of boxes could be created so easily with a sequence of divs and a splash of css.

So why replicate awesome flash style stuff with css? The primary reason I can think of is search engines. Content wrapped up in a flash site can't get indexed. Beyond this there are times you just cant justify flash, but some creative css would more then be acceptable.

I believe the real message her is to think. Those of us who use css more then anything really need to step back and consider some creative uses of the tools we have become accustomed to.

I must offer my one complaint though. Navigation such as this is generally more difficult to use and often requires a learning process to discover how the site is navigated. While this is great for creating atmosphere, and often times earning the admiration of visitors, it isn't with out a cost. Those requiring screen readers and the like will have a hard time with the site, so carefully consider your audience before you set out on this path. The only other down side is that sometimes we are just impatient, and wacky navigation can just drive us nuts. So make it cleaver, but keep it clear so we don't get confused and give up.

Sample Usage

Comments

Harmony

3/29/2006 2:37:15 PM

Thanks Patrick, some excellent points and sites there :) I'm really impressed with - http://www.maxd.co.uk/ - the combination of unique navigation and having everything on one page makes you feel very in control of your visit to that site which can only be good for site visitors!

The trees are also very clever and intrigued me enough to keep clicking links - http://www.sonjamueller.org/

A site like this one though - http://www.saturate.nu/ - I wouldn't care what they were selling, with nav like that I got impatient within 30 seconds and closed the window.

Those of us who use css more then anything really need to step back and consider some creative uses of the tools we have become accustomed to.

Absolutely! In another way though we seem to be stuck with the box model a bit because of usability requirements - users now look for the logo in the top left corner, expect navigation across the top, etc, - it seems to be becoming harder to be creative with web design without sacrificing some amount of usability (damn you tables! if only css had come first). I think your point is very valid though, if nothing else we should be thinking outside the box, even if we can only use it on artistic websites while corporations and government sites still require box-model layouts.

Steve

3/29/2006 4:02:25 PM

Interesting examples to illustrate the points made. However its amazing how many of those designers got caught up in being creative/clever and forgot usability concerns such as providing adequate contrast between text and background, providing readable font sizes, using layout organization to help the viewer visually group and find information, and loading information in a timely manner. So many were like going to see a movie whose budget was spent on special effects and the story was a mere afterthought.

Make a Comment:

All fields are required & all posts are hand moderated.

NAME:

E-MAIL: (not displayed publicly)

COMMENT:

HUMAN DETECTOR:

Table of Contents

Helpful Books

Atypical Navigation

Editions:

The Design Element

Sample Usage

Comments

Site Sponsors

Site of the day