“It takes over 1.5 million barrels of oil to manufacture a year's supply of bottled water. That's enough oil to fuel 100 000 cars!"

That shocking fact is the preamble to this week's Site of Note. It isn't everyday that I can don my “green jacket” of environmental activism AND proclaim the pleasing aesthetics of a website in one fell swoop, so I am going to take full advantage of the situation.

The Site of Note that has afforded me this fantastic opportunity is Waterlife. It is the Web version of the Waterlife movie, which tells the story of “the last great supply of fresh drinking water on earth”.

The welcome screen offers the viewer a pleasing underwater scene, with soft corpuscular rays breaking through the surface of this digitally created water-surface. I immediately noticed that there is a faint honeycomb grid detail forming part of this image - adding a molecular or biological touch.

When you enter the main site, you are presented with an animation of small thumbnails gathering from all angles, which group together in a formation that represents the Great Lakes of Canada. This formation responds in languid, smooth 3D motions to your mouse movements, again reinforcing the liquid theme of the entire site.

This thumbnail formation is in actual fact, part of the excellent navigation system of the site. The various thumbnails link through to the relevant topics that the site covers. There are three different navigation systems available on the site:

1. The Thumbnail Formation
2. Left Side Navigation
3. Footer Navigation

The left side navigation, the most conservative of the three navigation options, is accessible by hovering over the "Water is >" heading.

The footer navigation is the grid of blue lines at the bottom of the page, which ends in 5 buttons. These buttons allow you to: expand to full-screen, control the volume level, go back to the main page and move forward and backwards through the site in a linear fashion. This grid of blue lines responds to user interaction in a smooth wave-like animation.

What interests me, is that all three navigation options are visually linked. Hovering over the footer navigation triggers the corresponding thumbnail animation in the Great Lakes formation. Hovering over an item in the left side navigation triggers the animation of the corresponding choices in the other two navigation systems.

The overall design of the site is an excellent example of the well-known design principle of  “form follows function” - a design principal that I would love to see more of in the world of Web design. Basically, if an object has to perform a certain function, its design must support that function to the fullest possible extent.

The designers of Waterlife clearly understood this principle. Choosing one of the navigation options will trigger an animation which reshuffles the Great Lakes thumbnails into a new formation that represents the topic that you have chosen. For instance, choosing poison will cause the thumbnails to gather in the representation of a skull-and-crossbones.

The cherry on the top, or the final flourish for me is the fact that the site has a background soundtrack, crafted by the master of ambient music, the man who helped shape the music of bands such as Talking Heads, U2, James and Coldplay - Mr. Brian Eno. It isn't everyday that a site's background music has been crafted by a world-famous musician!

I urge you to visit the site, not only because it is beautifully and carefully crafted but because it has a very important message to convey, which everyone should heed. 

Also check out:

• A New Drop Down Select Design
• Trend of Note: Minimalism
• Website Usability: Show Me the Usability
• The Importance of Goals Setting for Web Design