Hey, everyone, and welcome back.
So in our last video, I went over just a couple of really rough prototypes and just showcasing how
smart and enemy can work in a couple of different scenarios, both with matching layers and using separate
animations or just using smart animation altogether.
So I want to just showcase how I've built this little application out and maybe I'll give you some inspiration
for our project.
I mean, you'll get these files.
And what I would do is the files that you've started to create.
And I just like visually explore with in terms of like the high fidelity designs we're creating for
habitual.
Go ahead and put those together and start making interactions, start thinking about like different
screen transitions and stuff like that.
I'm sure you have a lot of fun with this kind of stuff because it really brings your prototypes to life.
So let's jump right in.
So I have a couple of similar screens here.
I have this kind of primary nav.
Let's actually just jump over prototyping of you.
I have this kind of secondary nav up here and you can see this portrait.
There's nature, there's architecture, and I've created different screens for that.
So I have nature over here.
I have architecture.
And this is the architecture screen.
This is the nature screen.
So this is just an app for photos they just put together really, really quickly.
And what's going to happen here is when I swipe through here, there's going to be a little animation
that happens there.
But also the content is going to change in a really nice way.
Let's go over here.
So let's click our prototype tab.
And what I have selected here is I just have a smart animation.
So we're not changing anything in the screen.
Like we're not having any screen transitions.
When I am having, though, is I'm making sure that when I click this button.
Ah, this this text, it's going to slide over, so it's going to capture that movement and it's going
to capture the fill.
So it's going to turn to a dark black I mean, if you get darker than black, but it's going to turn
to a black and the images, they're all going to stay in the same place.
But we're going to change the feel of the images.
So we're gonna have a nice transition with that.
And that's the same thing with architecture as well.
So we're going to have that nice little animation that's going to happen up here and it's going to have
just the feedback for the film.
I just have the pictures over here.
They're going to change the architecture.
So that is one of the main interactions that we prototype over here.
Let's go take a look at what that looks like.
Let's just select a device.
And what I'm going to do here is I'm going to scale to fit so we can see everything.
So we got a nice movement, we get the nice feel beautiful.
So if we just click that, I've said it's OK.
If I just click, I go back if we really wanted to kind of and they made it to the best possible thing
that we can.
We would just use like drag.
We could do that as well and just kind of like hijack that horizontal scroll.
So that way nature just stops over there on the next screen.
So it's another possibility, but it's just nice and subtle.
Users get the feedback they need for each transition.
And there's good, good animation over here in terms of just the duration of the film.
So I really like that.
I'm going to show you another.
Interaction.
So what we have here as well is when a user clicks on an image, I don't just want that to be instantaneous.
I want to smart animate right to that image.
So I want it to kind of take up the whole screen.
All the other layers will just be removed.
These will be new layers.
And I want to see that feedback of that transition of the image going to the very top of the screen.
So these, as you can tell, are rectangle two and rectangle two, and they are both named the exact
same.
And this should just animate to the top and the rest of the content will appear gradually.
So let's take a look at what that looks like.
So if I click on this, so all the rest of the content just dissolves in and I have everything there.
So let's take a look at what that looks like.
Again, if I click home and I go back, I mean, we could actually place a back button here to do the
same thing.
So that's really nice.
I mean, it's not too fast.
So I have four hundred milliseconds on the actual duration and I have an ease in and out, so I mean,
it's going to take its time going in and it's going to take its time kind of coming out.
So, I mean, when it starts the animation, when it ends, the animations can have a nice like in and
out and it's not going to be too abrupt.
So let's take a look at what that looks like one more time.
Really beautiful.
Boom.
OK, I have another smart animation.
I've done it on a drag, so it's going to happen here is.
When the user drags on these similar photos, I want to go to this screen now, we could hypothetically
just have a horizontal scroll on these, but we could hijack the scroll like we've done here.
And it will show a new set of items.
And I'll show you what that looks like.
I've done the exact same thing.
I've Ondrej it.
As you can see, the frame is bleeding off of the main mobile frame.
You can see it over here.
So if I just kind of.
So it's very interesting how that's not working properly, but.
So when I actually slide this, it's going to drag to this again, so let's take a look at what that
looks like so I can see.
Looks really nice.
I bring that back and I can slide it back.
So it's just going back between screens now, but the great thing about this is with a horizontal scroll,
you can't really stop it nicely.
This kind of just hijacks that scroll and puts it in place.
So that's a great way to show off that type of animation.
Like, these are great for working closely with developers because they'll be able to see how things
are supposed to work, because with a horizontal scroll, you'll never catch them like this.
So if it's beyond 50 percent of the space of the width, then it should automatically slide like that.
If it isn't, then it shouldn't.
So that's something really, really interesting in terms of a little animation that we made there.
Now, another one is.
A subtle animation with the heart.
So what I've done is I've created another screen.
With that Hartville.
And when I click that, it's just going to smart enemy and it can be very subtle and the fear is going
to change there, and it will also pop a little gift that I have created.
Sorry, it's a little pixilated, but I've created this in fake motion, which is a plug in for Sigma.
And we're going to get into micro interactions in our next lesson.
But I want to give you a sneak peek of what we can kind of do here, because micro interactions are
a form of animation and they use motion.
So we're going to get into that as well.
But so clicking this little heart here is a micro interaction.
Same with like interacting with this type of nav.
So I'm going to click this and it's going to fill the heart.
And it's going to pop this little notification ball that's going to bounce up and down, so I'm keeping
my animations very, very subtle, but also kind of adhering to all those rules.
We talked about things, about state transitions, like we've seen with moving between these different
types of navigation items and also moving from this screen to this screen.
So beautiful state transitions.
We also have visual cues.
So this is going to be a visual cue in terms of clicking this heart and getting that feedback.
That's also part of visual feedback as well.
So when I click this, I'm going to get great feedback.
And another cue over here is this little notification that's going to pop up.
So let's take a look at what this whole prototype looks like from here onward.
So I can see I can click that.
So very nice.
And we have our little tiny, subtle animation bouncing in the background, letting users know, hey,
click me.
I have something for you to look at.
So let's remove that.
And it's gone.
And it's there so really nice, really subtle that it's not instantaneous, it doesn't look really like
jumbled or anything like that.
So that is a way that you can use smart and just make certain interactions look really nice, bring
your prototypes to life.
And just to showcase what you're thinking as a designer, I know it can be really tough with animations.
And I think up until this point, jumping between so many different plug ins, jumping between different
applications for Sigma has really found something amazing here.
There's something really special with the way you can just smart enemy and create these different screen
transitions within the same product.
In our next lesson, we're going to jump right into micro interactions and I'm going to get to what
they are.
I'm going to talk about why they're so important and we're going to create our own.
So go out there, have some fun with, like, creating these smart animations with your own examples
in terms of like, you can use this if you want, you can create your own app.
But I urge you to use the app that we're building as a way that we can create just different interactions
like that and, you know, just work on different screen transitions and different transitions in general.
So go out there and have some fun.
Our next lesson, we're going to learn about micro interactions.