Sequential Pixel

Digital Inspiration for a Creative World

Content/Sidebar/Sidebar

Animation Best Practices

The Animation Handbook, By InVision

I’ve been using InVision for the past several years now at an enterprise level and am always amazed by the quality of content they put out for their customers. The Animation Handbook, a free guide for understanding UI animation, is no different in that regard.

My animation needs have ranged from loader animations to video prototypes, to actual clickthrough examples of how a UI works for better shared understanding across teams. I found this handbook particularly useful for several reasons, one of which being the great examples they cite, but more than that it was about measuring the value of the animation to determine ROI.

When it comes to the Business value of animation, the book references Headspace and the success they’ve had with their animations being used to note progress within their mobile app. As users progress, additional animations are unlocked. This is something my team and I have incorporated into one of our own applications to track Rewards, however, they take it a step further by sharing the animations on youtube as mini advertisements for the application. Watching the animation compels people to download the app because they see the value in it. This allows HEadspace to track and measure as they would any other marketing channel. Not only is it a wonderful way to provide multiple avenues for engagement, but it also can prove value through attribution.

Metrics are a huge part of anyone’s repertoire these days, and the Animation Handbook doesn’t disappoint there. It touches upon qualitative data, asking the right questions including collecting people’s experiences and feelings towards the offerings.

Take a look and learn for yourself how you can differentiate with animation. You won’t be disappointed. More amazing articles on animation can be found on the Design Better website as well.

Cartoon Animator 4

Screenshot of the Reallusion website featuring Cartoon Animator 4

Several years ago I purchased CrazyTalk Animator and while I had fun using it, I was never really able to put it to practical use. With the release of Cartoon Animator 4, Reallusion is hoping to make authoring animated characters even more robust.

Taking a quick peek at a recent CreativeBloq review would lead you to believe that this tool is the easiest tool on the market for round-trip design production. Having seen several applications claim this over the years including Adobe’s own Character animator, I was interested to see how the product has evolved.

With a more advanced set of features the product is priced at a reasonable $99 for the Pro version. CrazyTalk Animator also came in two different flavors as does this one (Pipeline and Pro), with the Pro being fine for individuals looking to extend Photoshop, Clip-Studio Paint, or Affinity Designer.

The “killer features” or what makes this product unique in my mind are the dead simple Bones effects to control character movement and the Z-depth control, enabling you to do some pretty sophisticated parallax scrolling with it. The Bones tool comes with varios presets for how humanoid characters would behave, which saves a ton of time

Cartoon Animator 4 User Interface

And with the Z-depth feature, you can explode out the various sections of a background scene into its respective layers, affording some really fun and interesting effects.

Layered background broken out into different sections using Cartoon Animator 4

While most of my work consists of UI animations and micro-interactions as of late, for content creators who are looking to extend their skillset into content publication via animation, Cartoon Animator 4 could be for them. They’ve got a trial on the website which is available for both Mac & PC.

CreativeBloq’s article is an “Advertisement feature” therefore take it with a grain of salt. I can say having used the earlier version of this product that it was easy to use, fun, and worked well with Photographs. I’m looking forward to giving the trial a try.

Drama, an All-in-one Design Tool

For UX designers today, there are a plethora of design tools that they can use to animate mobile interactions. It’s helpful to standardize on a short list of 2-3 that you will be using regularly in your workflow. For us on the mobile side, that has been Sketch, InVision, and some combo of After Effects, Principle, Flow, Keynote, and/or Anima.

Because there are so many options, it can be hard for upstart companies to stand out among the crowded marketplace. Drama, a new tool introduced by a company of the same name, bills itself as an all-in-one prototyping, animation & design tool.

On the surface, it would appear to have a lot in common with its brethren. You can see from the application environment that there appear to be screens/artboards that connect to one another with drivers that no doubt make up the interaction portion of the UI. There are about a half dozen example files you can download to get you started. With the exception of some 3D specific features, most showcase functionality we’ve grown accustomed to in mobile apps. They feel realistic and appropriate despite them being limited content-wise.

Example Drama Animation Tool Screens

A quick look at the feature set reveals that transitions are very similar to other animation applications in that you transition between scenes with a timeline editor. One of the more exciting things (and something I’ve grown to love about Keynote) is Magic Move, which auto-animates layers with the same name. This makes transitions incredibly easy. But don’t let the ease of use fool you, underneath the hood of this app hides a powerful animation engine that supports 3D layers, a version control system that looks easy to use, and some truly elegant micro-interaction ability that provide seamless integration with your iPhone via mirroring. Features shown on cards from the Drama application

The software runs $9 a month with a 14-day trial. If you’ve got some time, it’d be worth taking a look to see if it fits into your workflow. I’m imagining if you’re looking for something that does a bit of everything and aren’t already heavily invested in other tools, this could be the solution for you.

Mobile UI Animation as a Driver to Better Experiences

Woman holding a phone with her left hand and tapping with her right

The thing I appreciate most about Nick Babich’s article on UX Planet entitled “3 Key Uses for Animation in Mobile UI Design” is the liberal use of example animations as a way to communicate core concepts.

When talking about system status, he’s clear to delineate between loaders, refreshes, and notifications – all important aspects for users to understand that the system is still working. There’s the notion of perceived time that Babich seems to capture well with his reference to creative progress indicators.

With regard to Navigations & Transitions, he again brings examples of complementary design, transport effects, relationships. One thing to be mindful of with transitions is Fitt’s Law, which describes (among other things) elements being within the same range as one another. His explanations do a nice job here of that.

And finally, give the user control by providing feedback. While are mobile touchscreens are an abstracted view of the physical world, we should expect to have immediate and responsive feedback that empowers the user and gives them confidence.

Take a look at Nick’s other work and make sure you clap back for all of the great articles he’s put into this original post. For a deeper dive you can also reference some of the tools and tutorials links as well.

This is a Sample Post With an Unordered List

This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.

  • Unordered list item #1
  • Unordered list item #2
  • Unordered list item #3
  • Unordered list item #4
  • Unordered list item #5

This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.

This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind. This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.