UI Design Animation Process

I´m beginning a series about animation, it will cover animation process, software, recommendations, etc., both for video, demos, HTML or Apps.

Before starting any project I would answer at least three questions

First question: Where will be your animation displayed?

There are many cases: It is not the same to make some demos for a pitch or to upload materials to Dribbble than to prepare microinteractions for an App, make a video tutorial, make an Ad, etc.

The point here is to know where will your work be displayed, because it will determine the software and probably the process. Could be web, Apps, tv, video, special dashboards, Ad billboards, etc.

Second: How to build it? Which software are going to use?

Once you have the answer for the display, you should think about how will you do it. You could go to production flow (question three) before this one, it is up to you.

For example if you are making a TV Spot you could work with Final Cut Pro, Adobe Premiere or Adobe After Effects. If you are making a demo for your portfolio perhaps you could use Flinto or Principle. Making and Ad? You can choose Google Web Designer, Adobe AnimateCC or just use code. Preparing microinteractions for a site? Probably the best would be to use CSS transitions.

The point here is not to sell and overpromise. So if you are working for a website probably a video showing the interaction is not the best, first you should talk to your developers just to see what can be done.

Three: What is your Production flow? What are the Phases?

This is also an open question, depends on you. In my case for example, I have like three phases which are: Sketching, drawing and animation. Pen and pencil is really important for me, much more since I move to UX.

Example: A demo of Ironhack UXUI course

This is a demo I made presenting pupils taking part in a course at Ironhack. This will be displayed just on web. I made it with Adobe AnimateCC in this first version. I think I will make the same with code (for example GSAP or similar libraries) and with Principle, so I can compare different results. I usedd canvas for an IPhone8.

Sketching

This is my initial though and it is about movement. Before anything I think in the movement: How is the transition? How long will it take to see all the animation? This is going to move as a carrusel, moving from left to right and showing different items. It will show one item at a time, I´m thinking about the rhythm of the animation.

Sketching animation movement.

Secondly I think about the item. Let´s say for example I have an animation of 10 items. In each item I will show a character and some text. I think about an animation showing my fellows from Ironhack Bootcamp. This way I will have for each item:

  • A character
  • A background (probably plain color)
  • A descriptive text
  • Maybe a second state for the character, so it´s not still
Sketching for the item.

How is the animation of each item going? Can go like this: The character comes up, then the text appears, there´s also a little animation (something funny I guess), and finally the character goes out, sliding to right or left. This will be the sequence of a character.

Sketching animation squence.

Now let´s think about all the characters. What elements can I introduce to keep attention of the user? I think about the 10 different characters and an element to make the animation friendly. This can be putting on a helmet on one´s character head, changing the hair style, make a character angry, etc.

Sketching characters animation.

Drawing/Designing

So I jump to Sketch and just draw, I am not an illustrator so that´s why I am using Avataaars from Paul Stanley. I have 10 characters and 20 artboards (initial and final state). Export it to InvisionApp and have like this:

Captions of final states for characters from InvisionApp

Then I go to build mode and download all the assets.

Here inVision Build Mode

The reason to do this: As I am animating with Adobe AnimateCC, and Sketch is not integrated with Adobe, I go to InvisionApp for the assets (I could have make the characters with Adobe Illustrator of course). Here goes my assets

Assets for the animation

Animating

Then move to AdobeAnimateCC and import all the assets. I am using Canvas and making a simple timeline, well maybe not so simple as I have 950 frames, almost 40 seconds. I have a background and layers for the elements coming in and out. Just playing with movement, opacity and filters.

The AnimateCC timeline animation.

As you know you can export this to code, you can see it here how the animation goes (Run Pen!):

Codepen for the animation.

Right now you should now that filter transitions with Adobe AnimateCC (CreateJS library) can be dangerous, in fact, they are not displayed once you transform it to code. If you compare this animation with a video exported from the same file, you will see the difference.

The video goes like this:

Video exported directly from Adobe AnimateCC.

So I should make the same with code or Principle, this way I can animate background.

Anyway it is amusing to make your fellows cry, dance, drink coffee, do the Indian, exploit the head of one with an apple, make your hair be eaten by a horse, convert one of them into Harry Potter, etc.

Used also some flaticon icons, here attribution: Cloud, bird, feather, tea cup, cactus, apple, helmet, magic wand, camera, horse, UK flag, and pencil.

Like what you read? Give fernandocomet a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.