There are many opportunities to use animations effectively, and one important thing to think about is the user interface and experience. If you’re designing an app or a website, animation can help move the user from one section to another with ease, or help them to complete an action. 

This week, I’ve continued working on animation features for a brand I developed previously, Stitched & Sable Living. I’ve already created a mobile and desktop website layout, so the next step was to figure out some of the functions of going from page to page. Before I did this, I needed to do more reading and research on effective UI animations.

Reading:

Chapter 10: Animate! in Animated Storytelling by Liz Blazer gives the reader helpful tips to stay on track and make sure to prepare effectively for the simplest ways to get started and keep going. 

You have the full-fledged plan for your animation, but when it comes to production, unexpected things might come up or it may be more difficult to stay on track as originally planned. To help with this, Blazer recommends first create a production calendar – fill it in backwards (starting with the finish date), and then make it accessible for you and others to give yourself the incentive you need. Secondly, make sure there’s no room for error in your technology. Everything should be up-to-date, working, and you need to save your work often. Nobody wants to lose all the work done to an unexpected crash. 

When it comes to actually animating – there may be some more daunting scenes than others. Because of this, Blazer advocates starting with the easier, more fun, short sections – which will keep the production moving while also building confidence. Also, the daunting scenes mentioned early may be able to break up into smaller sections, and if that’s possible, make sure to split them up and animate them separately to make it less intimidating.

Finally, there are a few production aspects that you need to think about beforehand, and modify as needed for the best story:

Be strategic about movements. 

• Plan character poses and where they’re going to avoid mistakes or go out of character. 
• Use anticipate & follow-through, i.e. before and after movements to give a more natural feel. 
• Note your directional movements – do the characters move horizontally, vertically, diagonally, or circular? This helps with the intensity of situations or gives the subjects more character. Then, make sure to map these movements on the storyboards.
• Use the rule of thirds – keep your subjects out of the center as much as possible.
• Mix up the shot length. Changing the shot length, and using a wide shot to a medium shot to close up (not particularly in that order) for each scene makes the experience more enticing.
• Mix up the shot timing. Changing the time of each shot will make the story less predictable. 
• Use motion blur. Subjects that move without a blur might look less realistic. Using blur can emphasize parts, and make the moving parts look more natural.

Sound.

• While at this point, you’ve already found the score, ambient sound, and SFX, you still need to remain flexible. Depending on how the story develops, the sound may need to change. 
• The sound should match up with the timing and pacing of the story and subjects.
• You can’t rely on sound too heavily, otherwise, it will end up doing all of the work, which may not be the best for the story. Hit mute every once in a while to make sure the sound isn’t the lead. 

Research:

I enjoy this UI animation because there are so many sequences happening throughout, and they all make sense. My favorite part is when the cyclist shows up as a loading screen between pages (0:19) – it’s representative of what the user selected on the application, and interesting to look at, all while not taking too long for the user to lose interest.

The sound effects with this animation help to enhance what’s happening. I enjoy the movements, renderings, and loop that the creator made with this. While there isn’t an exact indication of a finger or mouse cursor, it’s easy to tell what the user would do to make this animation happen. 

This UI animation is effective because of its smooth and easy transitions for the user. There’s an appropriate amount of information for the user to know what they need to do 

This add-to-cart animation is a simple, but functional and worthwhile piece to include for a user to know that their items were added to their cart. 

Another example of a loading animation – this flying bird with an envelope is perfect for a messenger app. I enjoy the refresh movement on the screen, and the short but fun amount of time to view the bird. 

Create:

Going off of what I did last week – creating an animated logo – I chose to use a previously made website mockup for the user interface animation. So, I brought in the layers from Illustrator as a base, then used After Effects to create the elements of the UI animation. 

For the UI animation specifically, I rendered up a mouse cursor, which moved to the top menu for “SHOP.” When the cursor hovered over “SHOP” I made the letters animate larger, and with a fade-in. Once “SHOP” is clicked by the cursor, a new rectangular menu animates as a pop-up, where the letters then turn into a back arrow key. Within the new menu, the cursor hovers over different main categories, which then reveal more specific categories. Eventually, the cursor hovers and clicks the back arrow key, and returns to the main page, with the animation repeating itself at the beginning, but just in reverse order. 

When I started this week’s project, I thought I’d create something much simpler. But it really made the most sense to me to show the website home page as I’d imagine it, then to show a series of directions that the user could go. It was a lot of fun, but definitely took some practicing to get everything right!