Episode 2: How many classic principles can you count?
In this episode Cennydd and Val take on the twelve classic principles and question which of them are most relevant to us today. They almost agree on the top five principles to pay most attention to, then vote another three off the island. The other four get to stay safely in the middle for now.
Episode Links
Transcript
Welcome to Episode 2 of Motion & Meaning; a little podcast about motion for digital designers. I’ m Cennydd Bowles, a digital product designer previously Design Manager at Twitter.
And I’m Val Head and I do a lot of design work, mostly for the web. In our first episode, which was the last one, we talked about why right now is the perfect time to be thinking about motion if you’ re a digital designer. In this episode we’re going to take a little bit of a step back in history and take a look at the twelve classic principles of animation: what they are, which ones are useful for digital work today and which ones, well, maybe aren’t.
So I guess we should probably start with some background about what these principles are and where they came from. You may have seen a fairly popular Vimeo video which animated some of these twelve principles and I think a lot of people have referenced that and I see a ton of blogposts saying, "Hey, we’ve re-discovered these twelve principles" and most of them are linking really to that Vimeo video, to be honest. But of course, that’s not where they originated: they came from the Disney animation studio of, I guess was it the ’30s and ’40s and ’50s, I guess that’s really when they kind of…
Yeah, it’s a really long time ago. Forever ago!
When they came up with this stuff.
But that Tumblr or that Vimeo which also is a Tumblr that video and Tumblr are really well done so it makes sense why people refer to them so much. But they aren’t really the actual original source of it.
Yeah, that’s right. I actually had a chance to re-visit that video today just as I was doing some prep for this and it’s really a really nicely done video. Obviously we’ll include a link to that in the show notes so if you haven’t seen that, definitely worth a go. But where the principles are from originally is, from Disney animation many decades ago and they’re captured in a book called The Illusion of Life which, I’ m looking over my shoulder, is by Frank Thomas and Ollie Johnston, it seems and this is a book that it was quite hard to get hold of for a little while, actually. It’ s only recently I think that it seems to back in print or widely available so I finally managed to pick up a copy. Is it one you have?
I have a copy of it and my copy smells like old libraries, so if it’s been re-printed, I didn’t get one of the new ones! But it is a really, really interesting book and I was really glad I grabbed a copy because I thought it was interesting how the twelve principles are such a small section of this ginormous book; and that’s the thing we’ve all pulled from it.
Yeah, it’s strange, isn’t it, because I think as you say, people have really seized upon those and say really, well, these unlock the secrets to animation. But the book has so much more subtlety and detail and maybe it’s our listicle kind of mindset that we all seize upon these twelve things and go, well what we need to do is tick these things off and suddenly we create wonderful motion design, wonderful animation. But you’re right, there’s so much more in that book that I think warrants further exploration.
And in the book, they aren’t really even a list, which I thought was really interesting. I was expecting to see a Wikipedia-style list with headings and definitions. They totally don’t do it like that. I guess listicles weren’t cool in the ’30s!
Right, exactly that! So I guess we should probably talk about the principles and go through them in a quick summary…
Yeah, definitely.
…just for the benefit of people who aren’t aware of them and then we’ll get onto what I think is probably the more interesting stuff which is, which of these is actually valuable for us doing digital work today and which ones are perhaps not quite so relevant any more? So, I’ll kick off, I’ll take the first couple. One of the first that they mention is what they call "Squash and Stretch". Really, this is the idea we’ve all seen in cartoons which is that objects deform under motion; so, when a ball bounces against a table, it might squish down, or when a frog jumps off a lily-pad it will stretch. So, under motion, under gravity, on collision, objects really deforming and as the name suggests, squashing and stretching. Really, the idea here is it gives the illusion of weight, of mass, of a bit of vibrancy and life to these things. So that’s something I think we’ll probably recognise from even just watching cartoons as a kid.
Definitely. I always like to think of this one as kind of indicating what the object is made of. If it’s really squishy and jello-y it’s going to squish and stretch so much more.
Right. I think, in the book, don’t they talk about a bag of flour and they animate essentially how a bag of flour can communicate all these emotions, just by squashing and stretching to indicate that it’s depressed or belligerent or crying and so on, from the way it’s deforming and it’s amazing how much life they actually bring, just from those really simple principles.
And what a subject for that: a sack of flour! You don’t think of that as expressive.
Exactly. And then the second one they mentioned is anticipation. So, the idea behind this is really you’re preparing for an action. I think the example they give is a golfer, before they hit the ball, will do a backswing and before the backswing, their hips will turn and so on, or a high-jumper will bend at the knees and so on. Really what it does is it cues the audience for the action. There’s another example that I read somewhere which is that if there’s some dialogue that’s going to happen off-screen, then a character may look to the left or the to the right, essentially guiding you mentally off-screen, to prepare you, so it’s really all about cueing up for what’s happening next.
And then another one they mention is Staging. This one I think has some fairly clear parallels in the work that we do. It’s really about directing attention to what’s most important, so it’s really just communicating what needs to be communicated and nothing else: it’s really about just making sure you’re focusing on the right thing, so if you have a complex emotion to express through animation, through motion, it’s making sure that that’s front and centre or that it’s highly visible or detailed, rather than tucking it away in a secondary part of the screen, really giving that the prominence it deserves. When I look at what they say about staging, that seems to be quite related to the work we do in terms of prioritising user tasks on a screen or simply just laying out content; type hierarchy and things like that: make the important stuff clearly visible.
Yeah, when I read it, it feels a little bit like something where you’re thinking about user flow or just like you said, hierarchy, or even getting into some art direction stuff where you’re like, what am I actually trying to say and how am I going to say it? Let’s make sure we’re actually saying it. So it definitely fits into a bit of those. So, going further down our list, because there are a whole twelve. Straight Ahead and Pose-to-Pose is one of the twelve principles and this one’s very focused on drawing. It’s basically defined as drawing frame by frame or drawing in the key frames and how you fill them in; how you fill in those drawings, so not to totally foreshadow it later in the podcast, but I feel like this is one that’s less relevant to us because we’re making the computers do all the drawing: we’re not doing that. Very little drawing involved, usually. There’s also Follow-Through and Overlapping Action, which essentially means that things move at different rates; not everything stops at the same time. Often, things might even move in the opposite direction, like clothing or bits of arms and legs and that kind of thing; that will lag behind the main part of a character’s body when they stop; their arms might keep going, clothing might keep going if they have a big cape or something. In cartoons a lot, there’s that whole thing that you’ll totally recognise of a hat being left behind in mid-air when a character runs away really fast: I always like that one!
Right! The other one that comes to mind is when you see in a cartoon there’s a really fat guy walking and he’s bouncing up and down and his belly will generally move in the opposite direction to his head, so the head will come down as the belly goes up and it’s just that kind of exaggerated opposing motion I think, really encapsulates what they’re on about there.
Yeah, yeah, definitely. I like the fat cartoon character reference. I kept seeing that. There’s also Slow In, Slow Out, which is one that goes all around the main movement of the animation and it basically says that for realistic motion, velocity and acceleration have to vary and the most realistic motion generally is something that starts slow and ends slow, kind of reinforcing the idea that as real objects in the real physical world will usually start slow and speed up to full speed and then slow down before they come to a stop.
I think that’s an interesting one, and again, we’ll talk about these shortly, but I think that’s an interesting one again because of the way it models the physics of motion which is, as people may remember, I alluded to in Episode 1 and I’m sure we’ll talk about it in more detail further in the series. That really excites me, to try and make sure that we have that kind of physical reference point.
Yeah, and that just reminded me of a really good physics question for you later!
Oh great, I’ll look forward to that! Another one that’s kind of related I think to physics is another principle which is essentially Following Arcs and the point they make there is that really, very few natural motions occur in a straight line; they always occur along some kind of curve and so the examples they give are walk animations, for instance: the heads or the arms or the centre of gravity of the individual or the character will tend to oscillate along a gentle curve rather than straight down, straight up sharp movements. It just has that kind of fluidity and that natural motion, I think and perhaps this is one we can talk about a bit later as well, because I think there are some interesting things we can learn from that.
Yeah, I think so to. I was like: nope, nope, nope: mention it later! That was my internal dialogue there!
They also mention Secondary Action, so this is principle number eight or nine, whatever we’re up to. Secondary Action essentially is the idea to try to give a scene more life; create a secondary animation or a secondary motion that supports the main one, or that adds a bit of vibrancy, a bit of character that reinforces it. If you’ve got an angry duck stomping along, then they might be leaning forward but the arms might be swinging as well or sweat beads might be pouring off their head and so on. It just helps to lend that almost redundant kind of reinforcement to the main action there. Or if you’ve got a steam train ploughing along, you might have steam popping out at a regular interval as well to reinforce, that maybe up and down motion you sometimes see in cartoon trains, that sort of deal.
Yeah, definitely. I love those examples! Timing is further down the list though oddly a lot of the time it’s reference is kind of the most important, or actually is the most important. And classically it’s defined as choosing the right number of frames for an action. Essentially, when you’re choosing the right number of frames, you’re choosing how long that action takes or how much time it gets to complete its motion, so it’s giving the motion an appropriate speed for essentially what you’re trying to do, what’s moving and what you’re saying.
Yeah, and I think in the book originally, I think the timing aspect was based much more on number of frames that you draw individually. And again, we’ll talk about how that translates to the modern era, but there’s a broader sense of it as well: it’s not just about, is this one frame or two frames for this particular pose, but also how do you make sure that you have that natural feel that doesn’t seem jerky or that gives the appropriate amount of detail, I suppose, to a particular motion.
Like, enough time to read the motion, in a way?
Right, yeah. Is it something that happens gradually or is it something that can be instantaneous and then that itself communicates a different thing.
Exaggeration is another one on the list and this one I think is pretty fun and I was always surprised it was on the list, actually: it wasn’t what I expected a principle to be. And exaggeration is essentially the action of highlighting certain movements beyond their natural state. So, animations or motion that is so exaggerated that it seems like it might break the joints of a character, like their arms stretching super-far, further than it ever could and just really, really exaggerating, obviously to call attention to something. Hopefully that’s really important, but it’s an interesting one.
And I think that’s very much that old cartoon-y style that you really get this kind of squashy, over the top kind of bouncy character and I guess they do that by having a lot of those subtle in-between frames that do things that are just physically impossible, but you don’t notice, you have that suspension of disbelief which, yeah of course their head suddenly fits into this tube or whatever it might be, without causing them enormous damage: they can get away with that; cartooning and animation gives you that kind of leeway if you like, to be more adventurous.
Yeah, it’s like even though these rules are very much for creating life or making things realistic, they also get used to make a different version of realistic; realistic in their world, not ours.
Right
Solid Drawing is another one on the list and it’s basically the idea of having really good 3D drawing skills or really good draughtsmanship; making sure that the character you draw has some mass and depth to its body that we aren’t all just drawing stick figures but to a more detailed extent.
And then there was one more on the list which is the idea of giving animations Appeal, so, ensure that the characters you’re drawing have charisma; they should be real and believable and interesting, far more absorbing for an audience member or a viewer, if they actually believe and care about the action that’s going to happen on screen, the plot if you like and the characterisation that that encapsulates. So those are the twelve that are kind of regarded as the classics of animation and like I say, we do see these a lot in blog posts these days around digital animation and motion design for products. But I must confess, whenever I see that list, I kind of think someone’s really not given it a huge amount of thought: they’ve just lifted it from the book, they’ve seen the Vimeo video and they’ve thought, "Well hey, this is great, this is all you need to know". But I think it’s worth questioning whether all of those are really relevant.
Definitely. And I think it’s worth questioning whether the classic definition applies to us in the same way, because I’ve seen a lot of those articles too where they’re like, "Here’s the twelve principles and here’s what they mean to us when we’re doing web design or app design." But I think sometimes our definitions aren’t the same, because we’re not dealing with characters that are kind of human-like. We’re dealing with essentially a bunch of rectangles, to really simplify it, but those aren’t characters; they are different and I feel like our definitions, we kind of need to change what these mean for us, because it’s still good to have them and appreciate them, but I don’t think we can be like, this is the defined definition: must never stray from it.
Right; I totally agree. Far be it from me to…I’m no master of animation; I’m sure these are terrific principles for animation in its classic sense and far be it from me to say that they’re wrong. But equally, hopefully as someone who understands the domain we’re in, there are going to be some that just skew more valid for us because we have a different medium, we have a different set of tools as well and also we have that kind of interactive and responsive feel that classical animation or a cartoon or something doesn’t have: it’s very much a one-way experience where that interactivity may change things for us.
It changes. I was going to say it changes everything, but it doesn’t change everything: it just changes a lot! But it’s a big factor. So, shall we start with the ones we think apply most or the ones that we think apply the least?
Yes, I think what we should do is maybe let’s just pick five or so that we think deserve our attention in the digital realm probably more than then others, then maybe for fun at the end we’ll pick three or so that we can probably live without, that we can probably discard.
The three we’d vote off the island?
Right, yeah, exactly! So, for our top five, I don’t know, do you want to go first? What do you want to nominate of those twelve principles?
All right, we’ll make the list as we go, but the first one I would say is number one is timing. I would say that the timing is everything saying is totally true. I think that, and for us I feel like that’s most the duration of how long our animations take, though I have seen other definitions of timing, not so much in the Illusions of Life book but in other ones like The Animator’s Survival Guide that breaks it into timing and spacing. And I think those two together, timing in general, is really, really important. It’s really important to make animations that feel like a conversation when people interact with them and it says so much about the emotion and what you’re moving that I think it’s probably the most important one.
I think that’s a pretty fair case, to be honest, for that one to be included. I guess where digital folk come at it differently is just how we think of timing; it’s not going to be mentioned, about the number of frames because we don’t really think that way; it’s going to be about milliseconds of duration or perceived velocities and things like that. That actually reminds me: I have a little motion trick. I generally default to 200 milliseconds for any transition as a starting point and then I say, should it be faster or slower. But I also have been know, occasionally, when I’ve been working on products at Twitter for instance, every now and then I’ll just crank up a transition speed before a release and just tighten one up every now and then and every time I do that and release the product, someone comments: "Oh this version of the app feels just that bit faster, they’ve improved the performance." I’m like, no: just made it 150 milliseconds rather than 200. But even that small timing change makes a big difference to how you perceive the app so I think that’s definitely one we should include.
No, and I’m glad you brought that up, that particular story up, because I quote you on that in a number of my talks of just being, yes it does make a difference: the tiny differences add up. And here’s what Cennydd did, so it proves it, so I like that you validated, that’s a real story, I didn’t just make it up!
Right. It’s definitely a hack-y concept; I wouldn’t recommend it too much because you run out of transitions eventually.
Yeah, but I think it does illustrate the point that timing isn’t something you just get down. You don’t assign a number to it: it’s more of an art than a science. It’s not like, .3 seconds or whatever for every single thing, it’s like you have to design it, you have to look at the overall picture, what’s going on and how these all fit together and it’s not like a set-it-once-and-forget-it kind of thing.
Right. And also, you might want to set timings in relation to other animations, other motions that are happening, and that really takes you into the realm of choreography of different elements, which is something I think we’ve got planned to talk about in future episodes, so just to give you a little teaser of that.
I’m pretty sure we could do an entire episode just on timing, maybe two?
Yeah!
So let’s move onto number two on our list. What would you make number two?
I’m going to nominate arcs because I really like this idea that things don’t happen in straight lines. Pretty much the only natural motion that happens in a straight line is something falling under gravity; something stationary falling under gravity and that’s really only because that’s the way we define up and down, because of gravity, so we deem that a straight line. Straight lines are all about reference points and so on from a physics point of view. But I don’t think in the digital world we’ve really got to grips with the idea of things moving along arcs; it’s very much up and down and right angles and expands: maybe that’s why some of these motions, some of these animations, don’t feel as natural and as interesting as thy could be cause we’re not following this very basic principle, so I think this is one I think we should be paying more attention to.
I totally agree and I think the main reason why we stick so much to straight lines and angles when it comes to animating stuff on screen is, that’s what computers do best, right? If you’re just like, go over there, it’s like, cool, I will take the straight line, shortest distance. If you change the X and Y properties and say, go over to this X and Y co-ordinate instead, I can’t think of a computer-based animating tool that would not take a straight line by default: you’d have to tell it to curve and curves are harder math; it gets into all that geometry stuff and it’s tougher, it’s not the default: we have to add it in on purpose and if we don’t think to add it in on purpose, we just wouldn’t.
So Val, you’re surely not suggesting then that design is sometimes driven by what’s technically easiest to do?
No, no, not at all!
That’s just unforgivable!
I think I also suggest that people do more math so that’s not that either! But it’s true, we get used to our tools and how they work and that’s just not something that happens by default.
Right, yeah, that’s true. OK, so we have Timing and Arcs; I think it’s your turn to nominate one.
: All right, I would say kind of in the same realm of Arcs is Secondary Action. I feel like, especially on the web and maybe less so in apps; I’m not sure, I haven’t really looked at it too closely but I feel like we often move things on the web, if you think of your classic carousel example, we move everything in that carousel slide as if it is like an old-school slide, as if it’s all etched on glass into itself and none of the child elements are ever allowed to move differently than the parent element. I feel like we’re giving up a whole lot of opportunity for secondary action there: if we let those break apart and be the steam on a chugging train or whatever else, we never really get to that point where we have separate elements; we seem to really force them to all be together.
That’s really interesting. That’s probably not one I would have thought of as nominating as one of the key ones but you’re right, we don’t really do that kind of stuff; we’re very much: oh boy, we’re doing some animation, so we animate this one thing and everything goes with it and it does feel essentially just like a very simple scale or a swipe in or a slide and you’re right, maybe there is potential there for a slightly more interesting subtle or thematically reinforced piece of motion there which is pretty rare, I think, at the moment.
It is and I realise that’s not really the straight-up definition of secondary action but I feel like that’s what we need to do to break into that and think about it is realise, this paragraph is not attached to its container in some strict way: it could move differently.
Right, interesting.
That’s my number three!
OK. I’m going to throw Slow Out and Slow In into the pot.
Oh, really?
Yeah. OK!
Sorry, that was a terrible reaction: I sounded really stuck up there, it’s like, hmmm…
Controversial one, this, all right! I think partly just because we do it already. I think a lot of people who start to play around with motion, one of the first things you realise is you can’t just make things linear; you can’t just say, well it needs to move from position X to position Y, therefore you move it a fraction of that distance every time. There needs to be some easing: easing is obviously what we essentially call, you ease into an animation, ease out of it, which essentially you can substitute the word "slow" so you go slow in, you go slow out of the transition; it’s the same thing. Now, whether we’re doing that because we really understand we’re doing this to mimic some of the more realistic aspects of motion around variable velocity, variable acceleration and so on, or whether we just intuitively look at it and go, "Yeah, that looks just a bit better". I don’t really know but it’s one of those things you pick up fairly quickly but you can also lose a ton of time just really tweaking the specifics of that, so I think it’s something we need to understand better, that deserves a bit more rigorous thought, I guess.
Yeah, because I was originally going to leave it out of the top five and my reasoning was, especially on the web, it’s really hard not to do it; basically, our defaults are already set to have some kind of ease in, ease out situation so as far as a check-box goes, I would leave it off, but I like your definition of making this seem more like the idea of considering easing in detail; I like it in that sense, definitely, but just as like yep, add slow in, slow out, it kind of just happens sometimes, it’s just there! But I like it.
And maybe that’s why we need to pay more attention to it then? Maybe it’s almost too blunt, yeah, well course we do an ease in and out and you apply your bezier functions and whatever they are without really giving thought to, well, does this object have mass? What’s pushing it? Is it colliding with anything? What are we trying to communicate here? And I think it’s just something we put in, like, yeah, of course it’s going to ease in and out. Well, why? What’s the point of it?
It’s like how fast does it speed up? How fast does it slow down? How much does the velocity, there’s so much in there.
Yeah, yeah. OK. So we’ve got room for one more I think?
Yeah, this will be the last one. Oh, is it my turn? Oh my goodness, so much pressure!
Yeah, I think so!
I would go with…hmm…which one would I go with? We were talking a lot about Staging, so I think I’m going to throw that one in as one of the top five, although it’s tough to just pick five, but the idea of giving…I guess more like planning and staging the animations that we’re putting in there, actually giving them room to communicate, making sure it’s something that is important and worth adding motion to. I like that definition that you added in there of it being related to the layout, user flow and art direction of what we do digitally; I like it in that sense a lot for being an important one.
Interesting. So this is probably where we’ll differ, because I was going to say, this is one of the ones I’d throw out.
Oh really?
Yeah, only because it’s kind of so obvious that if you’re not doing this, what the hell are you doing?
That’s funny!
We all know the secret of…well, one of the many complex secrets of design, but an important facet of doing good design is to make sure that the easy things are easy, the obvious things are obvious. And if you’re not spending time clarifying what exactly is happening on one screen and how it should communicate and so on, then you’ve lost design direction way, way ahead of any animations that you choose to use, so I just saw it as a natural extension of the way that we think about these things, so maybe it’s one of those that it’s so important that I had just mentally crossed it out because, well of course you do that.
Well, it’s funny: before we actually started this episode, I would have left it out too and it was your definition earlier that convinced me to put it in! Weird how opinions change like that. But you’re right, it is something that’s kind of like, if you’re not doing that, with just design in general, what’s going on. Although also, when we start animating things, it doesn’t mean you can throw out all the other regular design ways we make decisions; it all still applies, it’s not a whole different world that’s just another tool we can use. Shall we do a sixth, and that five, the fifth one is so unsure?
No, that’s fine, we said five. We’ll stick with that. The disagreement is part of the fun, I think! If it were that obvious then this would be kind of a boring podcast!
Yes, so the three we would vote off our island, the three to not care about?
This is kind of more interesting to me, to be honest; which ones of these? The obvious one is Straight Ahead and Pose-to-Pose;
Yeah, that’s the obvious one.
When I see that parroted in a blog post again, that’s the one that makes me think they haven’t given any thought to the digital realm.
: A lot of times, people are like, well you should draw the animation out before you do it, but I’m like, that’s story-boarding, that’s not what this principle is about. So yeah, that’s the easy one definitely.
Because I can’t imagine any situation where you’d approach an animation and say, well it starts here; where does it go in the next split second, because you don’t have that frame by frame kind of mentality. You’re going to have a trajectory in mind, you’re going to have a destination, so essentially, you’re already doing the keyframes, so I think that problem just doesn’t really apply in the digital world.
With our different tools, it doesn’t really apply so much. I think it’s funny because we both picked one that the other one would have left out so now I’m like, oh no… I would say another one that we don’t really need to pay attention to too much, similarly because of the drawing, would be Solid Drawing. I feel like we’re not…if you are using 3D you should give things some depth but I know, that’s almost like a whole different kind of 3D for us. We tend to work in the postcards and space 3D where things actually don’t have depth because they just don’t; we don’t tend to work in that part of 3D, I find.
And I think also we have to recognise the influence of flat design here, which is obviously significantly a trend: it’s not entirely a trend, I think there is value and virtue behind it, to be honest: I’m actually a supporter of flat design. However, it doesn’t leave us much opportunity to offer this kind of depth, this dimensionality. Now, whether that’s going to change in the next couple of years if we have an anti-flat movement, which we will do, there’s always a reaction against what came before, so I guarantee in the next couple of years we’ll see more of this kind of three-dimensionality, we’ll see elements with more body and mass and depth and rotation and bulk to them. But it’s not really relying on the same qualities as espoused in the twelve principles; it’s not really about fine draughtsmanship and making sure that your characters are posed wonderfully: it’s a very different type of thing, I think. That feels like one we can probably live without.
We can say we predicted it here first, the response to flat design will be everything is cubes!
Right!
All right, so we need to pick one more. This is going to be the tough one. What’s the third?
Whose go is it?
I think it’s mine! You know what? I would say…what would I say? I was going to say Slow In Slow Out but that’s in the top five. No, just kidding! I think I would say Exaggeration. I feel like on screen, just by making something move, we’ve kind of already hit exaggeration and there’s very few times when we really want to exaggerate it more, that it’s just not something, not that we should be like, never, ever think about it, but it should be really far down the list.
Yeah, and I think to be honest, given that we’re coming to an era of motion really from an era without motion, if we go too far in that direction, then we risk creating things that are just inappropriate and poorly done; we’re seeing it right now with all these badly done springs and so on; I think exaggeration only really works when motion is just widely accepted and understood and just a natural part of interfaces and maybe there’s a role for us to play with that more when we get to that kind of level of maturity in our UIs and in our products, but for now, yeah, it seems like a road I’m not sure I’d really want to go down.
Yeah, it feels like it’s not something we need to consider too much and like you said, if there’s a higher baseline of motion, then you need it to be like, this really, really needs attention because everything’s moving, but I don’t think we’re in that situation.
Yeah, I think you’re right. OK, so…
We’ve made our lists!
Yeah, so that’s I guess our list of where we think the twelve classic principles of animation, how they apply right now. I think in our next episode, we’ll probably spend some time talking about, are there any principles that are missed off that list that might apply better to the modern world? So, look out for that in our next episode hopefully. Before we go, we thought it’d be good just to talk a bit about what we’re seeing day in, day out; any good examples of motion we’re seeing in apps in the wild and then also interesting folks who are talking about this sort of stuff as well because we recognise it’s a big and growing field with a lot of interesting perspectives.
Yeah, there’s a lot of good stuff going on out there. A couple of things I’ve seen recently in daily internet life that I thought had some really good motion: Campaign Monitor’s Canvas, email editing tool. I think it’s a fairly new thing they’ve released and I thought they did a really good job of just adding some of these helpful UI animations to let you know what it is you’re doing as you add, remove and edit things from your email. I liked it a lot. In a similar vein, I really like Stripe Checkout. If you’ve re-apped your Dribbble Pro account, that’s the one I always see it on, but a lot of other people use it too, and they’ve just done a really good job adding animation to two things that kind of suck: paying for stuff and forms and they’ve just done a really good job of adding these in, in a very natural-feeling way; they really help and I know they put a lot of thought while they were designing this, how to get animation in there in a good way and I think they totally succeeded, so I like that one a lot.
I think you’re right, by trying to humanise some of those otherwise pretty dry experiences, I think that’s where it can add just that little bit of enjoyment, so yeah, nice examples. The one that springs to mind for me is it’s only a subtle example, but in the British Airways iOS app, which I was using early this week because I’m actually going travelling for a little bit and I was just playing around and it’s got some fairly mundane things: it has your hamburger menu and you tap it and it slides out and that’s all very functional, not very interestingly done, but there are a couple of nice touches; there’s a cheapest fare pick, so it’ll give you an overview of, hey, if you want to fly to Athens, here’s the cheapest costs over the next twelve months and there’s just some nice little animation touches there, nice zooms in, so it has these topical images: in Cairo it’ll be the Pyramids and all the sort of stuff that’s nearby but there’s a nice zoom and a nice blur when you go and it just gives you that sense of diving into that area; it gives you that kind of sense of space, I guess, location within the app. And then also the fares, the way they come in, they come in, essentially it’s a bar chart, so some are longer than the others; if there’s something that’s a £1,000 it will be 30% longer than something that’s £700 and so on. But the way they bounce in I think just helps to reinforce the length and that really is related to the content, so it’s not just something that’s there because, hey, it looks nice and it’s cute: it’s actually helping to communicate. OK, this is the expensive month’ this is the cheap month: you should focus your attention there. So I liked the fact it wasn’t just this surface stuff, it was actually related to the functionality that you really wanted to get.
Yeah, those are always the best ones. This is totally helping get this content across and it looks great: you’re like, yes: perfect.
Absolutely!
You want to give them a high five through their app, because that’s possible. Anyways, so a few more people who are talking about this stuff on Twitter if you’re interested in motion, motion design, whether it’s in apps on the web or whatever, we have a list of some people that we think you might enjoy following. Ryan Brownhill is one. He’s working at IBM currently and he’s working on their motion style guide. Basically a motion related style guide things they’re going to make public at some point, at least that’s been rumoured, so I’m looking forward to that. And Motionographer is a really great site I found. They mostly focus on motion graphics but they’ve been sneaking in a few articles here and there about UI animation and I think it’s very interesting that they’re writing about this from a perspective of people who have been trained basically in motion graphics; their take is a little different than ours and it’s interesting. And as a last one for this episode, Art of the Title is another really great site I think everyone should follow. They are also more in the classic sort of motion graphics area; it’s a whole gallery focused on the titles for TV and movies. The very interesting part is that they tend to interview the designers behind these titles and they talk about why they made the decisions they did for things like type and motion and I find that stuff really interesting and you might too.
That was a look at the twelve classic principles of animation: what they mean and what we think of them and we hope you enjoyed it, so if you haven’t checked out Episode 1 already, you should check it out and stay tuned for Episode 3.
You’ve been listening to Episode 2 of Motion & Meaning with me, Val Head and Cennydd Bowles. You can find out more about the show at motionandmeaning.io and we’d love to hear your feedback on Twitter. You can find us there at @motionmeaning. We’ll see you again soon
Transcribed by Alison