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
Không có nhận xét nào:
Đăng nhận xét