Val Head on interface animation

Val Head is aiming to change that. A designer specializing in web and UI animation, Val is both a speaker and teacher. She curates the UI Animation Newsletter and recently wrote a comprehensive guidebook to her trade,“Designing Interface Animation”. It’s available now through her publisher and Amazon, among others.

I recently had a chat with Val about the fundamental differences in designing animation for web vs mobile, the importance of establishing motion guidelines for your brand, where designers can get started with animation, and more.

If you like what you hear, check out more episodes of our podcast. You can subscribe on iTunes, SoundCloud, or grab the RSS feed.

What follows is a lightly edited transcript of the episode. Short on time? Here are five quick takeaways:

1. Similar to type and color, animation is now created with meaning and fit in mind – allowing it to solve common design problems like user orientation.
2. Every brand or product has a point of view. That needs to be reflected in all design efforts including animation, which should have a foundation of strong motion guidelines.
3. Unfortunately, there isn’t yet a perfect tool to create visual, timeline-based animation and translating that to quality code. Thus, animators and engineers must work closely together.
4. Users have very different expectations for animation on the web vs a touchscreen experience. This makes bare-bones prototyping a highly important process point.
5. Instead of designing each individual animation in a vacuum, consider how they work together and what attributes they should have in common. This concept is called UI choreography.

Emmet Connolly: Val, thanks for joining us. Could you maybe just give us a quick rundown of your career trajectory, and in particular I suppose where you found your passion for animation?

Val Head: I discovered animation in a strange place. I was taking an animation workshop in university, and the instructor showed us Flash, and we learned how to do Flash animation for six weeks. Right near the end, I got to this point where I thought, “What if I wanted this animation to do one thing one time, and a different thing the other time? Do I have to make all of these frames and do it all by hand?” They said, “No, there’s this thing called ActionScript, and you can write code to make things on the screen move around.” That was a life-changing moment for me.

Emmet: I had a similar experience. I plowed many, many, many hours of my life into ActionScript, and I’ll never have them back, but it is certainly a valuable base for thinking about motion in digital products.

Val: I got into Flash work a lot. My first agency jobs were all doing Flash design. Oftentimes I was the weirdo web standards person in the Flash shop who thought we should actually make good websites as opposed to just show off. There’s this tension in my career, where I really like love the creativity and the open world that Flash gave you, and the things you could do with it, but I also felt it wasn’t playing nice with the web browsers, and maybe we should do something about that. I was that person fighting for the best of both worlds.

We can now make animation that is of the web, not just on the web.

Once Steve Jobs killed Flash and then web animation finally came into its own and became a real tool we could use, I was like, “This is the best. This is exactly what I’ve been waiting for. We can do animation, we can do it well, and we can make new things with it while also being truly part of the web.” To steal a phrase Jeremy Keith, “We can now make animation that is of the web, not just on the web.” I think that’s so amazing and so exciting that I just can’t stop talking about it.

Evolving beyond Flash

Emmet: Going back to Flash, it seems like it was a lot of people’s introduction to animation on the web but seemed to be in many ways for its own sake. You had the typical Flash intro that was ubiquitous for a while. Today and motion and animation seem to be much more used as a solution to design problems. Do you feel like animation is entering a new phase, or is it still seen as an add-on?

Val: We’ve realized that the skip intro era was not such a hot idea, which is good. Flash intros at their peak were pretty ridiculous. That’s what Flash is remembered for, but people did some really beautiful interactions, and just lovely art-directed sites with motion too. I’m glad that we’re going more towards that angle.

We seem to have realized the skip intros were a terrible idea, and tried to find more of a utility for animation – really making it more of a proper citizen in our design toolbox. We’re starting to think about it more like we do with type and color, where we want it to have meaning and fit. That’s where we’re going to get much more interesting and beautiful animation. Some of the best Flash work did that too, where it used animation, but in a way that wasn’t like, “Hey, watch our intro,” because no one wants to do that.

One of the big reasons it does get overlooked is just the fact that we have so little background in it as web designers. We think, “Cool. We can animate stuff with CSS and things. Now what?”

A lot of times I see work where people are like, “We should transition this,” so they put a transition on it, and never consider it further. Really considering what it’s doing, and why it looks the way it does – that’s the key to pushing web animation forward and making, at least on the design side, things that are new and interesting and that will be unique to the web and the way the web works.

Emmet: That somewhat naïve approach to animation that you described, you see that in other aspects of design too. You can see that applied to visual design, where trends and fashions come and go without really much thought being put into the why of it. Do you think that same thing around trendiness applies to animation? Are there certain things that are overused?

Val: A big trend with animation right now is the whole idea of material design, and their motion guidelines. Material design has some really strong opinions on animation and how it should be used. Web designers are really drawn to that because it’s often the first exposure they’ve had to rules for designing animation.

What gets lost a lot of the time is that Google wrote material design for branding Google things. When you use material design on things that aren’t Google, you’re kind of using Google’s branding on a thing that is not Google, and that’s weird. Material design is Google’s opinion on motion. It’s Google’s branding opinion on motion. It’s not a de facto standard of how motion should happen.

Right now that’s a trend because it’s easy to find and easy to see. I’m hoping that as we do more animation on the web, people will start moving away from material design for all of their motion decisions, and get comfortable having their own opinions on what makes good animation, and what makes good interactive animation.

Emmet: It’s like people are using the material design motion guidelines as an introduction to animation, rather than a specific instance of how motion branding should be done. Should people be creating their own motion brand guidelines? How do people even go about starting to approach a problem like that?

Material design is Google’s opinion on motion. It’s not a de facto standard.

Val: People should definitely be thinking about creating their own motion guidelines. That doesn’t have to be a giant, huge, public beautiful thing like material design. It doesn’t even have to be something you make or share. Any kind of documented consideration of animation can count as motion guidelines. Something you share with your team, like, “Here are the values we have around animation, and what we want to do with animation,” totally counts as motion guidelines.

Every brand and every product has a point of view. It has a personality. It has something it’s trying to say. It has something that makes it unique. That should be reflected in all the design efforts, including the animation used. That’s how we create unique experiences, and not just remix what every other website has done before. Motion, when you consider it as an extension of your brand, and part of the overall design package, becomes a really great way to differentiate yourself. If that’s what you want to use it for, you should definitely not just be copying material design. You should have your own opinions.

Material design can be a great place to start. You could ask, “Do I agree with Google?” There’s maybe things you don’t agree with Google on. Good for you. Go with that. We need to have our own take on this stuff. It’s hard when it’s new to you, because you feel like you need permission to do that.

Understanding tools and workflows

Emmet: It’s interesting to talk about material design so much, because I actually worked on the Android team while material design was being put together. There was incredible work done, but one thing that really struck me at the time was the lack of really good tools to support that work.

Something that was a real sticking point in the actual workflow of translating these ideas into real products was the tools that would bridge the gap between something like After Effects, and something that engineers could work with to actually implement those motion ideas. It just involved an awful lot of manual labor. Where are we at now in terms of toolkit? Are there any interesting resources that you’re aware of?

Val: It’s great to hear that even the folks that even the folks that worked on material design had that problem. It’s true. There aren’t a lot of really good tools to get us from that visual timeline-based animation and translating that to code, especially translating that into code that engineers would be happy to put in the final product. That’s the extra edge there.

This is why we are seeing so many new animation prototyping tools hit the market. I like to joke in workshops that there’s a new one every day. That’s only a slight exaggeration. We have Flinto, Pixate, Principle and Framer. I can’t even list them all. All of that software is trying to fill that gap of, “How do we make this transfer better?” I’m not sure anyone has got it right yet.

If you’re using something like After Effects, and you’re handing off videos, it’s really hard for engineers to look at a video and just magically figure out the timing, easing, and delays you’ve used. It’s really helpful to at least write that down somewhere. Write down what kind of easing curves you used. In After Effects, it would mostly be cubic Bézier-type curves. Actually giving that stuff to the person who’s going to build it will make them much happier and save them a lot of time.

An illustration showing the effect spacing has on the speed of an animated object, as seen in Val’s book “Designing Interface Animation”.

A lot of people are trying to bridge that gap, and the good thing of having so many people trying is we’ll get a good solution. One of these is going to come out ahead. Right now, we’re in the wild west of animation prototyping tools.

Emmet: I totally agree. Part of me even wonders if that multiplicity of options around tools is even holding some people back. Designers have to invest a lot of time to truly master one of these tools. Even at the highest level, some of them are timeline-based, some of them are code-based, some of them are these boxes that you connect with noodles. Do you see anything emerging as clear victors in that competition in some sense?

Val: One place I suggest a lot of people start is Keynote, believe it or not, because for most people working on Macs, you can get it for free. It has some pretty handy animation tools, like Magic Move. The overall metaphor that Keynote uses for motion and basically creating motion through Magic Move is really similar to how a lot of the more powerful and expensive prototyping tools work. Keynote is very good for some very basic prototyping. You can learn it really quick. You can get really fast at it. You’ll probably very quickly run into the things you wish it had, and then you can use that list of things you wish Keynote would do that it doesn’t to figure out which tool might be best for you.

We’re in the wild west of animation prototyping tools.

Something like Principle is very visually timeline-based, where something like Origami is very, like you said, like noodles and boxes setup. You can get an idea of what you feel is missing, and what you want.

Often what I recommend to people, especially people who aren’t into or comfortable coding things themselves, is to try to have one tool you’re really fast in, and that might be Keynote, but one that you can rough out ideas super fast. Then have another tool where you can get more specific. Because tools like Keynote you could be fast in, but if you want to really look at your easing, and really fine tune that, you can’t. It just doesn’t have the options.

Something more like Framer or Principle, you can get deep into the weeds on your easing, create custom easing functions, and really make the motion look final in a way. Having those two extremes – something you’re fast in and something you can really get into the details with – is a good way to do it.

Emmet: The tool totally shapes your output as well. You might have a vision going in, but a code-based tool will suggest a totally different solution than something timeline-based.

Val: That’s the both danger and awesome thing about using something like After Effects. After Effects can do literally anything with animation, but depending on whether you’re making this thing for web, or for native apps, and depending what platform it’s for, when it comes to actually coding it and considering performance, using that program may not always be a good idea. You need that reality check. Then there’s the thing that if you’re working in After Effects, you have everything. It’s a wide-open world. You might come up with something way more interesting and that pushes the limits of the platform you’re using more than if you just started with code. It’s a double-edged sword. You have to keep in mind what it is you’re going for as you’re designing.

Emmet: It’s far better to bring something back down to Earth after you’ve mapped out some extreme possibility rather than trying to incrementally inch your way there.

The role of platform

Emmet: Beyond practical things, like, “That motion blur that you added is not very easy or practically done on the web,” are there more fundamental differences between designing motion specifically for the web and, say, touchscreens? The interaction paradigm is very different in terms of direct manipulation. How does that translate into animation differences?

Val: There are different expectations. If you’re creating a drag-and-drop interaction, when people are directly manipulating a thing, there’s more of an expectation for that real-time feedback, and you expect different feedback. You don’t want to wait until after you’ve dropped a thing to find out of that was an acceptable place to drop it. When you get to these more complex, gesture-based interactions, we have different amounts of feedback, and different things will feel right. It’s important to know which one you’re designing for, and to really try this stuff out.

Even if it’s a really bare bones prototype, try things out, and see if it does feel responsive enough to your input if you’re using gestures, or dragging, or touch input versus clicks. We have different expectations in those different contexts. Something that might feel right with a mouse on a desktop might feel really weird on a touch screen, and maybe you need to adjust based on that input. Of course, the technical ability to adjust for those doesn’t always exist as nicely as we want it to, but it’s still a thing to consider. We usually know which one more of our audience is using than the other. You might be forced to focus on one more than the other, so it’s good to keep in mind.

Emmet: Because we’re so attuned to actually physically manipulating objects in the real world, it seems like if anything is off about the physics of it, or the heft or speed feels wrong, especially on touchscreens, it’s extra noticeable straight away. If anything, the bar is slightly higher there.

Val: It is. It’s closer to real life, so that suspension of disbelief is not quite as much as it would be when you’re just clicking on a desktop, and you’re like, “I know this isn’t real.”

The book on animation

Emmet: You just released a new book, “Designing Interface Animation”. What were you hoping to accomplish by putting such a deep dive into this one particular aspect of design?

Val: I’m hoping to help web folks feel more equipped to tackle these problems, and to approach animation as a thing they would design, just like they would design type and color. We have gotten so used to our set of design tools; I really wanted to help people see animation as one of those tools, one of those things we have to solve design problems with in concert with all of our other tools. I really wanted to create a guideline for using animation well in interfaces, both in what we use it for and how to pull it off well. You could have animation that’s there for a really good reason, but if it looks awful or performs awful, it’s not good. It’s not a good solution.

We’re at this time where we get to define what the next wave of web animation will be. We all know the skip intro era. That’s in the past. What comes next? We are in the heart of defining that, and I wanted to help give web designers a tool for tackling that new challenge, or defining that new future of web animation from a really informed and solid place. I’m really excited to see where web animation goes. We can do so much better than skip intro. We can do things differently than native apps can. I’m not 100% sure where it’s going, but I’m excited to see where things go in the next few years.

Emmet: One repeating theme that really jumped out at me in reading was UI choreography, which really seems like a new and very rich idea. Could you explain what that means in practice, and why is it so foundational in motion design?

Val: It’s really foundational for motion design when it comes to interfaces because you never know where someone is going to first jump into your site, or jump into your app. We all know most people don’t start on our homepage. It’s a little more clear for apps, but you’re never really sure where they will start their interaction, and where they will start working with your interface. You want your interfaces to feel consistent, or feel like they’re coming from the same place no matter where you start, whether it’s on step one or step five, or your about page, or whatever else.

A sense of UI choreography is having this overall umbrella to make all of your animations feel like they’re coming from the same family. They have the same point of view, similar aspects to them, so it creates this similar feel throughout the entire site, or entire app. No matter where you start, you know you’re in that same place. It really comes in handy too for responsive web design, where the layout could be totally different on a small screen versus a large screen, but your motion and your animation can look and feel very similar. That helps tie those all together.

It’s really the idea of keeping that bigger picture in mind, and instead of designing each individual animation in a vacuum, considering how they work together, and what things they should have in common. That really ties back into the idea of having your own motion design guidelines. Those guidelines are what can create that umbrella and that backbone that all your animations pull from. It’s all related.

Animation’s next frontier

Emmet: There’s potentially a lot of interesting things about to happen in the world of VR, or even AR. How does motion design fit into that?

Val: The whole VR area especially, that’s a whole new world of completely different rules. If you’re animating for VR, we really are going to have to create reality. That’s a really interesting place, because yeah, it’s virtual reality, but how much of it is virtual? How much magic can we apply to this? How much can it not be not the exact real world? VR is really an interesting place to explore. I’m not sure anyone’s really figured out what we’re going to with VR exactly, but it’s so wide open and so interesting.

I think sound design is going to be an implication for animation in the near future, too. We can do sound on the web, finally, for real. When you watch motion design pieces and titles and things, the sound really enhances the motion, and they work together in concert. I’ve noticed a lot more apps are using sounds in a very specific kind of way. I feel like that might be something that’s next for web animation as well – bringing in that sound design aspect to enhance the motion and enhance that feedback. It’s an exciting time.

Emmet: I think that is as good a place as any to leave it. Val, thanks so much for joining us today.

Val: Thanks for having me. This has been really fun.