Transcription
The whole concept obviously is about motion identity. We've been doing this and celebrating this for quite a long time. I still think it's completely either undervalued or certainly not used as much as it should be. Um, maybe it's just not appreciated as much.
But we're all very familiar with all the other things that make up an identity, from color palettes to typography to imagery, photographic styling, graphics. All those things that are probably baked into guidelines time and time again. But the one thing that we don't think's really thought through in that way, and in the modern world now, completely should be, is the motion identity. Um, and how that would actually be part of your guidelines as well. Um, and this is what we're trying to get across today, really. It shouldn't be an afterthought. It shouldn't just be commissioned to a video or animation company, um, and they just do what they want. We need to think it through from the start.
So, we're going to get into that. These are the three core areas we're going to look at. So, the first part, get under the skin of the brand. So, how do you understand what your brand is all about to then determine how you go about creating motion graphics and animations? Then we're going to talk about how you assign rules for motion principles. And then finally, we're just going to show some examples of where you might apply them. So, just three clear stages to this webinar.
So, first thing, getting under the skin of a brand. So, for us, there's a number of things that shape a proper brand. Um, most of today is talking about motion graphics and animation, and probably the more the visual layer of a brand, so the identity that a brand is created from. But a lot of it is how do you actually get to make those decisions? So, one area we would look at is brand positioning. Brand positioning is, you know, relatively complex and such is a number of different parts of a brand and a business, but it does impact decision-making when it comes to design and animation. Again, going back to like the core aspect of creating a visual identity, we would make decisions based on what typefaces or fonts that we pick based on positioning. We would make a decision whether we have a lot of white space or we don't, whether we're graphically heavy. We don't make decisions around the style of the imagery and the art direction, photography. All of those ident things are made based on where we're trying to position ourselves. Are we a luxury, high-end brand, or are we a cheap brand, for example? And there's loads of tricks in design that have been created over the years to get to that point. But we still think that in the animation space and motion graphics space, this isn't really thought through. People just quite happily throw graphics onto a page or use PowerPoint style effects and stuff like that, but any type of brand, um, which isn't really appropriate.
So, if we look at this, um, graph as I talk over it, there's a number of different ways you can deliver motion graphics, um, onto a screen or a device or whatever it is that you're interacting with. And these are just ways that that might happen. So, a linear approach where it's moving at the same rate. And then you've got ease in and ease out. So, it's either getting slow to fast or fast to slow. And they all give a different feeling. But we try and look at things to say, how does it work in the real world? Because expectation there anyway from a human as to what happens in the real world. How does that then play out in digital content? How does that play out in motion graphics? So, we'll talk about things like, if you're playing tennis, for example, and the speed of your arm goes back and then how fast your arm might go forward, then it hits a ball, then there's a movement for the ball as well. All those things are real-world things that we now have an expectation of. And so, really, we're expecting that in brands that we now engage of online. And motion graphics can obviously give that sense of that feeling as well. Same if you're playing golf, you've got a similar swing. Ball goes up fast and high, then it starts to slow down, then it bounces, and then it rolls at the final bit. Yeah. So, there's loads of different things that happen in the real world. And we believe you should be trying to bring them into motion graphics. But you should also be making decisions on the positioning of your brand as to how fast or slow something moves.
So, I often reference the soft closed kitchen drawer. The fact that that's been around for a long time, but it was also, for me, generally associated with a higher end quality product. In the fact that I can push the door quite fast, but then it lands and the final two centimeters on it, slow, soft finish. Whereas another kitchen might just shut the cupboard and it hits the wood, makes a noise, and it's deemed a little bit cheaper. Yeah. So, we see all these things in life. We try and say, how do you bring into motion graphics? And then from a positioning perspective, how should your brand play out? Should it have a soft closed door, or should it not? And there's not a right or wrong answer unless you've got it in the fact that you're a luxury brand and you're not doing the soft closed door, for example. Yeah. The whole thing needs to match.
Other things that would influence it would be like a personality of your brand. So, if you defined what your personality is about, that could come through values and tone of voice and things like that, or a persona, or whatever exercise that you've done and established your brand with. The personality should play out through animated graphics as well, like it should for all other decision-making on color palettes and type and so forth.
So, if we look at this visual here, essentially these three examples are doing the same thing. It's a ball bouncing. Now, the first one is deemed from us as just being simple. It's doing exactly what we'd expect it to do. One white circle just bouncing simply. The second one, we've deemed as serious. You could argue the first one could be serious too, but the idea is there's an object now, again, doing as much as it needs to do. It's linear. It touches the square. There's a slight animation in it. And the final one is playful. Something we wouldn't see in the real world, really. We're taking it to an extreme level. Um, the shape and the ball and the floor all expand and change shape, so it feels more fun, the more enjoyable. Yeah. So, out of these three choices, again, when you're working with your own brand, some of these are right, and some of them are wrong. But you can only determine that if you know the positioning, you know the overall personality, and then you can start to define how your brand should move. And then you can build that into obviously guidelines moving forwards.
Other ways that you would shape decision-making, as we would when we manage brands for our clients or we develop a new brand identity. The brand values that a company actually stand for can shape all decision-making, and the same applies to motion graphics as well. So, if you've got brand values, you can obviously reread them, think how you could interpret them within motion graphics from some of the stuff I've just said. If you haven't got brand values, I'd highly recommend that you go through the process of actually establishing what they are. And if you haven't got them, but you're thinking, I wouldn't mind trying to implement some rules around motion graphics because maybe it's getting out of hand at the moment, then you could do an exercise like this, basically. So, you've got the complete extremes of what you might want to be, and you're trying to challenge yourself to say, well, which are we? Are we on the left, or are we on the right? And you can pick out as many as you want of these.
Let's say we take high energy and calm as an example. We did a webinar a long time ago where we used Butlins and Four Seasons as two, um, TV adverts that were produced and showed the animation. The Butlins one, as you can imagine, was high energy. It was lots of people in swimming pools and around the hotel, people going down water slides. The music was really fast-paced. The graphics and the type was really fast-paced. It's trying to give that energy that Butlins offers a family. And that's for some people, and it's not for other people. The calm side was Four Seasons. The video was really nicely shot. Everything was really slow-paced. There was minimal typography on it. The music matched as well. And so, there's a complete calmness to that. Again, that is what I'm ultimately looking for. And then I'd expect the same standards when I get to the hotel as well. So, it's pushing your brand all the way through to completion, but allowing the motion graphics to be determined based on what you're trying to get people to perceive.
Another one might be something like, um, adventurous or, um, you know, relaxed, or anything like that, basically. Saying like a Tough Mudder event is a challenge, that's adventur, quite a lot going on at a Tough Mudder event. I would expect the promotion of that to work very differently to something where I might be going to another event, which is like a fine dining or private dining room in a luxury hotel. I'm expecting that to be a lot more slow-paced and a lot more refined. So, you've got these two extremes to say, where do you want to be? That obviously taps into the overall positioning of your brand as well, and your personality and your values. But this is one good way of testing how far you can push yourself one way or the other.
And another thing that we spoke about to add to this is if your brand decides it wants to engage in a particular season. So, Halloween's on the horizon, for example. Some people might say, we can't celebrate Halloween, it's not right for our brand. But if you were doing it and you wanted to say, well, how do I deliver Halloween? When Halloween's all about scary moments, people might lean towards like a jump scare type approach first and foremost. Then I think that's not really going to work for our brand because ours is a little bit more slow-paced, a little bit more luxurious. But even in that, you could just say, well, if we're going to celebrate Halloween, there's two ways we could do it. One could be jump scare type approach, faster graphics, faster typography, certain type of music. But the other one could be actually quite a mysterious, ghostly storytelling piece that's got softer, slower-paced music behind it, and still got that scary element to it because the story is being told and there's this slower, drawn-out approach to it. So, both of those brands can decide how they want to engage with Halloween, but they could do it very differently. And again, this comes down to having some rules around how do we actually move and make a sound and animate our brand in the digital space.
And then you've got audiences to consider as well. So, in some cases, obviously brands do appeal to a broad range of audiences. In other cases, you've got a very defined audience as to who you're trying to talk to. Some studies will show that as you get older, your reaction time is a little bit slower, and it's harder to take in content. So, if you have an audience of an older age, you might decide that things that you do move at a slower pace so that content can be digested. It doesn't become frustrating for your audience. The younger end of the scale, things might be deemed that they need to be faster and quicker. Again, you've still got the argument with yourself to say, should our move so quickly? It was a luxury brand, even though you might want to promote it on TikTok. Yeah. So, you've still got challenges. And sometimes you need to do something that actually works within the platform, but at the same time, you've got to try and protect your brand. And you need to define who your audience is to understand how they're going to engage that type of content.
And this works through everything. You know, we talk about animation, which people might think about video, social content, that type of stuff. But even on a website, you can often find yourself go to a website, maybe it's not been particularly well-designed or built, or it's a template that's been bought online, and the parallax scrolling or the scrolling is is ridiculously fast and quite frustrating, probably frustrating for most people, to be honest. But it's clearly the type of thing you want to avoid if your brand was for like a care home or something similar, where you actually want people to be able to take the time, make considerations around something, and digest the content they've got. So, again, animation, deciding how fast or slow it should move, is based on a number of different things. But the audience would also be considered in that thought process.
So, if we go to assigning rules for for motion principles, these are just a couple of things. Obviously, there's loads of things, um, that we could go through. Um, but on these webinars, we're trying to touch some of the key points. You've got things like frequency of animation. So, we could all go down this path and celebrate motion graphics and animations and gestures as much as we like, but there could also be a time where we do too much of it, and that can then be overwhelming and actually distracting. So, actually, you move away from what you're trying to achieve. And it's trying to get the frequency animation right. You know, too much in certain environments is just going to be overwhelming for someone. For example, if it was like Times Square in New York, there are different brands fighting for attention, lots of graphics going on, but they're competing against each other. But you wouldn't want to do the same thing in your own space or your own platform or your own website. You don't need to overly animate things.
And then you've got frequency based on how many times does someone interact with something. So, in a navigation on a website, for example, it's a mega menu that drops down. You want to determine what kind of pace that might drop down at. But if you do it in a way that it's so drawn out and laborious, and you keep going back to navigation, you're eventually going to get frustrated with that. So, you've got to decide how fast or slow that should move. But not to the point where it's so slow that it becomes annoying. Where there might be other interactions on a website or on an app where you know they're only going to interact with that once, and actually just slowing it down slightly might actually give a nice feeling, um, to someone as well. So, it's trying to consider the frequency of things like that.
Things being slow, quite often categorized like 600 milliseconds, which seems probably by the sounds it's still quite fast, but that's actually quite slow. And if that's a repetitive task on a website, then obviously that will annoy most people. Um, other things can be just too fast, and then they either feel cheap, or they're just frustrating because you're scrolling past the content that you want, and the site has not been delivered particularly well. 250 milliseconds is kind of deemed as a speed feed, where when you interact with it, it's an enjoyable experience. So, sometimes you might, uh, use a touchscreen and you press something, and you notice something change, but it happens in a really short space of time. But as a human, you feel like you just achieved that. So, it's making sure that the frequency is not too much animation point of annoyance, but also make sure the frequency and the speed of the animation is appropriate for the thing that you're actually engaging with.
And then we've got consider human nature. So, I think in the digital world, a lot of people can be guilty of the fact we forget that we're actually still human. And most of the time, what we're producing is to engage with a human, or the number of people. And so, we need to consider humans at the end of this as well. Um, which goes back to all the things that I've said today, of things that you see in the real world, how fast or slow they move, how you interact with something. If I close a door and I don't hear it bang behind me, then I'll probably look back to see why it hasn't shut. It's the same for motion graphics, really, where you're thinking, if something moves across the screen and hits something, I'm expecting something else to happen. It rebounds off it. If you've got sound with it as well, you would expect a noise at the point where it bounces or hits something, just like we would in the real world. So, we're trying to consider human nature in in what we do. Again, the speed thing is important to try and get that right, because we can all get very frustrated and quite anxious in the digital world. And a lot of the time, for me, that is because things haven't been designed and built particularly well, or the animation or the motion, um, is more of an obstacle than it is an enjoyable experience.
And then you've also got things like attention spans as well. So, I'm pretty sure we're all aware of the fact that attention spans are reducing year on year. People find it harder to take in information. But there's a difference between some of your audiences again, and how much attention span they might have. So, younger people might have about eight seconds attention span. I think a study says Millennials, they're about 12 seconds attention span on on things like this. So, again, when it comes to motion graphics, animated content, we need to try and get to the point as quick as we possibly can. Um, or if it's a slightly longer format, making sure we're using enough words to get the point across, but not so many that people can't engage with the content, because people aren't willing to do that. Certainly at a top level, when you're trying to grab someone's attention, you just want to be able to get recognized first and foremost and get your core message across, then tease them through to where you want them to go next, which is quite often then a website. Then you've got an opportunity to engage with them there. And then if they want to do some heavier reading, or they need to do heavier reading, you've got them in the right place. You just got to understand that people are very limited on time. For them to notice what you're doing, it's got to be consistent and delivered well. But I appreciate the audience that you're talking to as well.
And then, you know, for me, one of the biggest things in branding anyway, and the success of the best brands on the planet, is about consistency. And again, motion graphics, if you think them through like we're going through here, and they're baked into your identity, and they're written into guidelines, and you can create a rule book about how these work. So, very much like for years and years, we've defined the values of colors, or what weight of fonts we use. All of them have all been baked into guidelines for a long, long time. We don't see many companies actually considering how fast or slow a brand should move. And if you can get that consistent, that means you can apply that consistency across everything, every digital touchpoint. So, you know, for someone like McDonald's, that would be from social content to a website, to mobile devices, to the touchscreen at the restaurant, to the display screens for the menus behind it. They've got loads of touchpoints where this is impacted. And making sure you've got consistency across each of those interactions. So, a button behaved the way you'd expect it to across all the different digital assets that you've got.
At the same time, with consistency, you might need some adaptability. So, as you'll see in a bit, some of our brand is quite slow-paced, and I'll give you good reason for that. But there'll also be times where we want it to be faster. And that might be when we're sharing our work in a portfolio of our work, where we believe we can speed up the content. So, at times, it needs to be adaptable because of your audiences or what message you're trying to get across. But the key thing is actually having some rules of how you want your motion graphics to behave. Um, and then that creates that consistency that we're all looking for.
So, before we go into where you might apply motion graphics, because they they can turn up in a number of different places now, and I think a lot of these are overlooked, we just want to stop for a second. So, we run these webinars, hopefully to educate and inspire and and give some guidance on the things that we're implementing. And hopefully, you've enjoyed it so far. What we're going to ask is, if you want an opportunity to learn more about this and have a session where it's more personal, and we talk about your brand, and we try and have a brainstorm about how we could implement something for yourselves, if you want to drop a yes in the comments, we can follow up on that with you. If we don't get any yeses, I can only assume two things. One, you think so far this has been absolutely rubbish and you've not learned anything. Or, it's been brilliant and I've taught you that well that you can leave in about five, six minutes and implement everything that I've told you. Yeah. So, there's those two options. If you fancy knowing a bit more, want a session with us all about your brand and how you can implement it, drop a yes in the comments. After this webinar, we'll be following up with an email anyway. So, you're going to get a full recording of this, so you can listen to me again, which is fantastic. You'll get a link to the article that this webinar is based on. So, we've got an article on our website which goes into a lot of detail about what I'm highlighting in this webinar, so you can have a proper read through that. Going to give you a link to our motion page, so you can see some of the work we do for other clients and how it varies from one client to another. We're also going to give you a link to a test stroke game, so you can look at how fast or slow you respond to animated content, and it'll give you a score and a time and stuff like that, so you can get a sense of the difference between people, um, maybe people in your team and stuff like that. Um, and then we'll remind you about maybe booking a slot if you've not put a yes in the comments here. So, okay, just wanted to have that little interlude. We're going to the final part now, just showing you where you might apply motion graphics and how far reaching it can actually be.
So, if you look at our brand, these are a few examples that you might may find, um, on our website, for example. So, you've got top left, hover state. We all know what that is, putting your cursor over an object, in this case, a button, and it goes from one color to another. Top right, we're saying that you've actually pressed it. So, the difference here might be that hover state works really well on desktop, but it doesn't work so well on a phone. So, you may decide that you have those two that look exactly the same, but there's a subtle difference between the way you interact with them. And the one way you press it obviously feels more like a touchscreen type thing that I have actually achieved that and done that. Same with other things like the subscribe to newsletter. The amount of times I just see them sat there in a corner, not particularly great. And do they need to be animated? Maybe not. Could they be animated? Yes. Does it give a nice feeling again that I've hovered over it, it moves up, and it allows me to fill in a space? We think it does. And then in the bottom corner is just a subtle interaction with an image. But you'll notice that the arrow goes pink at the same time, so you clearly know the whole thing is clickable. But if you look at all these graphics, I'd like you to think that they all feel the same. And the little interactions are really subtle, um, but they're fast enough, um, to be noticed, not too slow to be frustrated in.
And then this is a set of buttons we've done for a client, but it's trying to show how much consideration actually goes into a suite of graphics and buttons and what would happen in different states. So, you might have a load state, a hover state, a static state, or you've got inactive states as well. So, for an example, if you're filling out a form and you miss a field, sometimes it'll create an error, it might show you some red type somewhere, you've got to find it. But you might just say that you have an inactive statement for the button, so fields haven't been completed. And when they are completed, then the button becomes active and goes into one of the actual colors from the brand. So, you got expanding buttons, buttons with arrows. All of these are decision-making that needs to go into the whole of your guidelines and design system. But then some of it can then be animated as well. And there are little interactions that make the big difference on websites and apps. There's just a basic example of just a hover state, but it's showing you that sometimes a button might expand and then show an arrow. And then obviously building in rules and guidelines around the distance between the type and the arrow and the gap around the box. So, all your buttons then become consistent across all those digital platforms that we've just spoke about.
Other things, obviously, this is probably more commonly used by people, logo animation. But again, I often see logo animation just done like, "that'll do," rather than actually, how should our logo animate? And what kind of sound would go with that logo at the end? As is quite a subtle, slow-moving animation, again, nothing elaborate. We want it to feel a little bit more premium. We want our brand to feel like, in a lot of cases, slow-paced, a little bit like dawn rising. You don't really notice it come into play, but it appears over time. And then there's other times where we'll show our work and we'll speed up the brand. So, we kind of have a couple of rules in that particular space.
These are just examples of different ways to lay in type. So, some of these aren't appropriate for our brand, some of them we wouldn't use. They have a similar feeling, but there's a number of different ways that you could bring stuff in. So, if you look at the bottom left one, for example, it fades in, but it also has a flash of pink color before it goes white again. That might be a design rule that you apply to all typography on your brand, and then all messaging comes in a certain way. This creates efficiency for marketing teams and stuff like that, because you don't have to argue over whether it's too fast or too slow, or can it come in from the left or right. You'd have already written in rules as to how this would play out. So, decision-making becomes a lot quicker.
Then there's other things where you've got video content. So, it might move from one video to another. What is that transition? Again, we see loads of just average PowerPoint fades. We use the close-up of our identity and our logo to create these linear fades instead. So, it helps the content become branded. But again, when we get to the point where we're saying, "Oh, we need to transition from one thing to another," we already know exactly how we're going to do it. So, it speeds up delivering this type of content. And there's other things where you might be talking to camera, like I am here, but you want to do a little introduction to the title that someone can read whilst they're listening, and then it goes back to the full video again. So, they actually listen to the content that's being said. And then you've got like in-situ type animations where you're talking through the content. Maybe I'm saying certain things in the top left, it's listing all the things that I'm saying. In the top right, it's doing a list again, but I'm making four key points. So, we've delivered that in a completely different way. The other side is more showing that maybe content exists in loads of different screens. So, we're using, um, responsive treatments to that video type content. And then the final one is more full screen me talking to camera. But then sometimes you don't see someone talking to camera. So, we'll then show our work. Other times, we'll put type behind us. Different ways to interact with the content. So, it's not just flat, boring someone talking to camera. You've got loads of different opportunities and how you do it. But again, the speed and the movement, the way it interacts, all becomes one, becomes a really strong identity. And there's really subtle stuff like this. This is just me talking, and the bottom third here is saying my name and the title, which the way again, it's delivered, it's considered, it matches all the other stuff that I've just gone through. Um, real subtle touch, but it's properly thought through again.
And then finally, you can see all of that come together. This is a lot of this will be social content that we produce. But you can see obviously a strong color palette, a distinctive font, all the things you'd expect. But the way that our brand moves, comes onto screen, um, and is applied, is consistent in itself. And this is where we're trying to get a lot of brands to realize that these should be rules that are baked into your identity, and then part of a guideline. And then that's why your guidelines then would reside on the internet in a browser, because then you can actually show people how the brand moves and set some rules around it, whereas you can't really do that in a traditional PDF.
So, hopefully, that's given you a flavor of the importance of motion graphics. Gives you an idea of how you make decisions to bring them into your identity. Um, like all decision-making, it's complex to start with, but it gets easier when you start to put some rules in place. You get less personal opinion by bosses and other people from different teams, and you can make decisions quickly as a marketing team, or as a designer, or as a creative, and deliver things consistently. And the best brands on the planet are the ones that are most consistent and have most success. So, hope that's been useful. Um, just done it in the half an hour that I promised. We'll follow up the email with the links that I've mentioned. Um, and thanks for thanks for your time. Um, and we'll hopefully see you soon on the next one.