In this motion design module, we learned the skills and techniques needed to create an animated UI element. We then used this to create our own looping user interface animation.
Reading and Writing
In Chapter 10 of Animated Storytelling by Liz Blazer, a number of tips for the animation process are outlined. First, create and complete a production calendar backwards from the final delivery date, post-production, production, and pre-production steps. Make sure there is enough time for each phase. Next, check to see that everything is working properly and if there are any new updates. Make sure to save early versions and frequently, create simple names for your files, and get the largest hard drive you can afford and back up your work at the end of each day. Now, let’s get animating by getting accustomed to the intricacies of the medium. Here’s how:
- Start Easy, Gain Confidence: Start by animating your project’s easiest scene, this will help you get moving and build your confidence. Continue this process.
- Break Up the Tough Ones: Animation sequences are mini-story arcs with beginnings, middles, and ends. Work on these pieces one by one.
- No Shot Left Behind: Edit to avoid animating what is not necessary. Ask yourself if the shot is worth it story wise and if so, how long does it really have to be?
When it’s time to animate, things change, so planning out your sequences in more detail will help you. Sketch the “key poses” of your characters, their basic positions and movements. It’s best to include backgrounds, props, and even text and logos that will share the screen as well. Don’t forget the “before and after” principles of anticipation and follow through to make your animation feel natural. Next, compose directional movement because animated objects move along an invisible directional path. There are four categories: horizontal, vertical, diagonal, and circular. Be mindful of the directional movement of all objects in your sequences. Chart the path of your project’s directional movement before animating by drawing simple lines on each main frame to show the general path that your objects will follow. Finally, decentralize and mix it up. Consult your storyboards and double-check that your shots are as interesting as they can be by following the fundamentals of visual storytelling:
- Get Out of The Center: Don’t position the subject in the center of your frame all the time and make sure there aren’t too many center-focused compositions each shot. Mix it up or risk having dull sequences.
- Mix Up Shot Length: Mix up your shot lengths as too many with similar lengths will bore your viewers. This will also help communicate the major ideas in the story.
- Mix Up Shot Timing: Vary the timing of shots so that the sequences move at different paces. This will provide a less predictable visual experience.
Remember to “consider the blur” to add more realistic depth to your animation since everything is in focus all the time, which can be harsh and lack focal points. This can also help de-emphasize areas of your composition that aren’t important to the scene. Last but not least, now that we have realized our story can evolve, so can our sound. Be flexible with your soundtrack because sound holds great power in the story’s emotional resonance. Allow your sounds to alter your sequences and elevate storytelling opportunities. Be careful that your sound doesn’t do all the work though. Once in a while, press mute to see how your shots play out with no sound and see if your subject is doing the acting or if it’s just the sound.
Research to Inform
For inspiration, we had to find a few examples of user interface animations that are both creative and useful. Here are some of my favorite examples that I came across during my search:
I chose to showcase these examples because the interface motions and looping animations are smooth, creative, and useful. The download animation and chat bot examples are my favorites. They are simple, effective, and nicely loop for a seamless experience. The idea of transforming the parts of the download arrow into separate indicators, one for the download progress and the other as a simple animation, is so clever. The chat bot one is cute, simple, and helpful. The concept of a chat interface assisted by a bot is clearly indicated.
Create
I created a swipe user interface animation that starts by indicating to the user to swipe right. The swipe motion is then animated with an unlock sound. To make it seamlessly loop, it swipes back with a lock sound.
To be able to view the swipe user interface animation as a loop, right click on the video player and click the loop option to make the video repeat continuously.