Okay, so let's start! hola How are you guys doing are you a little bit uh hungover How was last night? I didn't make it. Yeah, I Heard there were free drinks and stuff. That was cool So today we're going to be talking about UI animation yeah, and Because your animation is so hot right hot topic. Just like I chose to because I I want to be trendy but not just UI animation so we're actually Talking about good to great UI animation It's a it's a no its clickbait the title, right? That's what I went for And we're going to actually have at the end just like practical tips to improve your micro interactions See all just like key key words that I'm using on my titles here So let's uh, let's get animated. Okay It's a pun intended there So today's menu We're going to be talking about me a lot Just me we only have like 25 minutes, so I'll probably Want you to be as fast as possible. That's where I'm going to be like this We're going to be talking about just my ideas of why animation was important Some basic properties of how you things that you can edit when you create UI innovations Some animation tools to you animation tools and some practical tips at the end. So let's or goal at the end is probably make it feel obvious and And just like rolling your eyes but in a way, it's it's good Right because if it is obvious then it's it just it makes sense Right as when you don't have to think about it it stop just happens So hopefully we get to some principles behind to get to that place some of the sources of what I'm talking about was it's Just like stuff from smarter people in me From IBM and animation design and also Google material motion. A lot of this stuff is also coming from inspired by that And also yeah, my name is me number is Pablo Stanley? I Didn't know there was going to be an introduction So yeah, I also just like I'm going to talk a lot myself a little bit I so in the Sangha door That means the designer. So everybody with me say be saying yeah door The saying yeah door That's that's a fancy way of saying designer now you can has the any from espanol so It it's gonna turn into a Spanish class here. If you don't learn anything about your animation at leisure you learn that So I do a lot of illustrations That's one of the things that I just love doing. I Love illustration so much that I even turn a library of illustrations, which is probably the most boring way to create illustrations just like with that little elements and then suddenly the Illustrations appear. I also made one for or future overlords the robots I made one. They're just like the same constant just like a lot of like Legos, you know You form them together. I do a lot of art see parts of stuff to you. It's just like paint and If you can see, I have kind of a thing. I have a Samba face. I don't know like pac-man illustrations and everything was related to and I also write comics I Do have a comic series called a design team? so if you want to check it out, it's uh It's about of the design team working at a start-up in Silicon Valley and talks a bit about Actually my experiences when I moved here when I moved from graphic design background into a start-up in Silicon Valley and suddenly Working as a UX designer and not knowing what the hell was that? I'm still trying to figure it out And yeah, it talks a little bit about that and it's just like just a demo of one of those comics I'm going to act it and then the product manager said Let's just use this design. I made a PowerPoint No Design or stories everyone design team So, oh yeah, and by the way, I also do UI and UX design probably that's why you're here now to read my comics, so so Yeah enough about me. That's that's it. That was it quickly now, let's talk about UI animation and and Before we actually get into the tips and and all those Really specific things. Let's actually talk about why probably even some principles that can guide us and the principles are One one way that I think of you animation. I think of it as a as the body language of a product and it's like a two-way conversation and but what I mean, is that probably Again, this is a metaphor it's probably not the best but I like to think it that way where it's like probably this is my UI how I look and what I'm saying my thoughts my interaction is that's that's probably the UX the experience that part of it the interaction and then it's just like how I actually move and and and how I express myself, that's the UI animation and and in a person hopefully does and Some principles and these are principles that I just put together That probably is is going to be something that you your team your company Puts together about like, how are we going to you use your animation? But I think this is a good way to start It's above all it starts by being functional It feels natural and it can add a little bit of character. Some people say delight so it's functional and Who we don't see that the shadows there, but there are some shadows there Above all it's just like shows hierarchy between elements and the actions that are available What is happening and what will happen if an action is taken it gives you a little bit of visual feedback And I love this example is actually from the new design front material And it's just like we used it there's no error message there's nothing telling you like Oh wrong password, well you did it wrong It's just like a little bit of animation that is telling you and you exactly know what what happened It also tells you when you're right. It's just like a tiny little thing that tells you a ton of things, right? it's it goes back to the Body language, it's just like if I if I weren't able to tell you eight you did something wrong. I would be like You know, it's something like that and then the next thing that I see is that it feels natural and Where we're go with this is that uh, the qualities of it. It's just like it feels like it's it's tactile that it responds to your to your fingers to your It also it's choreograph in it, and it feels graceful and it uses forces of the real world like it's something that just makes sense that you elements act as You expect them to act because we are used to if I were to throw this it will fall down It will it wouldn't just start flying Probably you can use those kind of Thinking when you're creating you are animation, it's something that just makes sense and also can add character this is from From designing code. This is just a little bit of a parallax and a little bit of just a tiny effect down there that it keeps you a little bit of hint of that something is different and Usually adding a little bit character and delight it's it's a little bit tricky because it can be subjective But it can celebrate moment moments of of the user journey Something that they do and they tell you eight Everything's good in let's go to the next thing and express this also a brand's personality and style so What can be improved? With animation and I think one of the things it's just first thing is visual feedback in chill or rotation Tell you where to go it can focus your attention What is necessary? What's what's the what's the next step? For example, you can get give you a sense of cause and effect and Express like I was saying a brand's personality. So let's go to gives feedback Here, I don't know if for those that use iOS or an iPhone It's just like a lot of things here happen It just tells you what's going on you bought it and then it's downloading and then it's telling you like a double click to pay It it's just like little elements that it's not they're not too obtrusive but just Little things that are telling you and directing you where to go It also chose orientation. Well, what is next what what you should be doing? it kind of Educates you on on the next thing and it tells you what's next where to go and also focus your attention It can remove unnecessary elements and just like direct you to the next thing. It's a It moves to the right place probably removes the clutter and then it's just like zoom in into something like this example from Google Maps It also can tell you a cause and effect when you something that you probably expect in the real world You move something and you expect it to act in a certain way You can also educate you and tell you how things are going to behave when you interact with them. So just like the real world and Again, it can express a brand's personality. You can use it also for for those little Moments of the light and it can also be used I don't know if you've seen this But I also make some error states feel less like errors and something that you hey, everything is ok. Just like go back it makes your product in a little bit feel alive and and and and it goes back to having that conversation that Conversation where your product is not just the product but also the people people are making it having that conversation with the user So, okay Questions. No, I don't think I can do questions. So tools a lot of tools out there to create UI Interactions. I'm going to list a Lot of them and I divide them in in three types of tools. The animation tools are purely for animation For prototyping for creating interactions where you can actually put it on a phone put it on a website and actually click through a flow and also implementation like actually used a code or Different tools that allow you to put it out there and not and it's not just a prototype But it's actually something that the user is going to be at the end be using so start with animation just like Tools that are purely for animation, but can be kind of like hacked to use for UI animation probably the most obvious that the king of all the Animation tools has probably After Effects And and and it's great because you can use it that it can be used for anything That it's related to animation including UI All these tools, by the way that they don't allow you to actually interact with them It's just it creates like a video, you know, it's just like it goes through one state next day. Next day is very linear Keynote, it's another one. I don't know if you know about magic move magic move is so cool It's just like it really does work like magic So I recommend checking it out for also for your animation If you want to create something simple and also flash remember flash now, it's called animates Haven't used in a long time but uh back in the day. That was oh man. That was a tool Back in damn. That's a long time ago. I'm old so Yeah, all them in Danielle's was flash. What is it? Prototyping so for topping this are the tools Before like I was telling you it's just like very linear It's just like one step one state next day. Next date for prototyping allows you to actually take different courses that take different flows because the user can actually interact with these things and So for prototyping actually see all these and I'm pretty sure I'm missing some of them But there's principals Flint. Oh, there's framer origami pearl pie kite and Studio so a disclaimer, I actually just joined a studio and vision studio So so there's quantity. So I'm going to be a little bit biased towards the studio but yeah, I just joined that team but I will tell you why I think uh It's actually pretty cool and I actually made this graphic to help you because there are so many tools Right, which one should I take? Which one should I be using and? I put them in the level of how difficult it is to create a prototype not just to learn it but to actually Create something. You already know the tool Let's say that you already know how to use the tool. Even when you already know how to use a tool. There's still a starting process to get you to that place where you just make a button do something, you know, and I think the now the sketch XD and figma, they allow you to create prototypes inside their Tools, but they're not that awesome So here's like how difficult it is and then or here how awesome your prototype can be Yeah and and when I mean What I mean with awesome is just like how much control they give you a granular control of the elements you can move around your prototypes so over here those things in the Bottom left they give you access to the screens You can move the screens and then you just connect them and then put them together, which is sometimes all you need, by the way So they allow you to do that but they don't give you that granular control where you want to things to move and expand and just like move in a gracious way then we move a little bit up and Then we have prototyping tools that are specific Prototyping tools that connect to those tools and then you can create a little bit more a little bit more awesome stuff and then probably write it there in the middle that they have a Little bit difficult to get started our principle in Flint. Oh But those allow you to actually move every element you have access to everything. Everything can be Moved and everything can be just that transform and then we get oh, man. Okay. Those are really light. But uh, here's proto pike a poke composer and then framer and origami Those those two are like really hard to use but they give you a lot of control on the actual phone like I'm a camera They give you control to the what do you call it when you move it? The motion sensor that thing so they allow you to actually create more realistic prototypes if you need those things But most of the apps don't really need you to use those things So, but if you need them, probably you need to get one of those prototyping tools and then over here I think I'll tell you that it was going to be biased I see studio is over here where it's pretty awesome And and I don't think it's that hard because it's actually the same tool you're using for designing Allows you to have all of that control over here. We have other tools that allow you to have that control but They they require you to use that Nellore design tool. So it's almost like you use the design tool and then Put it on that prototyping tool and they you create your prototype, but then they're disconnected Your prototype is one file and your design is another file So here I think a studio the the advantage that it has is that it's all living in the same ecosystem so again Promote self promo, this is just how studio works Everything right there. That was my design that was a design and then the design actually I can use it to create An actual animation right there super easy also You can you have the control of a timeline And this is again. This isn't the same tool that you're using for designing every screen you go to an interaction designer where you can just like control everything every element and you can even You can even hack it. This is something that I that I do I
I always try to use UI interaction tools to see if I can make Animations which is the other way around usually you hack animation tools to make your interactions like I want to do the other way around or I want to Hack interaction tools to create animations and I think this was done in studio 2. I just use the lite version That's why it looked like Yeah so What you want with these kind of tools is you want to be able to control gestures be able to control your interactions with gestures? with scrolling where you have different specific elements that scroll in some elements don't And probably even control of data And also control of other elements that just like move around There you go Okay, so those were prototyping tools but there's also implementation tools that you can use for your animation As a designer and I think there's After Effects plus plugins You can use Google's motion library CSS in animation libraries suite for iOS if you actually want to get into the code you can do it on JavaScript and then one that I really like is called web flow because this one is it's kind of a It's a tool for designing a website. But it also it gives you all the control and that what you crave there It's actually going to be what you can implement so I I will recommend you to check it out if you are into actually implementing stuff and not just iterating and Another thing the ultimate implementation combo if you are working on mobile I recommend you Working on After Effects then using a plugin called body moving and then with body moving using but These two are only if you're only doing web This is all you need but if you want to do it on on react native, then you need another one that converts your body moving a JSON file into something that can be used and react which is pretty dope Okay Okay, so So yeah back to the the red repeat Oh man, come on Those were supposed to be skipped. I'm sorry. How do I move my mouse? Okay, there you go, okay, let's let's talk about the actual properties that you can Move or you can transform when you are creating UI animations and and you can transform anything when you're using these kind of tools, but let's see which ones you want to Transform and what do they mean? so Probably you want you can change the easing you can choose a position Scale all these things that were used to changing when we are editing a designer But you can also create a cure ography relationships and overlay and also add a parallax and zoom so easy So easy is probably one of the most basic tools that it's really important to know At least again the basics of it and easing allows you to add acceleration and deceleration So that animations don't appear to mechanical And remember I was telling you that it feels natural. It's just When you are for example, like if I were to walk over here I don't just start like walking full-speed and then stop you know it without that way You will be thinking like oh man, what's going on? You usually just start accelerating you pick up speed and then you slow down when you arrive to your place, right? You expect elements on a screen to act behave that way too So that's what easing comes really handy Let me show you some basic types of easing a scene is out in and out Spring linear all these by the way are taking one second to get to the other place They just feel some of them feel a little bit slower. Some of them feel a little bit faster but to get to the last Pixel all then take one or two. Yeah, one second So let's start actually seeing each example. The first one is linear and it's kind of poopy It's just just like moves out of nowhere and can you see like it? Doesn't feel natural. It's just like it feels like like like a roll, but how they will move So you want to avoid that sorry, let me go back You want to avoid that analyst you really need it? When do you need linear animation is when something is in the loop, for example? It's in a loop and it's just like for example something that's rotating and you just want to keep it at the same speed always Then you use a linear animation or something. That is just like always Supposed to be at the same speed and you don't see when it's entering the screen or exiting the screen You just like always see it at the same speed for example, like those backgrounds back in the Flinstones Cartoons you will see like the back ones always moving at the same speed. It's just like endless backgrounds I'm too old. I'm talking about the Flintstones Wow Okay that they do use linear animations for those So eath, okay so ease in When do you use these in easing is at the end of the sorry at the beginning of the animation? It starts a little bit slower So it's like me I start walking and I start a little bit slow and then I pick up speed that's what you use easing and you use it ezine without the east south when you have an element that is exiting the screen so Over here are the pizza. It's outside the screen the user cannot see it. So there's no need to eat it out at the end Now the opposite comes with ease out is when you When an element is entering the screen you want the element to grace? Racially or gracefully well with grace Enter the screen and then fall into place is the opposite of what I was doing before Let's say that I it doesn't matter how the animation starts it starts really fast over there But it doesn't matter because the it's not inside the screen so you can just use ease out Now when an element is is always visible inside the screen then the basic thing that you want to do is ease in and out because again, It's the user is always looking at it. So you want the a or it to start accelerating and then decelerating? That's why the banana that's that Now spring if you want to get really fancy you can start doing our no bouncy stuff I would say like do it carefully to make every I know Once you start using an animation animation tool that allows you to do all this stuff. You will want to everything Let's make it bouncing and spraying but uh It's like having Photoshop for the first time you apply lens flare to everything. Oh my god. Look at all these shadows So it will happen the same when you get a new tool, you know you want to explore everything do it and then Tone it down a little bit. Okay So go back to the same screen now we understand what's going on here. You see the South in an ALP They're all taking the same amount of time. They just arrived they some of them start a little bit slower some of them arrive a little bit slower some of them just like Okay some properties that you can change the properties for example the position of something it tells you the direction in way in which the elements are going to Travel it gives you an ER rotation it tells you Context where are you going? For example, this little plane just moves and also scale just makes an object Appear closer or further away. It just like helps you focus. Also what is important? and what is that in estate is important and then When it stops being important in something else replaces the importance of it or in the hierarchy. So for example here Rotation rotate don't rotate everything on your animations too because then your use rotation very Scarcely in this case way Because it can create a an effect on the user. That is you don't want them to have moving around an axis provide SKUs of something that is usually you want to use it for something that's like going on something that it's like a we're working on it and that's why I Think it's being used a lot on like loading animations Opacity this is probably the the easiest way to just like go from one state to another just like An opacity changes, so it goes from the most basic 0% to 100% For example so an element that wasn't there it suddenly appears but this opacity can also be changed where you actually Crossfade elements one is 100% and then there's another one here. There's a zero percent and then One changes to zero and then the other one changes to 100% and that change it feels really smooth when you do it, right and And it's a very basic easy way to just create your animation Overlay, it just gives you an idea that there's that Third dimension there. It can give the location of a 2d object it keeps a little bit of depth when you have an element that it's over another element and then probably Moves and then it shows something that is behind also Choreography and this this Tells you when elements are appearing and again, they don't all just appear at the same time. You can add a little bit of That make them appear in a sequence. So it just like feels more clear and smooth and again natural And Paralyzed if you want to be super fancy This is when like like that example They were looking at from designing designing code it you said use a little bit of parallax that gives you the idea of depth That in a 2d screen where things that are a little bit further away from you well appear to be further away move a little bit slower and things that are supposed to be closer to you and Move way faster. So for example here the mountains in the back You see them just move just a little bit and then there are different Layers that move at different speeds and then it creates that effect of parallax And hierarchy hierarchy motion shows how elements are related and also gives important and focus to other elements the Not so basics and not going to talk about these but just like take a photo and then you go research this about personality timing and spacing and Storytelling you started that if you really are into this and you want to I want to be a you are animator You're gonna get into this kind of stuff, too So the know knows Things he please don't don't try to be just using animation just to be flashy Don't make it expensive expensive on the user and on your on your team to that It's that it's making this and it's sometimes you create an animation That is so crazy that it's going to probably take a week just to make that specific animation That is probably not that important And also it can be expensive on the user side because it can create some a little bit of lag great it can give on the Performance of the device it'd be bad So don't make it too complicated and don't forget that there should be an intention for everything that you do and okay So practical tips at the end Oh No, I think we're good practical tips really quickly just now that we know how elements are connecting can you can connect them and how the principles that you can follow You can go from good animation to great animation by connecting chert elements just Identifying the elements that are from one state to another are the same and then connecting them for example on the left Here we have you tap on something and then another screen appears, which is good. It feels good, right? But when an element actually the you tap on it and then reacts to your interaction to your gesture and Actually grows the element that you just touched and then they fall into a different place that changed the position then it feels more natural The same it goes when I think I was already talking about this the cascading effect but a good animation you just change the position and pass it in the material when it enters the screen you just touch it and then element appears there surpassing there's movement, but when you actually animate each element really quickly but it feels more natural when everything just follows a little bit of choreograph and So here for example, there's an example of a menu A menu or something contextual you act on it and then something else appears usually on from the world Nothing will just appear out of nowhere I'm seeing a red light. I don't know if I'm should be out of here now This is the serial and I probably man. I'm probably over time. Okay? Okay, yes dialogues appear in context and also you can use animation to bring attention to something that is important Yeah, for example on the left that's a good there's no animation, but it's a good design that it's just telling you ate something It's using an icon is using a specific style that it's different from everything else is floating so it keep it brings that focus to the user, but what if you could do something a little bit more and Don't overdo this because you don't want everything to bring your attention. Look at me because then Well, your user will get annoyed and also everything if everything is important, then nothing is important, right and Good animations move and show elements in context It's pretty similar to what I was saying before but here the elements actually push all our elements out of the way Instead of just appearing on top And here we have this is just in our tip just to use the same elements to give you a little bit of feedback instead of a new element appearing probably there's there's an opportunity to use that same element that you had an interaction with to give you a Something is loading or a give me a little bit of time And good animation plays the content in and out from one state to another and a great animation shows continuty in a transition by making the content move between States so over here is just doing a transition opacity. It's good But a great one it's like it feels like oh the element is also there it's always there you move it and then it appears it's not just appears out of nowhere and That's it my friends It's the recap talk about me Why animation hopefully you got a little bit of that basic properties you animation tools practical tips and Hopefully by now this all this feels more obvious when you see it when you open an app. It's like, okay Yeah, I get it. Yeah, I can do that. I can use one of those tools to create it and Yeah, I hope you are ready to make everything move Don't over do it again. The apply is break to everything and just animate responsibly And hold on don't go. Let me take a selfie. This is super cool. Just that all of you Let me see if I can do this Okay, and just pretend that you're happy Hey, what's up you see yourselves want to end? Okay. Thank you so much. Thank you. Thank you so much. Muchas. Gracias
