Animating User Interfaces
A while back, I explored the creative process of developing a working mobile application prototype. I developed a prototype attempting to improve the tourism efforts of New Bedford, Massachusetts.
While the prototype functions well, I knew it could become much stronger and experimented with user interface animations. I created two different animations in the animation above: a loading wheel and an animated page wipe.
Illustrator Elements
In Adobe Illustrator, I created an animated loading wheel reminiscent of a captain’s ship wheel. I thought it would be a unique touch to create a loading wheel that fully supported and communicated the maritime story of New Bedford.
The second animation that I wanted to develop included an animated wipe screen between pages. The wipe includes colorful bars and images of the New Bedford Fishing Trawlers. I used a photo featuring a New Bedford fishing trawler Buzzard’s Bay, to reference this element.
Animation
Once the Adobe Illustrator files were complete, I then imported and edited the user interface in Adobe After Effects. I stitched together the mockup pages of the application and then added the animated elements into the timeline. Using the parenting tools of Adobe After Effects proved to be an effective strategy, as it allowed all elements to follow one layer. Without this feature, I’d have to animate everything separately.
I also added some easing in the animations, included a mask that was the shape of an iPhone X, and animated the simulation of a user’s experience. Huge shout out to Dribbble user: Rajinder S. Gill for the free mockup of the iPhone X.
Inspiration
I am not a UX professional and haven’t spent much time animating user interfaces. I found this experiment to be exciting and became elated when it all worked together. However, there were times where I envisioned the wipe much differently than how it was animated.
I initially wanted to customize each animated swipe, including an animated flock of seagulls, an animated whale pod, and animating flying forks and knives for the food components of the application. However, I knew time was of the essence and reduced those ambitions.
Thankfully, I’m not the first to animate user interfaces, and many have pioneered the craft. The following five animated interfaces proved to be extremely helpful in inspiring my animated user interface.
(Side note, if you’re not part of the Dribbble community, you are missing out! It’s an incredible resource for designers, illustrators, and animators. I love this community so much.)
Other Inspiration
I’ve been reviewing animator and author Liz Blazer’s book Animated Storytelling this month. I’m excited to be nearly complete with the book and finally approached the section in the book titled “Animate!” In this chapter, Liz gives guidelines for animators to actually begin animating.
Liz breaks down the technology needed for animating a project, including developing a production calendar, developing a variety of different shots, and constantly saving and backing up animation files. In the animation process, she advocates for animators to begin with the easy scenes and break down difficult scenes into smaller sections. She also stresses concise editing before animation to avoid running into a problem with the time and experience needed for production.
Movement is key in animation, and Liz discusses ways to effectively animate scenes, including posing characters to match the mood and theme of your story and using horizontal, vertical, diagonal, and circular movement to build anticipation and follow-through for characters. She ends her discussion with recording and editing sound to match the animated aspects of the story.
