Module 6: User Interface Motion

This Week’s Reading:

Animate:

In Chapter 9 of “Animated Storytelling” by Liz Blazer, Blazer dives deep into the actual act of animation. By the end of the chapter she went over 14 different tips and tricks to make sure your animations are as realistic and fun to watch as can be. The few tips that really stood out to me were “No Shot Left Behind”, “Consider the Blur” and “Mute Your Soundtrack”.

For no shot left behind, it’s obviously no secret that animation takes forever. But Blazer talks about making sure that after all the planning and storyboarding you do make sure you go back over everything one more time with extreme scrutiny to make sure that all frames are extremely necessary and that you won’t be animating any extra useless stuff.

Consider the blur was the one section that stood out the most, because as a film major, I understand depth when filming with a camera. Make sure your focus point is crisp and the background blurs out. But in an animation you have to consciously blur out things and create artificial depth. Blazer describes using tools like vignettes, Gaussian blur and grain. That way different fields in the animation have different textures and shadows and actual realistic feel to it.

The final tip that really stood out was one that I never even thought about, but subconsciously I do it already when I’m editing a video in Premier I mute the dialogue ad any sound effects to make sure the video actually cuts well together from a visual stand point with out the aid of audio cues. In both film and animation sound can really carry a story, but like Blazer said your work still needs to being hitting all of its visual cues with out any sound as well.

UX Inspiration:

This design I find very interesting and surprisingly useful. While your using your app you can get rid of the menu bar at the bottom of the phone. It’s simple pull up and pull down animation, but it really helps the main information fill the entire screen instead of getting cut off at the bottom.

I love the color choice and the sleek drop down menus. I kept this particular design in mind when creating my drop down menu for my search bar. I also like the rounded edges on one side. It’s different and it stands out from other more common applications.

The flow of the animation is super creative on this one. As you scroll through the sneakers they bounce back as if effected by real momentum. It helps the sneakers really jump off the screen and separate from the back ground. I tried to get the boxes that I made to bounce as well so that it didn’t feel super static.

This is another great use of color and the blocks nicely open and close easily. The interface is simple but it’s effective. If all food store apps and shopping list organizers were this fun and easy to move through I would food shop more!

This design is by far the most interesting. As you scroll through the list of seasoning the graphic spins with it to show you a physical representation of all the names. It’s a great visual tool and it gives the user the ability to not only learn the name of something but to also see what it looks like. This design definitely inspired me to make a visual search bar result in my UX interface.

My UX Interface Design:

I posted the one above to youtube because I added sound effects and the gif doesn’t let you export with the sound effects so watch which ever one you choose and I hope you enjoy.

The design definitely took some time to think about and make sense. I didn’t want it to just be a normal search bar I wanted to make it fun and I wanted the search to lead to something. Then once I got to the point of the cactus I needed to get back to the beginning so that’s why I came up with the second button hit to clear everything. Once I finished making my animation I went over to photoshop and created my iPhone mockup because I wanted the background to match the feel of the fake little app.

Overall I found this project to be the most challenging when it came to figuring out what key frames I needed where in After Effects, but in the end it was also one of my favorite modules.

Leave a comment