User Interfaces

Summary:

Sometimes clichés can be annoying; other times there is no other way to describe what you want without using a cliché.

The animation process is complex and has many different layers. When you stand back and try to make sense of what you want to set out to accomplish with an animation project, you will be greeted by pages and screens of layers upon layers. Some control major movements in the animation while others control even the tiniest bit of motion

When this happens, you need to decide how you are going to tackle that beast or how you plan on eating that elephant. What is the best way to eat an elephant? One bite at a time—there is the cliché we have all been waiting for.

Reading & Writing:

In the book, “Animated Storytelling,” by Liz Blazer, she addresses the best way to approach animation, and although she does not give advice on how to eat an elephant, she gives solid advice on how to complete your project.

The first thing Blazer says to do is just start, noting the only way to build confidence in your skills is by doing. As intimidating as that sounds, she heeds warning to going after the complicated tasks first.

”I encourage you to start by animating your project’s ‘low hanging fruit,’ that is, the most fun, short, and easy-to-animate scene,” she says. “Once you’re done animating that first ‘easy’ scene, head to the next one that you think is especially do-able, even if it’s not the next one in your sequence.”

After the easy tasks are completed, Blazer recommends working on the more difficult ones by breaking them down into bit-size chunks because it will make the job at hand less “daunting.”

Blazer discusses the importance of being the best editor you can be when working on the animation to prevent having to go back and fix lazy mistakes and recommends backing up everything your technology assets as often as possible. The last thing you want is to have your computer crash in the middle of a project.

On top of what may seem like common sense practices to some and the light at the end of the tunnel to others, Blazer provides tips for planning out the animation sequences – more tips than earlier in her book.

For example, she tells us that we need to be posers – not lame people who ride skateboards just to look cool, but posers in the essence of coming up with a guide to make sure all movements work together in the animation. She reiterates that when working on the poses, it is important to anticipate motions and follow through, giving the example of a woman running after a bus, flailing her arms in the air and then when she finally gets to the bus, her hair and dress lean forward due to forces of nature. Making things look as natural in animation as possible is critical for creating good content.

Then, of course, there are basics of scene setting – getting out of the center and using the rule of thirds, mixing up the shot length and timing, and using blur to your advantage to create depth of field.

And last, but not least, is the consideration of sound and being open to change if your original plan for the way you want things to sound does not work out.

Research to Inform

To illustrate the principles of animation, I have found a few examples.

Joe Cartoon

Back when Flash was popular, there were several animators who created silly, interactive cartoons. JoeCartoon.com was a site that specialized in ridiculous animations. One of his most popular was a frog in a blender. The user could click on different buttons of the blender to speed up the blades. At slow speeds, the frog just bounced around and taunted you. At the blender’s highest speed, the guts of the frog went flying. Joe Cartoon also created a similar cartoon using a hamster in a microwave – you can imagine the result.

Music Player Transition

The animated gif above was created by ramykhuffash and shows animation for a music player. The transitions are smooth, and the interaction appears to be simple. The best part about user interfaces is that it simplifies the experience for the user, and this appears to do that.

Workout Curls

 

The animation above is neat because it takes a person doing an activity – lifting dumbbells – and shows what the device on his arm is tracking. While it is not necessarily user interface, it is cool animation and provides inspiration for a bigger project. For example, have the guy doing curls, but include a button that expands the device and then offers more buttons to click and see what the device tracks.

Phone Touch Screen

 

Here is one that seems so simple because we all use phones daily that utilize touch screens. But this is a reminder that phone apps are created with the user in mind.

Email Animation

The image above shows an interesting take on an email app that includes animation. The envelope slides over and on click opens and the letter comes out. The animations in this gif are solid and inspirational.

Create

This week I created a user interface using Adobe After Effects.

The idea is to create an interactive resume to add to a website. On the right-hand side of the screen are categories, and when clicked, each category opens as if the menu is sliding over and opening with the information.

I ran into a few challenges getting things to line up, but the overall look and feel of the animation is what I wanted to create. With a little more time, I can complete each of the sections and place it on my site.

Having never created anything like this, I found the layers of the animation to be overwhelming at times. I tried batching similar elements together. For instance, I created a layer for each blue button on the right and another layer for each of the button titles. I then combined elements, so the text and button for summary were one. When I tried to animate the bar extending and coming back around up top, it brought the entire button and left the text on the right-hand side. Ultimately, I wound up keeping the elements separate and everything worked as intended.