Animation day

It was animation day on the 28th October so to celebrate the day, we created a short blog about different animation styles with some helpful tips in trying this technique and how they can benefit your marketing strategy.

UI Animation

Animation in User Interfaces has become increasingly more popular even within the current trend for simple, flat, clean designs. UI animations on a site or App can make the design really stand out from the competition. It encourages scrolling, adds visual hierarchy and adds dynamic stylish transitions within sections.

If executed correctly they aid the UX by leading the visitors and revealing the functionality of the application in a subtle way. If they always have a purpose, user engagement will increase.

Logo Animation

A logo is the heart of brand identity and an animated logo is a modern and dynamic way to showcase your brand and bring to life your personality. An animated logo can give the viewer a more detailed explanation of the nature of a business than a static logo can. The trick is to keep it short, just a few seconds. You are not after a full length movie, just enough to draw attention to your logo and build brand awareness.

CSS Animation

GIF animations were revolutionary in web design, but nowadays, gifs can be heavy and limiting in colour palettes. Next came Flash, again not well optimised and CPU hungry, plus obvious issues of playing flash on particular mobile devices. Nowadays the best solution is accomplished with HTML5, CCS3 and Javascript. Executed well across all modern browsers and devices and keeps load times to a minimum.

Character Animation

Character animation is a specialized area of animation that involves bringing animated characters to life. The problem is, we all observe people on a daily basis, so character animation has to mimic movements precisely; a bad walk cycle, an incorrect facial expression, an unnatural movement can kill the effect.

To mimic a character effectively, you need to understand their intent, rig simply for fluid movement, form key poses first and focus on eye movement. Best advice to give, film a character performing that motion and you'll see all the little details that you subconsciously didn't notice in your day to day life.

Rotoscope Animation

Rotoscoping is an animation technique of tracing over a moving picture frame by frame to reproduce an action; a technique that goes back to the early days of cinema. Similar to stop motion, it can be a slow and painstaking process, compared to more modern animation techniques, but the results can be truly outstanding. Although more recent software, such as After Effects, Nuke, Smoke, makes this process easier than when Disney was pioneering, the same rule applies;

the more time and effort put into rotoscoping, the better the results. Find the most detailed frame and start there, play the clip and examine, to make sure you get a true sense of how the mask should be animated, use as few points as possible in the masking and don't try to mask an entire subject with one mask, use multiple masks to focus on that element.

Kinetic Text Animation

The power of the written word is strong and kinetic text is an engaging way of delivering text information in a visual way whilst cutting through the white noise. As the messaging can be intense, it is definitely worth keeping kinetic text animations short to stop the audience's mind wandering. Use different typefaces, weighting and fonts to enhance the messaging; after all, people can only skim kinetic text.

Stop Motion

Dating back over 100 years, stop motion animation is the original animated film technique. Stop motion is the process of moving objects in small increments and photographing each frame to portray motion. The technique is still widely used today alongside more modern technology.