Everyone, and welcome back, so we are going to start working on this little search, so I'm going
to do is I'm going to duplicate that search button and I'm actually going to stick this background just
expanded a bit and see what that looks like.
So I'm going to do is on hover.
So on we are suffering more Hadrien.
Open overlay, let's see what that looks like.
So that's not matched up properly, so what we're going to do is we're going to.
Manually do it.
Here we go.
So we have a little kind of hover interaction, let's bring that up in size.
So we have a nice little.
Now, this interaction isn't perfect, but.
We are still kind of showcasing.
What would happen if we had over?
It would just grow in size.
So that's really cool and what we're going to do next.
We are going to take this from.
Duplicate it.
Down here.
We are going to take this out.
Let's actually go and search for a an icon, so I'm going to go to Feather Icons Perfect's.
I'm searching for an ex.
Beautiful.
So we got our X over here showing ginger to white and, you know, copy that.
Throw that in there.
Let's delete search.
We'll have our act.
So what's going to happen is on this overlay because we're going to be hovering on it and the only way
to cook it, it's going to be to actually click the overlay.
So while we click on this overlay.
So let me just make that frame a little bit larger.
So let's go to prototype again.
So unclick we are going to navigate to.
This second nav, let's see what this looks like, so we just begin to dissolve.
We can actually just smart animate, so see what that looks like.
So we've got to fix that.
Let's do that again.
OK, so this.
Perfect, this will not have anything on it.
OK, so let's see what that looks like.
Let's restart it, pressing our.
And then we have an ex huddled together into a larger interaction.
So what I'm going to do is I'm going to press F and I'm going to get just a screen over here.
And what I'm going to do is I'm going to place this and have.
Let's go back to our design because it's near impossible.
OK, so we have that they're perfect.
Let's see what this looks like.
Nice.
So when I click this, it will.
Navigate to.
This screen and delete that.
OK, so Prototyp and so when I click on this, it's actually Kanako to the screen and everything should
smart aname this should swap.
Perfect, perfect.
Now what I want to do is.
Let's think about an overlay so.
We can do a couple of different things here, we can actually keep this out of this frame, we can remove
this.
Actually, we're going to need that because we can't have more than one thing at a time, but let's
just create this.
This is going to be.
Let's create like a background color, so I'm going to make, like an overlay for search.
It's not going to be anything final or anything, but I want to create something pretty cool here.
So I'm going to do is I'm going to do that.
I'm going to just make like a rounded, rounded corners for this card.
And who knows, like this could pop like a search up.
You can have.
A search form input and I can be.
Right there, we can even just steal this iacone.
Something really quickly together.
OK, this is going to be rounded as well, and we need some text that says search.
So I know that a lot of these interactions aren't really viable.
I mean, whoever isn't viable on mobile, but we can start playing around with cool things that we wouldn't
normally think about and what we're working on, desktop and stuff like that, we will definitely be
working with.
So it's good to think about that.
So what do we got here?
Got?
I'm going to show you something pretty cool.
So we're going to Smart Enemy.
This is actually going to be in here.
Where I'm going to do is I'm actually going to.
Let's see if it works the way I want it to work, so when I click this and I'm going to click this,
we're just going to go back to this screen.
So prototype to do.
We are going to go back here and click navigate to a smart animate.
Perfect.
Let's see what we've put together here.
Let's get a black background on this
just so we can see where we are.
So we have all our different items.
If I hover over the search, I can see that it will get larger if I click and I get an overlay.
So that's pretty cool.
If I close it, it goes away.
So, I mean, you can create all these little micro interactions, incorporate motion into them to create
like little types of experiences like that.
Like this is probably not a good search experience just because we don't have like an actual search
bar.
But if you wanted to kind of create an overlay, I can imagine this working really well for something
like Kaat, where it may not be a whole page.
It may just be like a little overlay that shows your car items.
So think about all the different ways you can incorporate that.
Like, this is pretty awesome.
I love it.
I think that's a pretty cool way to create a micro interaction there.
So something is happening over here.
OK, so that's pretty cool.
Now, like I said, that may not be the best interaction for search, but I thought it was pretty interesting
because you could just, like, pop a model.
And having the search, like, turn into an X is pretty cool.
Little micro interaction.
You get that nice little feedback after you've clicked it.
So I think car is another kind of a good candidate for something like that, where you just pop an overlay
and it would have like car items applied that structure to micro interactions, you know, trigger rules,
feedback and modes and loops.
So that way when users go back and use the interaction, I mean, it's just very seamless.
It's very good in the sense that this one's triggered by a user.
It is giving me feedback.
The rules behind the scenes are that if I click on this, I will hide and show I will get the feedback
that something's happened.
These are individual micro interactions.
I am seeing the the different items.
I'm noticing that the color change and in terms of modes and loops in this case, it may change in terms
of like if I have something in the cart, it'll change.
Or if I searched in the past, we may have type of head like previous searches or save searches that
could apply to the micro interaction.
So apply all those rules I spoke about earlier.
Remember those tips just about motion in general and you're well on your way to creating beautiful,
seamless experiences.