READING & WRITING

Chapter 10 in Liz Blazer’s Animated Storytelling provides many helpful tips on animation techniques in the production stage. Great reminders such as being flexible on music or creating directional movement in storyboards to more clearly identify animation paths were very helpful (Blazer, 183). In addition, mixing up shot lengths and timing were two things I would have never considered before reading this chapter (Blazer, 185).

I particularly appreciated the example of “muting your soundtrack” (Blazer, 187). I think this a very valuable technique were you mute the sound to make sure all of the visual and physical motions were communicating the message instead of depending only on the audio. It is always a challenge to find a successful mixture of visual and audio elements that clearly communicate the story.

Although all of these reminders were helpful, there is a certain amount of exploration and play during the production process that were not included in this chapter. Perhaps because this is my first animation class, but there are many times where I cannot prepare some ideas beforehand because I don’t know they are possible. For example, on my logo animation, I did not plan out the direction of some elements until I explored the program with my learned skills and knew how they would look. Although you can prepare as much as possible, exploration is an important element during production.

Blazer, L. (2020). Animated storytelling. Peachpit Press.

RESEARCH TO INFORM

At :22 in the below video of the TodayTix app, you can see the user interface animation when you purchase a ticket to a show, you get confetti to celebrate your purchase and know it was confirmed. You can also see that the calendar buttons animate when they are selected to highlight your selected show date and more clearly lead you to the next screen.

This screen recording of the London Tube map is a great example of user interface animation where it makes your current location very clear on the map by animating it with expanding waves.

This screen recording shows the youtube uploading a movie process with user interface animation. You can see that your movie is successfully dragged in and uploaded by the animation. Then it transitions to the next upload page.

This screen recording of hair app called Gia uses UI animation to scroll through example hairstyles you can create using the app. It shows the user all of the different options available when they select the “select photo” button.

This screen recording below from the Amazon music app uses an user interface animation as way of grabbing the user’s attention so they can see all options available in the top button.

The screen recording below of the Disney Parks app uses user interface animation as a loading visual. The stars and fireworks circling create a magical tone for the users while they wait to further enforce the Disney brand.

CREATE 

I created a user interface animation design for adding something to your favorites. I wanted to create a fun star animation that spun and exploded when you clicked the star. I wanted the user to know that once they clicked the star, it would be successfully added to their favorites by a spin, exploding stars and then a check mark to mark it as done. The individual stars took a while, but overall I’m getting more comfortable and faster on AfterEffects.

I initially made my starting star too small and didn’t realize until I finished everything else to scale. I ended up merging the layers and scaling everything up but it doesn’t look as clear and wish I took a full screen preview when I first started the design.