Advertising / Digital / Social

Technology / Innovation / Interactive

When Design and Front End Development collaborate, they make beautiful stuff.

4 years ago, Written by , Posted in Uncategorized
Screen Shot 2015-08-28 at 9.55.04 am

Thought I’d share these nice animation examples on sites I’ve seen recently, and my advice on how to produce these. It’s amazing what you can do to when you encourage your teams to work closely together.

McWhopper campaign site
The campaign microsite that’s got everyone talking. Without even knowing them, I’m really proud of the team on this project! They did an amazing job, the site looks so clean and fun, and you can tell they worked really closely to get this right. Some lovely parallax animations here. Very nicely done.

Rally Interactive
Absolutely love this animated ribbon menu – you can pull left and right, or scroll down to view page content. Some nice simple parallax scrolling animations here.

This site is hugely over the top with the prism and UX in general, but when you get past that, there’s some interesting UI and transition/animation examples.

Garden Studio
Beautiful parallax scrolling, just a lovely simple touch without being overwhelming. Love that you can scroll backwards and it reverses the animation.

Love & Wine
This is a super simple, potentially tacked on approach, but at the end of the day, it’s still better than a static, lifeless site.

When executed properly, animation isn’t just a tool for visual embellishment, but can help the brain understand cause and effect in an interface.

As a Producer, the key to getting these kinds of outputs is to facilitate collaboration between Designers and Front End Devs from the very start of the project. Animations and transitions should be something you put forward from the scoping phase. You should have approved budget to be able to do this and enough allocated time in your project plan.

It should never be something that’s tacked on at the end of the project. Too often it’s an afterthought, or even non-existent. As a Producer, it’s your responsibility to ensure that the allocated time on front end animation isn’t cropped short due to lost time early in the project. Far too often, being at the tail end of any project, testing and front end development is compromised which completely kills the output.

To create something that everyone is proud of, you need to cover your ass and work your timings right. Always ensure there’s a nice big buffer worked into Design and Front end, otherwise you will shoot yourself in the foot, end up producing just ‘another site’ that you could have done so much better, and of course the job won’t be profitable.. And that’s never a good thing.

Of course this all sounds so easy, but when you’re juggling 15 other projects, understandably, these things get pushed to the bottom of the priorities list. But when it comes to launch, that extra work really add so much to the output. I think to make something you’re really proud of, it’s worth the extra effort. Don’t you?

Interface usability
A very interesting read (with examples) on interface usability, and how it can improved with animation.