Animation for Interaction Design

2 Oct 2013 - 8:35am
43 weeks ago
9 replies
3934 reads

I'm looking for resources or materials on "Animation for Interaction Designers".

As an interaction designer, particularly for digital experience designs, I feel there is a need to understand basic animation principles to better handle page transitions, UI element movements and animated data visualizations or so on.

It would be really glad if anyone can help me with articles or online resources on the same.


2 Oct 2013 - 9:12am
Matt Nish-Lapidus

Animation is becoming a core tool for understanding flow, pace, and transition for interactive products.. It might be good to start with some basic AfterEffects tutorials, where you can learn about easing and transformations. From there, it's just about pulling in your UI assets and using what you learned in the tutorials to creat the transitions you want to see. You know, the easy part. ;)

It looks like there's a good collection of tutorials here:

2 Oct 2013 - 11:15am
Joel Eden
I would highly recommend the work of Jonas Lowgren, specifically in the area of interaction aesthetics (that's what I call it, he might call it the aesthetics of interaction), which I think of at a minimum, covering the ideas that aesthetics are not just visual, it's about how all of our senses matter in our perception of use or products, etc...therefore, sense of rhythm, pace, humor...all senses matter as we orchestrate interactions that help people with their needs, wants, desires. I think it's important to look into this stuff as the reason you might want to learn a specific technique or technology to use in your designs, before necessarily just learning to use animation tools.

Here's Jonas's page:

2 Oct 2013 - 12:39pm
You can find something in "The Mobile Frontier" from Rachel Hinman. She exposes the concepts around Disney animation techniques. It was definitely good to read her approach on the subject but I think there still is an enourmous gap between traditional animation techniques and animation for digital experience designs, as you put it.
Expanding the conversation a little bit, the arrival of iOS 7 and its new transitions generated quick reflexes from app developers. I do think Apple got the animations mostly right. Even though I don't think it adds a new layer of meaning to the experience it sure helps me to find my way around the system. Third party developers tried but most of the animations seemed gratuitous to me. Just a past time, not functinoal at all, at least in the apps I tried.
I'd be glad to read more on the subject and I think we definitely ought to do more research about it.
If you ever need a quick reference, I think this guy got a good collection together:
Didn't know Lowgren covered this topic. Thanks for the tip.
3 Oct 2013 - 12:32am
Jonas Löwgren

Thanks for the mention. I thought it could be helpful to provide a couple of more direct pointers, since my home page is not searchable by topic (which is just one of the many things it isn't ;-)

The general thoughts about how interaction aesthetics are temporal are best summarized in the paper "Toward an articulation of interaction esthetics":

A concrete 2003 example of using cutout animation to create a fruitful yet open design representation is described here:

The cutout animation itself from the 2003 example can be seen here:

Finally, among my teaching materials there is a tiny "web compendium" on the use of video more generally in interaction design to sketch and prototype temporal aspects. Animation is represented in some of the examples.

It makes me really excited to hear people like Matt say that animation is becoming a "core topic for understanding ... interactive products." If that is the case, good for us as a profession.

3 Oct 2013 - 6:30am
Matt Nish-Lapidus

Thanks, Jonas. Those are amazing resources. 

In our everyday work it's becoming harder and harder to really design the way something works without seeing it in motion. I'm happy to declare the "page" paradigm pretty much dead (except for some marketing/info websites, and even those are changing). Once you're working on something with complex interactions, where pieces respond to input, and to each other, it's vital to see it in action. You could do that by building interactive prototypes, which should still include animation.. but that can be time consuming if you're still experimenting with flow, pace, and movement. Tools like AfterEffects, my personal choice, can be a really quick and cheap way to try low and high fidelity animations for anything from a mobile app UI to a full interactive environment. 

Combining photos and video with animated interaction mockups can be a great way to get a sense of how your design will work, and it can be an amazing communication tool within the design team, with other stakeholders, and even with people who will eventually use the final product. 

14 Oct 2013 - 11:30am
Suresh V.S.

Even though you are interested in digital experiences, I personally find that it's very helpful to understand the foundation of animation. It'll help you see why animation is not just about how things 'move', but how it adds to 'character'... how the speed at which something moves can completely change the way the audience reads its attitude... why anticipation or squash and stretch are important, etc.

These two books are the best you can find on the topic:

21 Oct 2013 - 2:59am

Some food for thought here:

4 Nov 2013 - 10:23pm

I've started to look into this topic as well. Here are some resources I've found recently.



6 Nov 2013 - 3:26am
gaurang gupta

You guys can contact her as she has done a Intensive research in this domain . 

Syndicate content Get the feed