We were commisioned by FHV BBDO to develop a tablet website for Mercedes-Benz Premium using complex illustrations and animations. We are very proud to announce that the project was awarded:

Mobile of the day

Showrooms

The tablets are also being used as a sales device for the car salesmen in the showrooms.

The devil is in the detail

The challenge was to create a one-page scrollable website that would work smooth and seamless on tablets, combining complex illustrations, gradients, alpha channel backgrounds and animations with touch optimised controls.

Small details were added to the illustrations to acheive the desired look and feel. E.g. the Mercedes transforms from dirty to clean in the car wash.

The illustrations were slightly tweaked, color corrected and a subtle grain was added to add more depth and make the colors and gradients feel more natural and analog.

Animations

Most of the magic is being performed by the skrollr jQuery plugin. We faced a small challenge in "timing" the animations to each other in such a way that alterations and additions could still be done without a hassle. To realize this we built a small frame using JavaScript that makes use of skrollr's constants to create layered scenes.

Website performance turned out to be an even bigger challenge, especially with tablet support as an important requirement. Some of the sequences that involved transparent imagery brought performance down to the point that alternatives were required. Luckily skrollr offers the means to add custom built easing functions which enabled us to successfully recreate these sequenced animations programmatically using sine functions.

Screens

A selection of pages from the website.