Innovative Design Solutions: Navigation and Content

As designers, we’re frequently challenged with concepting unique navigation solutions. Often times it’s a situation where the content would normally exceed the space allotted. Luckily, great ideas stem from these constraints and with an abundance of JavaScript libraries such as the YUI, MooTools, and Scriptaculous, web designers are able to push the envelope. Below is a small sampling of some progressive techniques.

Stonebriar Community Church
http://www.stonebriar.org/

Once clicked, the “Ministry Index” tab extends down to reveal a 5 column listing of links. This solution allows for a large amount of information to be available from such a small initial footprint from any page in the site.

I wouldn’t recommend placing your main navigation in this area, but it’s perfect for secondary items (like a Ministry Index). Other potential uses include login forms, control panels and site maps.

Coda: One Window Web Development
http://www.panic.com/coda/

The 7 buttons above the content area “slide” the content from side to side. This elegant solution allows 7 blocks of content to fit within one central area while providing some beautiful eye candy as it walks you through the features. You can also navigate using the side arrows.

This flashiness is perfect for the site’s intended audience as well (web-savvy designers and coders on Mac platforms). The transitions are a refreshing change from the typical tab-based solution.

Audi of America: TT Flash Microsite
http://microsites.audiusa.com/AudiTT/index.html?language=en

Upon clicking “Menu”, this Flash site launches a navigation system resembling a site map flowchart. This allows you to access any page within the site immediately while conveniently marking which page and section you’re currently on.

Given the site’s limited amount of pages and content (after all it’s a microsite), this solution works rather well. It’d be interesting to see this solution applied to an xhtml/css based site of similar scale.

When pushing the envelope, it’s very important to respect the conventions of the web. Be aware of the usability and accessibility issues with your design and be sure to test your solution against your intended browsers and platforms.