Animating a P&O Wave (or How to use Peanut Oil in a Website).

November 30, 2009

Last week we launched the new P&O Website [cue the trumpets because it took a year!] Whilst e-commerce websites aren’t generally considered somewhere you can ‘get creative’ we decided this should be an interesting challenge …which it was. When we did our early research we found some very interesting insight about that “twilight zone” where air meets water (see images below). We realised there was something here to play with and decided that if we could execute it well enough it could be an important design feature on the site… but execute it poorly and it would just look tacky. (Let us know what you think).

Above Video: The making of the wave: http://www.youtube.com/watch?v=NWCsS7W3yQk

Creating a ‘wave’ was not as simple as we first thought. Animated tests trying to simulate the wave in 3D or in Flash just didn’t cut it. We wanted something which felt as realistic as possible. We next moved to the real world but equally found that water on its own did not work well at all when we filmed it. To cut a very long story short we finally made a glass tank (very lo-tech – a vase with half a CD case fixed using a glue gun) and filled it with 50% water (tinted blue with food dye) and 50% clear peanut oil. The two substances allowed us to create and film the illusion of water moving very realistically but a much slower down rate. Some After Effects magic with the raw film and we now have a looped, low bandwidth wave for the P&O site.

image 
Final Website above: http://www.pocruises.com.au/Pages/default.aspx

image

Above: During design research we found a ton of wonderful images which were part of the inspiration for the final wave.

image

Above: Other features in the site include “Full Screen Experiences” that work without leaving the current page you are on. It’s slightly buried but an unusual feature – especially for an ecom website.

Posted by

 ~@eunmac