UXDE dot Net

The Costa Coffee Experience

By -

We’re big fans of sideways scrolling parallax sites, and we recently came across this example from Costa Coffee that examines the overall Costa experience – from their stores to how they get their coffee beans and a lot more.

In terms of animation, design and concept, this interactive piece is nothing short of superb – the illustrations are extremely high quality and fit the concept beautifully, the animation is subtle yet engaging, and the flow and story to the piece works perfectly from beginning to end.

Where the piece falls down however is in the technical execution – I’m not sure if it’s a browser compatibility issue or just the sheer volume of information, illustration and animation the piece needs to load, but after numerous attempts we couldn’t get the piece to work properly on any browser (and we’ve got a very quick internet connection). In fact, I couldn’t even get pass the third slide on 9 out of 10 attempts, and the 10th attempt only got me to slide five before it crashed and reverted back to the initial loading screen.

It’s a real shame, because if it weren’t for the loading and technical issues, this would have been one of the best pieces of parallax design we’ve seen in quite a while. It is perhaps a pertinent lesson to anyone producing this kind of content – just because you can think of a thousand different elements and pieces of information to add, doesn’t necessarily mean you should.

You can check out the full piece (if you can, Costa have promised updates), by clicking the image below:

2014-01-30_1025

 

John Pring

John is one of the editors of HTML5 Infographics and one of the people to get in touch with if you'd like your interactive piece or motion graphic featured on the site. He's particularly interested in sport, film, music and technology graphics.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>