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.
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
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.
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.
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:
Then I go to build mode and download all the assets.
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
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.
As you know you can export this to code, you can see it here how the animation goes (Run Pen!):
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:
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.
