Bailey MeCey

Reading and Writing

In Animated Storytelling, Liz Blazer concludes by highlighting the best practices for animating your project. To start, creating a production calendar allows you to understand your goals and stay on track. The calendar should also have deadlines, to add consequences to keep the production on the right track. From there, making sure your technology is up to date as to not have any issues. While I’m guilty of naming project files “final” three times over, keeping a consistent naming for files is important. Backing up your files is also important, as a sudden crash can lead to hours of work down the drain.

Once you’re in the process of animating, it can seem very overwhelming on where to start. If that’s the case, starting by animating the easy sequences or breaking up the more difficult animations into smaller chunks can ease the process. Through animating, you might discover that your favorite scene does not flow with the story. It might seem necessary, but each shot must support the story. While it might pain you to cut the shot, it will ultimately help in the long run.

Planning out the animations to be crucial with the story will avoid that issue. Along with planning, prepping the posing and choreography is crucial to keep it in focus with the story. Understanding the direction of movement adds a lot to the personality of the characters and the story. Mixing up the framing, shot length, and shot timing will keep the story interesting and the audience engaged.

Outside of the animations, sound is also an important aspect to consider in the production. Along with the shots, it might be necessary to keep in mind changing the soundtrack for the animation. It could lead to a new direction, or reaffirm that the original choice was right. While animating, it’s important to factor in the soundtrack. The sound and animation must balance well together, which could also lead to new opportunities. However, the music can not overshadow the animation.

Research

To go along with this module, I collected a variety of examples that show off good user interface animations.

For this icon, a white download arrow on a solid blue background transitions to an in-progress circular dial. Once the download is complete, it then transitions to a checkmark on a green background. This animation informs the user that the download is in effect and complete.

https://dribbble.com/shots/1726042-Firefox-Logo-Animation

This logo is for the web browser Firefox. The logo animates in a spiral, then once it has come to the end it transitions into the Firefox logo. It has a fun sense of speed and movement and adds a nice transition at the end to return to the beginning.

https://dribbble.com/shots/2190376-sending

Aiding how the user understands that their task is in progress and complete is important. For this logo, the mail icon animates into the center, then transitions to an airplane as it flies off. I noticed how the mail has a little bounce to it as it comes into the center of the frame to give it added effect.

https://dribbble.com/shots/1277779-Morphing-devices-GIF

Presenting how the information will be displayed on different devices is crucial for a good user experience. This animation transitions from a desktop computer, laptop, tablet, and phone showing off the website. It has solid movement and emphasizes the design of the website.

The video game Celeste employs uses animation to inform the player of when the game is saving. The icon pops on screen, has movement then squishes in on itself to disappear. Movement for saving game icons is important, as it allows the player to know if the game has crashed. Also, the icon incorporates the classic floppy disk save icon with its style.

Create

For my user interface animation, I wanted to create a UI element that could be used for online shopping. In Adobe After Effects, I started by creating a shopping bag icon. When the user adds an item to their shopping bag, a circle icon with the number of items in the bag appears. The user can click on the bag, which then moves to show what items are in the bag. The user can then move the cursor to the item and delete it. After they delete it, the shopping bag then returns to its original position.

I wanted the animation to have a lot of different components, with the bag, shirt, and buttons. The sound effects also help to highlight that an item was added to the bag and the bag opening as it crinkles. Given the icon and background are in black and white, I wanted the circle icons to have a reddish-orange color to help make them stand out. This animation required more thought to understand how I could have the animation return to its original point to show a seamless loop. Overall, I’m happy with how this came together and would love to do more of this animation in the future.