Innovative Design Solutions: Navigation and Content

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

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.
Stonebriar Navigation

Coda: One Window Web Development

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.

coda navigation

Audi of America: TT Flash Microsite

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.

audi navigation

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.

Related Articles

A person with short hair in a hoodie facing away in a computer chair at a desk with a view through two large windows with the lingering remains of light after a sunset. The desk has a lamp that is off and some papers. The edges of a keyboard and a computer monitor showing past the sides of the person in the chair. Case Studies

5 Key Findings from a Recent Client Usability Study

Introduction Good usability within a website means that the user is able to use the interface to complete her/his tasks quickly and successfully. It is...

Online Marketing

Key Considerations for Investor Relations Websites

Creating an Investor Relations page that grabs the attention of various shareholders and instills confidence in your business is a crucial part of your company’s...

User Experience

Human-Centered Web Design Begins with UX Research

At PINT, one of the first things we do when we start a web design project is determine what kind of design and marketing research...