Animade: Animation and Character

Don’t miss your chance to enter HOW’s biggest and longest-running competition of the year! The HOW International Design Awards! Best of Show winners receive a 2-page spread in the magazine and a free trip to HOW Design Live 2017 in Chicago!

I regularly find myself scrolling through the endless pages of Adobe’s Behance website. During one of my recent trips down the designy rabbit hole, I came across a little interactive web game called The Lost Sloth. The unique typeface and color palette initially caught my attention, but once I clicked for more info it was the adorable animation that made me pause.

A sloth swings back and forth on the crossbar of a capital H, while the surrounding letters and clouds twitch and shake, bringing the title to life. Scroll down and you’re greeted by former Animade intern Bee Grandinetti’s words:

“During my internship at Animade, the guys teamed up me and the Austrian prodigy Max Stoiber on an intern jam.

We had to come up with an interactive toy in about 2 weeks, and this is the outcome of those great days 🙂

I’ve done the illustrations and animation and Max did his magic on the code!

You can play it HERE.

Of course I clicked.

animation sloth2

The game is simple—use your mouse’s x-ray powers to find the lost sloth hiding among the buildings. The art, by comparison, is pleasantly intricate. Pink and purple building exteriors on a minty green background hide the commotion going on inside. A giraffe watches television, Santa Claus is eating presents, Finn the Human and Lumpy Space Princess hang out near the “propz” building.

I found my pole dancing sloth and immediately needed to know more about the team behind this masterpiece.

animation pole


Meet Animade—a “forward-thinking animation studio based in London.”

The firm began as an animation blog created by cofounder Tom Judd as an inspiration tool while studying at the Royal College of Art.

“… Tom and I have known each other for a very long time indeed—we were in the same class at secondary school, so we’ve sat next to each other on and off for more than 20 years,” shares co-founder and director James Chambers.


How would you describe what Animade does?

Amy Knight, Head of Marketing: … We make everything from TV adverts and social campaigns to web-toys, games and apps.

We like to play with the boundaries between animation and code, and our fondness for experimentation has resulted in numerous studio projects like Party Pooper, frankenSim and Like 3D.

animation 606d0d4f-a27f-4de1-a90d-05ab954307e4animation twitter

It’s also really important to us that we stay involved in the creative community; since Animade started life as an animation blog, it’s always been at the heart of who we are and what we do. We hold talks and events, and make services for creatives like our web-based tool for simpler storyboarding, Boords.

We believe it’s the little details that make all the difference in bringing out the personality of a project. Whether we’re working on a project for clients like Facebook, Airbnb or IBM, or one of our internal experiments, all our work shares one key ingredient: character!

Is there are philosophy or a driving force behind the work you do?

Chambers: We’re big believers in the power of character, and try to find ways of incorporating this into our work regardless of the medium, be it animated or digital. For us, character has been integral to our most successful work. We also feel having a collaborative culture, with animators and illustrators working alongside designers and developers, is vital to discover what character means in a changing creative landscape.


What does your typical workflow look like from project idea to storyboarding to execution?

Tom Judd, Co-founder and Director: Each project brings a new challenge, which means a slightly tailored approach to each project. That being said we do have a very solid framework that we use to navigate the production process. A typical project might pan out a little something like this…

 Once a scope of work is agreed, we like to start with a creative workshop. We brainstorm ideas for visual concepts and scamp up storyboards.

 Then we move into style and storyboard creation. This gives the client a clear indication of what their film will look like and what happens in it. For storyboarding, we draw up rough frames of the film and use our homemade storyboarding app Boords to produce a client-ready PDF.


Once these are both agreed we time the frames out, creating a boardamatic. Sometimes this will involve laying a guide voiceover against it. This allows the client to see the pace and flow of the film, and to provide feedback before we hit the time-heavy animation production.

 If the job demands a more detailed guide, we produce an animatic. Halfway between a boardamatic and the final film, this gives a better idea of transitions, camera moves and key movements in the film.

With this all given the thumbs-up from the client we begin the animation process. The magic happens here and can vary hugely depending on the style and technique that the brief has determined.

 We provide WIP (work in progress) versions of the film at a number of stages throughout animation production. This gives the client a chance to see how it’s coming together.

 With the final cut approved we head into the final stretch. Sound is mixed down and the final render is run out. This is then sent to the happy client!

 We like to finish a project with a client-facing retrospective if possible. This involves an informal chat about the project and how it all went for everyone. The Post-It notes usually come out and we brainstorm what we loved and also what we felt could be improved. This candid sharing of experience from both our team and that of the client helps us to forge strong and trusting relationships, which in turn provide the creative environment where the best projects can thrive.
animation Like 3D GIF

How involved are your clients with the animation process?

Laura Darby, Senior Project Manager: We like to encourage as much collaboration as possible with our clients. Time permitting, we love to kick things off with the client’s team upfront of any production by holding a meeting at our studios, where they can meet the team who will be working on their project. We thrash around initial ideas, encouraging our clients to ask questions about our process. We also discuss what we think will work best creatively for their project, considering any wider aspects of the campaign.

Once we’re into the full swing of things, we keep in constant contact with the client to share and discuss creative work—and any of their feedback that comes along the way. We find that the deepest discussions occur alongside the design process, as this is when we’re pinning down the whole look and feel of the piece before making everything move beautifully. 

What has been the most difficult project you’ve worked on? Why?

Judd: IBM Research was one of last year’s most demanding projects for us. It comprised four films, with three minutes of animation produced in a range of styles from hand-drawn to paper-cut stop motion. The different styles had to sit together with an aesthetic cohesion to allow the films’ chapters to flow seamlessly together.

All of this on top of the sheer scale of production and tight deadline turned our studio into a creative vortex. It was tricky but also very fun to be a part of, and as a studio we were left with a piece of work to be truly proud of.

What is the most innovative technique you have tried?

Ed Barrett, Creative Director: As a team we get hugely excited about any opportunity to innovate. Internal conversations, technical hurdles and experimentation often results in an innovative new project or tool. Currently we’re invested in maintaining our characterful animation in the online/digital space; finding ways to use familiar workflows but export code that works within HTML 5.

 So if I had to choose an example I’d say Party Pooper, our latest large-scale internal project. We created it using Bodymovin for After Effects, enabling us to directly export our animation as SVGs. It kept file sizes relatively low and assets scalable, while at the same time maintaining a high fidelity of character animation.

Do you have any advice for young animators looking to get involved with a firm like yours?

Barrett: Be positive and proactive. Get excited about your work, share it and invite criticism. The more you do the better you’ll be.

 Your productivity will create ripples throughout the creative ‘pool’ that others will notice and talk about. The more people who know you and your work, the more likely you are to end up where you want to be.

animation Boords promo GIF

animation pizza_16-9

Master the art of motion graphics in HOW Design University’s online course on Adobe After Effects. In it, you’ll learn: 

  • How to create an After Effects composition on a timeline
  • How to use keyframes and anchor points
  • How to apply transform properties: Anchor Point, Position, Scale, Rotation, and Opacity
  • How to use kinds of interpolation: linear, Bezier, and hold
  • How to create and import masks, layer masks, and backgrounds from Photoshop
  • … and more. Learn more and register here.