Top Posts

Module 6: UI Animation

April 14, 2017

Chapter 9: Animate

Chapter 9: Animate

Chapter Nine “Animate” was all about thinking about your animation (big picture) frame by frame. It is important to not only have all the tools to create an animated story, but also focus on unifying your elements into motion. Chapter nine started with an immense amount of encouragement. Liz Blazer stated, your animated project will work just as planned. You only need to follow a few insider tips that will keep you centered and moving forward towards your goal. 

Building up confidence to tackle your project is one of your first steps. Tackling the low hanging fruit first is the most fun, short, and easy to animate scene. After you take care of the “low hanging fruit” you can move on to the more intimidating and difficult sequences. The best way to go about this is breaking it into pieces.

When you break up the challenging components in your animation you will not only create less intimidating content, but also will reinforce the important notion that animated sequences are often mini-story arcs with distinct beginnings, middles, and ends. Liz Blazer presents an example of the “Launch of a Spaceship” to express the energy, forward momentum brought on by fire to the final lift-off.

Fundamental 1: Get out of the center – Try not to plop your subject in the center of your frame (too often)

Fundamental 2: Mix up shot length – Mix up your shot lengths. Long shots, to medium shots, and then close ups.

Fundamental 3: Mix up shot timing – Vary the time of your shots so your sequences move at different paces. 

Below is a recap of Animate,

Animate Recap 

1. Easy shots first to gain confidence 

2. Break up tough shots into pieces 

3. Plan well so no animation is cut 

4. Back up your digital files 

5. Pose your shots before animating 

6. Movement tip: Always anticipate and follow through 

7. Compose directional movement for whole film 8. Compose shots so subject isn’t always in the center 

9. Mix up shot length throughout film 

10. Mix up shot timing throughout film 

11. Add blur and vignettes 

12. Be flexible with soundtrack 

13. Listen to sound while animating to hit sound marks 

14. Mute your soundtrack to check movement

It was interesting reading about key poses that elaborate your sketches. Key poses provide a guide to ensure that all of your planned movement is possible. Your key poses include all of your elements- your background, props and text. They focus on the “before and after” movements that help illustrate the physics of gravity on weight and movement. Liz Blazer also goes on to discuss the importance of anticipation and follow through. Anticipation and follow through are as important as your “main” movements. They make your animation feel natural.
Paths for directional movement.

Animation Inspiration

UI Animation: Inspiration

During this module I explored different UI elements, animations, trends and movement. My goal for our assignment was to complete a UI animation from complete scratch while following Liz Blazer’s frame by frame process discussed in her Animate Chapter. I was particularly interested in UI animations that had smooth transitions, elegant interactions and seamless loops. I did most of research on desktop and mobile UI animations, but also came across a few UI tablet animations that were inspiring. What amazed me was the number of creative ideas. A few of the UI animations I came across animated similar elements, however they were all unique in their own way. I used Dribbble, YouTube, Google and browsed a few of my favorite mobile applications to find inspiration for my project. By using a #UIAnimation and #UXAnimation hashtag I was able to discover well executed UI and UX animations within their category. I also found that @UIDesignPatterns on Instagram had some great concepts and animations that stirred up a lot of inspiration for me.
Most of the inspiration for this module I found online and Instagram. Instagram was extremely useful since it allowed me to search for specific hashtags. For an example I was able to see the too posts within the hashtag #UIAnimation. This allowed me to find well executed stop motion animations and also be specific for what I was looking for.

UI Animation #1

Sometimes I find the best inspiration comes from learning something new. In this After Effects motion graphic tutorial Mike Ridolfi (@MikeInHD) reproduces a beautiful Material Design Google Music App. His tutorial is based off of the UX design shown when Google unveiled Material Design in 2014. In addition, this material design after effects tutorial should have show you everything you need to know to create an app design in Photoshop / After effects and give you a general insight for graphic design tutorial techniques and app design tutorial for beginners.

UI Animation #2

Learning how to create an animated UI cursor was critical towards completing my UI animation this module. Ryan Duffy’s animation taught me exactly how to create an animated UI cursor in After Effects. It is important to understand that our users interact with desktop much differently than they would with mobile or tablet. With a laptop (desktop) the users will click links and pan around with either their (wireless/non-wireless) mouse or trackpad. With mobile the user will use their fingers to interact with different UI elements. Given that mobile users use their fingers to interact with their screen, I needed to convey the touch of their fingers on my UI animation. Ryan Duffy’s tutorial was exactly what I was looking for. He inspired me to breakdown the creation of a UI cursor in easy to learn parts.

UI Animation #3

This was one of the first navigation animations I came across, with a quick “Navigation Animation” Google search. What I like about this user interface animation is the interactive animated clicks and perspective. It feels as if you are the one controlling the mouse. The panels that flip to create words is a very inspiring and creative idea. You can tell the animator made sure the sound effects were precisely aligned with the users clicks.

UI Animation #4

Ludmila Shevchenko showcases Tubik’s design agency services

This UI animation by Ludmila Shevchenko showcases the services Tubik’s design agency provides for. I absolutely love the color pallet that Ludmila used for her animation. The variety of colors used in the interface echoes the variety of services it Tubik provides. It certainly creates a positive first impression and supporting positive user experience with engaging design solutions. You can find more of Ludmila’s work here or her agent here. 

UI Animation #5

I love how the food icons bounce when the user glides their finger down the content bar. Even the liquid in Sergey Valiukh’s food icons have a personality of their own. The colors are fun in an attractive way and also separate the sections well. It is evident that Sergey Valiukh’s attention to detail and motion was critical component to complete this UI animation.

UI Animation #6

I really like the imagination that went behind this UI animation. Those of us in and even out of design all know how a radio button does on press. You can either slide it left or right. However, what Ramotion completed pushed the concept further and made it attractive. With Google’s Material design, not only is this doable but it is a simple solution that makes for a well executed UI animation.

Puppy UI Animation

Low Poly Puppy - UI Animation

Overall I had a lot of fun with this project. My favorite part was concepting. After collecting my interface animation inspiration from various sites and watching several Youtube tutorials I was ready to build on a interaction. Going into this project I had a lot of ideas, such as a virtual zoo or iMessage conversation. These ideas sounded good on paper, but would not fill the requirements as well as I imagined. Selecting a UI animation that would show the user where the cursor is (or in this case where the user will tap the mobile screen) was just as important as looping it.

I started on paper with a few sketches. I knew I wanted to do a mobile device UI screen, so I began by making a few vertical rectangles to represent the devices screen. Combining my own illustrations within my project was very important to me. Using royalty free images is great if it is sourced, but using your own work is even better.

After watching Youtube tutorials specific to After Effects “effect panel” last module I had a better idea how to work with effects and key frames going into this project. I hit several road blocks, such as getting my dog illustrations clipped to a shape and cropping my After Effects project. However, majority of these problems were resolved by a quick Google search. Seeing how other animators solved these issues as well as organized their composition and pre-compositions was very helpful.

I found that the reading this module helped me focus on one element at a time. It might be hard to tell, I have a couple interactions occurring at the same time in my UI animation. Such as the circle representing the users touch on the screen and puppy illustration. What I found useful during this project was creating multiple pre-compositions. This did not only separated my elements, but also kept my file extremely organized.

Puppy Illustration – I created my low poly pups in Photoshop and Illustrator. (Sketched on iPad Pro with a Apple Pencil)

Music – I decided to keep the music up beat and happy, without taking too much attention from the UI animation. Since puppies tend to give a happy and up beat impression I thought it was a good fit.

Sound effects – I used sound effects that would go along with the puppies and push the circle animation (that represents the users touch on the iPhone) further. It was important that my audience felt like they were participating the UI puppy interaction.

Audio – The idea of being in the environment of the puppies and participating in the UI interaction was incising. I knew when the puppies appeared I wanted to use sound effects for them as well as the users touch on the UI elements.

Animation – I wanted to incorporate a few of the 10 principles of animation that we learned from the previous chapter. Brainstorming ways I can incorporate these principles into my UI animation was a great re-cap. 🙂

Type – Originally, I wanted to animate the text in my UI animation. However, I did not want to take the attention away from the users interactions in my UI animation. Going into my project it was important that my UI animation was simplified and not overwhelming. I found that having static text was the perfect combination with the interactions since the copy would be easier to read and could be read multiple times without it leaving the stage.

Changing the skew of the puppies while maintaining motion was a challenging hurdle during this assignment. However, by creating a clipping mask on horizontal rectangle for my puppies I was able to control the dimension and size of the puppies a lot easier.
Tip - You can add markers to your timeline, so you can remember where your actions take place without using the timeline scrubber. I used numbers to mark important keyframes for my audio and illustration movements.
Tip - Adding a cursor to a Mobile device is different than adding one to a desktop UI. Unlike desktop where the user uses a mouse (triangular cursor) to click on UI elements a Mobile user will use their fingers to press on an element. We demonstrate this interaction by using an animated circle. By YouTubing "Animated Mobile UI Cursor" you can learn how to animate one from scratch.

Puppy UI Animation - (Gif)

Puppy UI Animation - Gif

After exporting my project I imported it into Photoshop to create a gif. It was important that my gif’s file was condensed. By using a minimal number of colors I was able to bring my file size down drastically. It was amazing that I was still able to achieve the vibrate look I was shooting for with a reduced amount of colors. When I was exporting my project as a gif in Photoshop I had the idea to add a static banner at the bottom. This was a great place to market my website that associates with my low polygon puppy illustration.
Adding e-commerce banner to .mp4 file in Photoshop.
UI Puppy Animation Gif