Interface Motion
Reading
You might be thinking, "I've done all of this planning for my animation; what could go wrong?" Unfortunately, anything could still go wrong- Murphy's law doesn't only apply in the physical world. You have created a beautiful menagerie of elements, characters, backgrounds, etc., and each of those is perfect- on its own. But, put together those beautiful pieces may not cooperate as well as you hoped. Here are some tips on keeping your project moving from prior animators who have faced every obstacle unimaginable.
You have to start somewhere.
It seems logical to start at the beginning. However, many animators have discovered a tried-and-true hack to get your project moving: begin with the most fun or simplest sequence in your project. Then, move from the easiest to the next easiest until you've broken into your most complex scenes. Now, you've already completed several of your sequences, so you have no reason to quit.
It's the bare necessities.
Every animator will tell an entire day of work could result in only a few seconds of animation, so keep your scenes to the minimum. If a sequence doesn't add to your story, get rid of it. Don't waste precious time on anything that won't help your storyline progress.
Technical difficulties
You can't share your story if it ceases to exist when your hard drive crashes or your software has a glitch. Save everything early and often with simple, organized files and folders. Back up your files as often as possible, so you don't learn this lesson the hard way.
Strategize
Mark out how you plan for each element to move on your storyboard and note where the other parts are located. Use these to guide where your choreography will be so you can plan your animations accordingly. Use anticipation and follow through to add natural movement that obeys the laws of physics and gravity. Pay attention to the directional movement of your elements to plan how the audience will perceive changes in direction.
Fundamentals of Visual Filmmaking
Don't put your main subject dead center in too many sequences, or you will bore your viewers. Decentralized shots are more active and stimulating.
Change up your shot length to give your audience a variety in focal lengths and visual cues.
Vary timing in your sequences to make them more unpredictable (and thus, less snoozable).
Blurry vision
Photography blurs out parts of an image to focus on the main subject. Fast-moving objects appear to blur as they zing past. Use blur effects, lighting exposure, grain, grunge, or vignettes to create more realistic depth to your composition.
The Sound of Music
Your story is bound to change during the production process. Get accustomed to editing your soundtrack alongside your visuals so you can align them flawlessly- and add a little bit of spice. When you think your animation is complete, try watching it without sound and see if you can still clearly identify the meaning behind each sequence.
Research
This UI animation seems so simple yet so intriguing. I loved how the photographs scroll sideways, but each row moves at its own pace. The subtle but defined image opening sequence is elegant and beautiful.
This animation is insanely interactive, which makes it even more intriguing. Each element has its own movement, but the elements merge so well with each other into one cohesive design.
In this animation, each screen is clearly defined by the surrounding mockup. The overall design maintains a cartoon-ish aesthetic but carries elegant movement.
At first, this animation caught my eye because the house logo doesn't just get smaller, it changes form. Then, I noticed the text eliminates vowels for smaller screen sizes, which is a genius way to use the psychology behind reading (we generally only need consonants to understand the meaning of a word).
This animation was too cute to leave behind. A few seconds of animation added tons of personality to this little envelope.
Create
I wanted an inventive, unique animation to showcase the Lawrence Welch Contracting company's many specialties for this user interface animation. I will continue to build on this experiment, but I have a short piece based on painting services to start. I sketched out a house exterior design, followed by an interior shell design for guidelines on how I wanted the house to open.
For this animation, I started illustrating the house exterior in Adobe Illustrator and saved it as an Illustrator file with 1080 px x 1920 px dimensions. I opened a new file with 1080 px x 2800 px dimensions. Then, I copied and pasted the exterior outline in the new file to fill in the interior shell. I copied, pasted, and mirrored the outline into a separate layer.
After completing the illustrations, I continued to Adobe AfterEffects. I initially wanted the house to open similar to a dollhouse. Still, after searching for the proper transition in AfterEffects, I chose to use a "page turn" transition instead. Of course, then I need to adjust my illustrator artboard for the page turn to shift correctly.
I imported the paint roller file into this composition, then created a rectangle shape layer to represent the "paint." Next, I added a slide transformation to the house interior by adjusting the X position timer in the transform controls. Once I set the slide effect appropriately, I added my clicker with an ellipse shape layer and changed the fill opacity to 60%. Finally, to give a visual "click" effect, I changed the scale in the transform controls with a timer from 100% to 147%, then down to 110%.
I knew I wanted the paint area to zoom in following the click, so I scaled up the paint roller, color rectangle, and house interior images by 300% with a two-second timer. Then, I changed the position of the roller to make it look like it was rolling paint. I also changed the color rectangle to match the movement of the roller. Next, I added a second and third rectangle to coincide with the roller. Lastly, I created the "interior painting" text to add more context for users and created masks to reveal the letters as the roller paints across them.
Then, I had to decide how to return to the original image from this point in the painting services. So, I created a house icon in the upper right corner to show users that the button would return them to the previous page. However, returning the house interior to its original size without adjusting the paint roller seemed jarring, so I backtracked the roller after clicking the house icon. From there, I continued to backtrack the movement of the house interior sliding back to its original position and turning the page back for the house exterior.
I added a few sound effects to add some pizazz to the video: a mouse click, page-turning, paint roller, and slide sound. All sound effects except for the paint roller were found free on soundbible.com. The slide sound effect was much too quick to match the video, so I added a time stretch. So, without further ado, here is my user interface animation:
https://youtu.be/D3owCM1RMVc