Design projects

Animation work

Short but sweet
Duration
Aug 1, 2019
-
now
Aug 1, 2019
Type of project
Hobby
Tags
Design
Learnt skills
Adobe Illustrator
Bodymovin
Lottie
Adobe After Effects
Adobe Flash
Key work

Animation can take an user experience to the next level, especially when used in the context of apps and websites. As a UX Designer, I therefore found it necessary to expand my skills in this area. I started off with an animation course at the summer school of CREA, in Amsterdam. Here, we focussed on Adobe Flash, which is not a relevant application anymore. I then went on to teach myself Adobe After Effects. I've created several small animations that have been used in apps from MoveLab Studio.

Project images
No pictures found.
Method
A self-illustrated skeleton that I managed to move using Adobe Illustrator, Adobe After Effects and Bodymovin.
A work in progress, using multiple programs.

My biggest challenge concerning animation to date was creating explanatory animations for working out. I cannot write down too many details due to sensitive company information, but I was assigned to find out whether it was possible to create animations instead for working out. One of the pro's of using animation would be that it would not introduce inconsistencies such as video can, when the environment/lights/other factors differ.

My biggest challenge concerning animation to date was creating explanatory animations for working out. I cannot write down too many details due to sensitive company information, but I was assigned to find out whether it was possible to create animations instead for working out. One of the pro's of using animation would be that it would not introduce inconsistencies such as video can, when the environment/lights/other factors differ.

Separate body parts to create the skeleton.

I needed to create a skeleton of different body parts in separated layers in Adobe After Illustration, import this into Adobe After Effects and link all parts to the proper skeleton parts using this plugin. The different body parts could then be manipulated to move in a human-like manner using the plugin Bodymovin. Extremely interesting and fun to work with! After creating some movements, I used the Lottie plugin by AirBnB to create a JSON file (a very low in kB, text-based file) to import the animation into Android Studio, to be able to use it in the app. It took some trial and error and more plugins to get to the proper JSON file that could be understood by Android Studio, but I managed to get it to work! This felt like a huge victory, knowing that we could create these types of animations ourselves.

Video

The CREA animation course was a 5-day course where we'd work on different kind of animations (stop-motion, a flip-book, digitally drawn) from the morning until the end of the afternoon. In the end, everybody created one video completely made by them, which were strung together on a song. I opted for a psychedelic type of style that fitted the lyrics, although I have lost the original song that we used for it. It was a really fun experience to focus intensively on animation for a full week.  The animation was created using Adobe Flash and the Sketchbook drawing application. I drew all elements myself, using a tablet.

Conclusion and future plans

I've created several small animations, such as loaders, that are included in apps of MoveLab Studio. Other work has been done just for fun, such as some animations that can be found on this website. I would love to do more animation work than I am doing currently! I really enjoy seeing work from different applications (Illustrator, After Effects, etc) and plugins come together to create a moving element in an app or website, that elevates an user experience.