Motion Design

Motion Across Media VI: Interface Motion

Intro

This week I took on digital interface motion. WTH? It’s how the back button appears on your iPad version of Safari when you scroll up.

Reading

Chapter Nine: Animate!

Liz Blazer finishes up the book Animated Storytelling with a bit of practical advice for the fledgeling animator, “don’t be the fool who has to learn this lesson the hard way when so many others have already learned it for you.” Of course, this quote is specifically about backing up your project early and often, but I feel like it’s sage advice for everything she’s said throughout the book.

I found this chapter to have bits of advice that probably could have been helpful for me earlier in my animation journey such as “start easy and gain confidence” and “break up the tough ones.” Instead jumping right in and animating from start to finish, start with the easiest scenes to get the hang of what you’re doing. Then, once you feel more confident and ready to move on to the harder scenes, feel free to break them up into smaller segments to not become overwhelmed by the work. Overwhelmed means letting stuff slide, and that is the kiss of death for good animation.

I also thought the advice to cut, cut and cute some more was insightful and goes against my own normal mode of working. As a writer, I’m comfortable with the SFT (the sh*tty first draft) which you blow out without thinking a ton, and then edit, edit, edit down. Basically… “I’ll fix it in post.” But in animation, you wan’t to fix it in pre. Figure out if a shot is truly necessary before you start animating it, because each shot could take HUNDREDS of hours of your time.

Research

Future City

Honestly I wish I could stop sharing research right now because this website is nuts. It’s interactive – pushing you to click again for the next step in the journey. The images are enjoyable, the sound is relatable. Kind of amazing. Visit the Future City website.

My Grandmother’s Lingo

Holy… moly… This is an unbelievable site. Told from the first person journey of a woman who is working to keep alive the dying language of her grandmother, it teaches you five words in Marra through an interactive animation and story. Please spend a few minutes learning about Marra and practicing the lingo of the narrator’s grandmother.

Search Function

Getting down to the knitty gritty of functional animation, I really enjoyed this simple search function animation by Oleg Frolov. The animation can be found here.

Loading

Minimalist yet engaging, this loading image could keep me entertained for at least 10 seconds… about 3 seconds longer than the average time it takes people to abandon a website. Another by Oleg Frolov, the loading animation can be seen here.

Hélène Blanck

When responsive cursor movement and scrolling are done well, it sings. This reminds me of those art projects I had as a kid where you’d put paint inside a plastic bag and then smoosh it around. The website is so engaging, it barely matters that it’s in French. Go spend a few minutes smooshing around this site.

Create

This week I created my own UX animation. UI/UX are neither my strong point nor are they my passion. Of course, I know a good website from a bad one, but I don’t spend a lot of time thinking about what I like or why. Actually, after this week I’ve realized I prefer a more straight forward website where the animation is barely noticeable and does not call attention to itself.

It’s with that idea that I created this little animation that should serve as a help button interaction. By pressing the question mark, a screen in which a message can be typed and then submitted appears. While it’s minimalistic (blue and grey… my favorites) I hope that it is intuitive to anyone who, like me, was at least raised for part of their lives with current technology.


Blazer, L. (2016). Animated storytelling : Simple steps for creating animation et motion graphics. Erscheinungsort Nicht Ermittelbar] Peachpit Press.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s