Motion And Meaning

Hi; and I'm Cennydd Bowles. I’m a digital product designer based in London. Until fairly recently I was Design Manager at Twitter and among many projects that I did at Twitter was helping some of Twitter's motion experts with cross-platform motion design standards so I thought this would hopefully be an opportunity for me to learn a bit more and to share some of the things that I learned at Twitter as well. It kind of really put the hook in me, I suppose, as a topic. So, what we're trying to do with this podcast is: first, we want to keep it kind of short and punchy. I think we want to be a podcast that doesn't overstay our welcome. I think we’re aiming maybe about ten episodes, something like that.

Yeah, and hopefully each episode itself will be relatively short, maybe under half an hour each, so you have a chance to listen to it on your commute or whatever it might be. Today, we're going to talk about why motion design really is becoming a key skill; why its time has come, if you like, to invest in it properly and later in the series we're going to talk about some broader angles; for instance, Disney's famous or potentially infamous Twelve Principles of Animation and which ones are more or less relevant to our work today. We're also going to talk about some common mistakes you can make: how to avoid them when you're beginning out with motion design. We're going to look at prototyping tools because as we know, there's a wide variety of those have hit the market recently; how you can accommodate those into your workflow and then maybe a bit of a look into some of the science around motion as well: the psychology and the physics or the mechanics and maybe kind of a deeper dive into something like easing, timing and spacing and speed, really getting into kind of the details so you can be sure to try and make motion the best it can be in the work you do. And I think we'll also have a look at accessibility as part of this as well, because it's an important part of that design approach.

So, hopefully what we’ll find is that we’ll cover a range of topics and I think we'll also do them from a couple of different perspectives too.

Right, absolutely. And I guess my perspective then is maybe I take more of a kind of design theory angle; I'm very keen on design theory and understanding why something is useful, why it can help users. I probably will take maybe a slightly broader perspective as well in that I’m very interested in native mobile product as well, so certainly web stuff, but also how will that work on Android, iOS and so on. And then particularly for me, having a bit of experience in large companies, how can you try and get these things moving within your own company? What are some of the pitfalls; how can you try and convince others that this is something you need to pay attention to? So, hopefully, those two different perspectives will shed some interesting light on the topic.

Right.

Absolutely. So, I guess our intention behind this is really to try and drive the conversation forward; to help people feel more confident to experiment with motion in their own products and then also to act as kind of a catalyst for people to discuss and explore ideas of their own.

And that's one of the things I think about talking about motion is sometimes you need to see the thing, so we recommend certainly if you're interested in some of the things we're talking about, do visit that site, motionandmeaning.io and you'll be able to play with some of the examples or read some of the articles or papers or demos and so on that we link to there as well; I think that's a really important part of that aspect.

So, I guess let’s move on and talk about the meat of this episode which is this principle of why now? Why is it the right time for motion and then, I guess, how can you get started as well? Do you have any thoughts?

Right. You're absolutely right: it did have a bad start and I remember some of those articles saying it's 99% bad and I think a lot of our experiences of animation with motion on the web particularly was pretty much like banner ads or something, just distracting from content. In that instance, yeah, absolutely right: motion’s not going to help you. But I think as we're moving into a different era, we're moving away from this kind of, it's not just a document page to page model any more a lot of the time, web and native mobile even; it's more about transitions between states; it’s communicating what happens, what goes where and you've clicked this and what's the effect? What's the feedback that it's caused within your system? And it’s very hard to communicate that without motion, to be honest, in some instances. So it means that kind of maturity is there.

I wonder if that's anything to do with the advent of touch as well? I think that maybe that helps significantly because you’ve got this mental model that you’re setting up, that you're directly manipulating content; you’re moving things. There's that tactility; you actually touch the thing. And of course, it then has to be able to respond; if it's this static thing, then that really isn't convincing, it doesn't have those wonderful fluid properties that you’re trying to get across, so I think it’s only natural that systems respond in that kind of tactile way as well, so that probably pushes us forward too.

Right, then you might as well just have bought a Blackberry or something!

Right, exactly.

I hope so!

And the tools as well, it’s not just the engineering tools, it's not just the development tools: it’s also the prototyping tools and there's just been such a huge uprising in the number of tools available and we'll certainly I think, probably dedicate an episode to this at some point further on, right?

It could take forever! But that means that you not only have the capability to actually execute on these things; you can deliver these designs through code but you can also spend more time understanding what's going to work and what isn’t, even if you’re not hugely code-literate as a designer: the tools are out there to help you play around with this kind of stuff and then start that conversation at least with your engineers.

Right. I know I wouldn’t. I know a bit of code but probably not to that kind of level; I’m glad there are tools and so on to help; it makes it a bit more accessible, doesn’t it?

I’m obviously going to come at this from a design point of view, so I’m saying: designers, how are you going to get involved? So I’m going to say, prototyping. I was at a prototyping meet-up a couple of weeks ago in Berlin actually.

Yeah, and one of the slides, the one that stuck home in my head said, essentially “What we consider prototyping today, we’ll just consider design tomorrow.” Which was kind of an interesting way of looking at it and saying that really, prototyping is significantly on the rise, to the extent that its becoming pretty much an expected skill among product designers working in this kind of sphere. But it doesn't need to be wildly difficult: you don’t need to invest time in learning difficult tools and so on. Previously, it was maybe more that way; you had to be a bit of an after-effect expect or something like that, but now, even something like Keynote, people are starting to really realise how versatile it can be; the opportunity to get stuff in and do magic moves and transitions and so on. And I think even just doing that, getting out of some of your static tools, which can be useful for some things, but getting into something even as simple as Keynote helps you play around and I think you've got to start playing around with this stuff, haven't you? You can’t do it all from theory and reading, and even listening to podcasts! You’ve got to actually get your hands and start moving things around a screen as well, right?

Yes. GDS in the UK, the Government Digital Service, they have a number of internal design principles; I don’t know if these are their public ones as well, but I know they’re very fond of saying, “show the thing”, which I quite like; it’s an incentive to get in that kind of sphere and to say well yeah, sure, here’s the thing, here's how it moves, here’s how it responds: what's the interaction principles it’s using? I quite like that; that's a good principle I think to bring to motion.

Show the thing, yeah!

I spent a bit of time, a couple of months, trying to learn a bit more about the CSS angle for this because again, I was interested in it from a design perspective and a prototyping perspective and I thought, well, I need to know how it's going to be made in code as well. I was surprised how accessible it was. I was expecting more stress and I remember the days when this was a bit more in its infancy and you had all these vendor prefixed properties and all this sort of stuff and I was thinking, oh, right, I’ve got to dive into those, but no, it’s cleaned up a lot now; it’s a lot more standardised.

Yeah, totally. I think slowing something down really is the best way to understand the nuance that’s gone into it a transition or whatever it is, because it’s blink and you’ll miss it otherwise, so it’s the only way really to go about it.

Right, certainly. Something that’s interesting for me as well is recognising that we’re not the first people to come to animation; there are masters of this art.

No, I think the tech industry sometimes would like to think it invents everything but we're on pre-trodden ground here, so I’m really interested in reading about the topic as well and seeing what people who’ve been researching it and playing with it for decades, what they’ve come up with, so I'm sure like me, you read a fair bit about this well, so is there anything that you’ve read recently you think might be valuable to our listeners?

What was the answer to those questions?

Right, yeah: academics, they work in different ways, don't they?

Yeah, I read that one as well, it's a good article; I definitely recommend it too.

That’s got to be the world's most boring pub quiz!

I’d probably still go to it. I’d actually be kind of interested in that in a kind of nerdy way. That Ryan Brownhill one; yeah, you’re right. I read that one as well. It’s definitely an interesting piece. It’s detailed but detailed enough; it doesn't go way too far. There’s another one that it reminds me of which is another Medium piece by Mike Rundle who's an iOS developer and designer and I think he called it something like Your Spring Animations are Bad and it’s probably Apple’s Fault.

And this one is, yeah, it’s a great title, isn’t it? This one is quite a detailed dive into essentially it's more of a code piece, but talking about why Apple’s out of the box animations are not that great. We see all these bad springs, these under-damped springs all over the place; they're pretty much mandatory in 2015 and he's suggesting a more intelligent way to approach spring animations and different libraries and so on, but it goes into quite a bit of the maths of damped harmonic oscillators and all these exciting things that maybe we’ll talk about later in the series.

Yeah, I’m looking forward to nerding out about that. But also then it suggests some practical stuff for how you can improve it from a code perspective as well and not just rely on these fairly mediocre ones out the box. And then for me, something I've been trying to do is again, recognising that we are part of this wider history of animation and motion is to read some of the classic literature and there are two books that I think come up a ton here. One is Disney's Illusion of Life book which you've seen mentioned, no doubt, in various blogposts and so on, if you're interested in the topic. I think we’ll talk about those twelve principles a bit later on, but I want to talk about The Animator's Survival Kit today as well, which is a book by Richard Williams and he was the lead animator on Who Framed Roger Rabbit? And it’s a classic animation book and it’s for a certain era where really it wasn't heavily computerised and so it was much more about timing sheets and keyframes…

Right, absolutely, and looking in to the detail and just the superb kind of fidelity of these designs and these drawings and so on, and it’s astonishing. But then it also generalises and talk about how do you convey emotion through, say, a character's walk? How does a bouncing ball collide and stretch and so on, when it hits the ground, and these are really important things, I think, to understand and I feel my understanding of animation emotion has grown significantly, just from reading that material, even if I’m not doing any self-shaded characters for a major motion picture; I understand some of the theory and some of the principles so much more than I did.

That looks a bit too much like hard work! I’ll animate some circles and buttons and page wipes and stuff.

Right. I guess we should spend a bit of time just talking about who else is coming up with interesting stuff in this field as well, because we are two people, part of a far larger movement, I think.

So, who would you recommend that listeners check out to find out a bit more about this?

Yeah, I’m happy with that!

That’s good; that’s what we’re all looking for! Pasquale was someone I’ve been following for a while and it was actually him who helped me realise that I needed to improve my general skills, rather than just diving straight into the tools, he started talking about yeah, you can do that, but read some of the classic literature; try and understand the medium, which was really good advice, so I thank him for putting me on that track as well. IÆm going to mention a couple of other people: Mike Rundle I already mentioned, who wrote that Spring piece; he’s an iOS designer who codes, I think you’d call him: he’s kind of a bit of a hybrid, he does both, but he’s very knowledgeable, particularly about iOS, as you’d imagine, but animation patterns and so on, it just seems to be a sort of focus for him and he’s @flyosity on Twitter. Again, we’ll include links to these folks in the show notes as well.

Right, exactly! And the other person I want to mention is Rachel Nabors, who’s very knowledgeable about web animation, some of the deeper code angles and so on, but she's also, I believe, a trained cartoonist and she has a bit of history in that as well, so she runs a practical cartooning course and writes a ton about this stuff, so I think Rachel has a really good amount to offer as well, so I recommend following her. She’s @rachelnabors on Twitter.