UX & Design
Si symbol type animated
- UX & Design

Adventures in Animation Part II

Jack InnesBy Jack Innes

It’s been about a year since our previous blog post when we first experimented with After Effects and began making simple gifs. We’ve learned a lot since then and explored different techniques and motion principles to produce animated designs for in-house and client projects.

Unfortunately, as is often the way, not all of these concepts saw the light of day. We felt that a new blog post was a great opportunity to share our progress and to provide some helpful advice and tips for anybody who might be interested in improving their design and animation skills.

si digital loading screen animation on an iPhone

Presented in a skewed iPhone mockup, this unused animation was created by adjusting path keyframes to give the illusion of flowing liquid filling the screen, revealing the Si logo.

old treasury animation

Our office, the Old Treasury in Southsea. This was created while experimenting with basic transformations and the trim paths effect.

Lab cost man blasting nerf gun

At the beginning of the year we decided to produce a short animated explainer video as part of our recruitment campaign to find new Si team members. Unfortunately client work took priority over this side project and so it was never quite finished. Looking back on the video now there is a lot we would have changed in terms of illustration style and motion, however it was a vital piece of work when it came to learning new techniques and discovering our animation capabilities.

Rosie the dog character animation

Working on developing character animation skills using the extremely useful RubberHose plugin by BattleAxe. It’s by far the fastest and easiest way to rig and animate a character. This initial quick experiment was based on our office pup, Rosie.

Character animation of Santa dancing

A lot of fun (and frustration) was had illustrating and animating this dancing Santa, again using the RubberHose rigging plugin.

Animating S i

This animation is part of an ongoing series of lettering exploration surrounding our acronym, Si – developer Danny then proceeded to magically recreate it using 100% code.

Screaming Frog's, frog character animated

Screaming Frog was a recent project that gave us the perfect opportunity to put our new animation skills to use creating a unique, responsive and engaging user experience. We transformed Screaming Frog’s previously unconventional story page into a beautiful, animated timeline showing the story of how the company started, grew and rose to the top of the industry.

We spent a lot of time planning what would be animated, keeping file sizes and performance in mind. We began by brainstorming initial ideas and producing sketches, followed by illustrating and animating multiple iterations to ensure we had created something that really captured the heart of the business.

Animating ping pong paddle with ball bouncing

Another piece of realistic motion experimentation, this was an interesting one. The paddle was designed in Illustrator to give a false 3D perspective. Add in a little bit of rotation and some more RubberHose magic and you’ve got yourself a looping ping pong paddle.

Animating open device lab

Our recent studio extension has provided not only the space for our UX Lab, but also the perfect opportunity to tick off one of the biggest requests from the designers and developers. This morphing device animation was used as promotional material for our very own Open Device Lab.

Service images describing the Si digital process

We recently streamlined our Services page and produced a series of subtle animated illustrations to accompany each service page. These were a lot a fun to make!

Final thoughts? Learning a new piece of software is hard. Animation is really hard. We’ve learned a lot in the past year, and are still learning new things each time we create a new composition. The key is to practice, practice, practice. Got an idea for a silly little gif? Animate it! Animate all the things!

Soon you’ll be watching a TV advert and think “I bet I could recreate that in After Effects”.

Get started

Plan your project