Hey, everyone, and welcome back.
So what we're going to do today for this little kind of video, we are going to actually prototype some
micro interactions for our navigation.
So if you remember, we were working on some visual style exploration and this is where we kind of left
off in terms of our home screen.
Now, I'm actually going to just delete everything here and I'm going to just keep our nav.
I think that's a good place to start for now.
Anyways, we're going to just bring that up.
And what I want to do here is.
Let's actually take our NAV out, I'm going to just duplicate it.
I'm going to just work on the NAV right here for now.
So let's just hide that.
Let's bring this color.
OK, I'm going to just detached, like wrap that and OK, so we have our little nav and you know, for
the sake of this this little test, what I'm going to do is I'm just going to bump this all the way
up to, I think.
One hundred is going to be fine.
I'm going to bring them up and this is going to be enough to work with so what I want to do is I want
to create a couple of different interactions here.
I mean, I know we're all mobile, but I want to show some of our interactions as well, some clicking
interactions, just different examples of things we can do and what's in the realm of possibility.
So what I'm going to do is I'm going to just like my text while I'm going to just write something and
write home.
Um, let me just detach that.
So I'm going to do is I can do that's a little too big.
So we got home.
Perfect.
Let's just change one hundred percent so I have home over here and I'm going to actually make that a
frame and just call it home will still be our other frame there.
So we're going to call that home and that I want to have pop in over there.
So I'm just gonna leave that there for now.
So this is just going to be just an auto layout we got home in there.
Perfect.
Let's keep that centered.
I'm going to create another one and another one.
And another one.
Perfect.
So this one is going to be wish-list.
This one is going to be orders and this one's going to be cards.
OK, let's rename each frame.
This is important.
So we keep things in order.
So we got all our different just copy in general.
What else can we do here?
We can make copies of these.
Actually, let's keep it like that for now.
Let's just prototype quickly what we got here.
So what we're going to do is on a hover, we're going to like that.
Weird.
OK, let's you on.
I'm going to open an overlay and that overlay is going to be home.
And we can select how we want to feature that, I mean, that can show up right there, that's a little.
Perfect.
So we got home, that's what's going to happen on hover, and that is going to be a dissolve.
That's OK, let's see what that looks like, actually.
So what I want to do is I want to just do you see that is a micro interaction.
We're going to hover, boom, hover gone.
So really nice feedback we're getting there.
Just changing the background colour, and we're going to do that for everything else as well.
So on, however, we are going to.
That's just shoot while hovering, we are going to do that dissolve, we're going to navigate open overlay,
we are going to keep that to manual and eight pixels just below.
And Senad, so we're going to do that and we'll just do that for this one as well.
So what we're seeing here is just a very, very simple micro interaction on hovering.
Let's do that.
So.
He got eight pixels and let's finally do it for Cartes as well.
So we got unclick while hovering.
Open overlay, customer manual, so you can overlay any which way you want.
I'm doing manual because I wanted to be perfectly centered.
OK, I'm trying to get it perfectly centered, but.
OK, let's take a look at our micro interaction.
That's looking sharp.
I really love it.
So that is a micro interaction.
Let's see if we can bump up.
That's really why, but it's all right, so we got our wish list, our home, our orders and our cards.
Now what we can try and do is we can actually make the actual icons come in and darken.
So well, images.
I'm going to also.
So there's a couple of ways we can actually do this.
So I'm going to just take all this and delete.
OK, so let's go back to design, so we're just going to set this up really nicely and quickly, we
are going to make these a vertical and I'm going to drop that in there.
I'm going to drop that in there and I'm going to drop that one in there, OK?
Oh, no.
So as you can tell, what I'm doing is I'm just.
Beautiful and let's select all of these and make the spacing between items eight pixels.
So what happens is perfect.
They're all going to turn black and let's see what the animation will look like.
So when I do that, what's going to happen is I'm going to have to just overlay that.
Over my.
OK.
That's that's fine for now.
Same thing over here.
I want to bring that up.
For some reason, it is not a line and but that's OK and I'm going to bring this one up to nice.
That's good.
And this one I'm going to bring you here.
So let's click on that.
OK, so that one's perfect.
OK, so let's take a look at our record interaction so as you can tell, when we hover over, we're
getting that nice little black overlay.
It's a little shaky on these, but that's fine.
And now we can see just the actual the label as well.
So that's really nice.
In our next video, we're actually going to jump in and animate this search experience over here.
We're going to work on the micro interaction for what happens when we actually click on this or even
hover on it.
So that is it for hovering on each navigation item.