1
00:00:00,540 --> 00:00:01,750
Hey, everyone, and welcome back.

2
00:00:01,920 --> 00:00:07,860
So in our last video, I went over just a couple of really rough prototypes and just showcasing how

3
00:00:07,860 --> 00:00:14,490
smart and enemy can work in a couple of different scenarios, both with matching layers and using separate

4
00:00:14,490 --> 00:00:17,260
animations or just using smart animation altogether.

5
00:00:17,640 --> 00:00:25,110
So I want to just showcase how I've built this little application out and maybe I'll give you some inspiration

6
00:00:25,110 --> 00:00:26,250
for our project.

7
00:00:26,520 --> 00:00:27,990
I mean, you'll get these files.

8
00:00:27,990 --> 00:00:31,890
And what I would do is the files that you've started to create.

9
00:00:31,890 --> 00:00:36,960
And I just like visually explore with in terms of like the high fidelity designs we're creating for

10
00:00:36,960 --> 00:00:37,590
habitual.

11
00:00:37,980 --> 00:00:42,390
Go ahead and put those together and start making interactions, start thinking about like different

12
00:00:42,390 --> 00:00:44,430
screen transitions and stuff like that.

13
00:00:44,830 --> 00:00:49,620
I'm sure you have a lot of fun with this kind of stuff because it really brings your prototypes to life.

14
00:00:49,920 --> 00:00:50,860
So let's jump right in.

15
00:00:51,210 --> 00:00:54,270
So I have a couple of similar screens here.

16
00:00:54,510 --> 00:00:58,080
I have this kind of primary nav.

17
00:00:58,080 --> 00:01:00,660
Let's actually just jump over prototyping of you.

18
00:01:00,990 --> 00:01:05,100
I have this kind of secondary nav up here and you can see this portrait.

19
00:01:05,100 --> 00:01:09,810
There's nature, there's architecture, and I've created different screens for that.

20
00:01:10,050 --> 00:01:11,340
So I have nature over here.

21
00:01:11,340 --> 00:01:12,990
I have architecture.

22
00:01:13,410 --> 00:01:14,790
And this is the architecture screen.

23
00:01:14,790 --> 00:01:16,380
This is the nature screen.

24
00:01:16,380 --> 00:01:20,130
So this is just an app for photos they just put together really, really quickly.

25
00:01:20,400 --> 00:01:25,800
And what's going to happen here is when I swipe through here, there's going to be a little animation

26
00:01:25,800 --> 00:01:26,850
that happens there.

27
00:01:27,090 --> 00:01:30,150
But also the content is going to change in a really nice way.

28
00:01:31,080 --> 00:01:32,310
Let's go over here.

29
00:01:33,570 --> 00:01:36,330
So let's click our prototype tab.

30
00:01:37,230 --> 00:01:41,070
And what I have selected here is I just have a smart animation.

31
00:01:41,070 --> 00:01:43,140
So we're not changing anything in the screen.

32
00:01:43,140 --> 00:01:45,330
Like we're not having any screen transitions.

33
00:01:45,540 --> 00:01:50,820
When I am having, though, is I'm making sure that when I click this button.

34
00:01:51,900 --> 00:02:00,810
Ah, this this text, it's going to slide over, so it's going to capture that movement and it's going

35
00:02:00,810 --> 00:02:02,010
to capture the fill.

36
00:02:02,250 --> 00:02:07,820
So it's going to turn to a dark black I mean, if you get darker than black, but it's going to turn

37
00:02:07,830 --> 00:02:12,090
to a black and the images, they're all going to stay in the same place.

38
00:02:12,090 --> 00:02:14,160
But we're going to change the feel of the images.

39
00:02:14,160 --> 00:02:16,110
So we're gonna have a nice transition with that.

40
00:02:16,230 --> 00:02:18,770
And that's the same thing with architecture as well.

41
00:02:19,110 --> 00:02:25,920
So we're going to have that nice little animation that's going to happen up here and it's going to have

42
00:02:26,190 --> 00:02:28,250
just the feedback for the film.

43
00:02:28,530 --> 00:02:30,240
I just have the pictures over here.

44
00:02:30,240 --> 00:02:31,590
They're going to change the architecture.

45
00:02:31,590 --> 00:02:37,120
So that is one of the main interactions that we prototype over here.

46
00:02:37,260 --> 00:02:39,210
Let's go take a look at what that looks like.

47
00:02:39,420 --> 00:02:42,000
Let's just select a device.

48
00:02:44,320 --> 00:02:48,590
And what I'm going to do here is I'm going to scale to fit so we can see everything.

49
00:02:49,120 --> 00:02:53,640
So we got a nice movement, we get the nice feel beautiful.

50
00:02:53,650 --> 00:02:56,590
So if we just click that, I've said it's OK.

51
00:02:56,590 --> 00:03:03,610
If I just click, I go back if we really wanted to kind of and they made it to the best possible thing

52
00:03:03,610 --> 00:03:04,320
that we can.

53
00:03:04,390 --> 00:03:06,310
We would just use like drag.

54
00:03:06,310 --> 00:03:10,960
We could do that as well and just kind of like hijack that horizontal scroll.

55
00:03:11,350 --> 00:03:14,730
So that way nature just stops over there on the next screen.

56
00:03:14,980 --> 00:03:18,850
So it's another possibility, but it's just nice and subtle.

57
00:03:19,810 --> 00:03:22,540
Users get the feedback they need for each transition.

58
00:03:22,990 --> 00:03:30,060
And there's good, good animation over here in terms of just the duration of the film.

59
00:03:30,400 --> 00:03:31,630
So I really like that.

60
00:03:32,140 --> 00:03:35,200
I'm going to show you another.

61
00:03:36,160 --> 00:03:37,000
Interaction.

62
00:03:38,420 --> 00:03:46,610
So what we have here as well is when a user clicks on an image, I don't just want that to be instantaneous.

63
00:03:46,790 --> 00:03:49,780
I want to smart animate right to that image.

64
00:03:50,420 --> 00:03:52,730
So I want it to kind of take up the whole screen.

65
00:03:52,730 --> 00:03:55,580
All the other layers will just be removed.

66
00:03:56,300 --> 00:03:57,380
These will be new layers.

67
00:03:57,770 --> 00:04:04,920
And I want to see that feedback of that transition of the image going to the very top of the screen.

68
00:04:05,150 --> 00:04:11,000
So these, as you can tell, are rectangle two and rectangle two, and they are both named the exact

69
00:04:11,000 --> 00:04:11,330
same.

70
00:04:11,660 --> 00:04:18,560
And this should just animate to the top and the rest of the content will appear gradually.

71
00:04:18,800 --> 00:04:20,570
So let's take a look at what that looks like.

72
00:04:21,080 --> 00:04:29,470
So if I click on this, so all the rest of the content just dissolves in and I have everything there.

73
00:04:29,480 --> 00:04:31,160
So let's take a look at what that looks like.

74
00:04:31,160 --> 00:04:35,990
Again, if I click home and I go back, I mean, we could actually place a back button here to do the

75
00:04:35,990 --> 00:04:36,660
same thing.

76
00:04:37,130 --> 00:04:38,570
So that's really nice.

77
00:04:38,570 --> 00:04:40,790
I mean, it's not too fast.

78
00:04:41,710 --> 00:04:49,510
So I have four hundred milliseconds on the actual duration and I have an ease in and out, so I mean,

79
00:04:49,510 --> 00:04:55,360
it's going to take its time going in and it's going to take its time kind of coming out.

80
00:04:55,360 --> 00:04:59,680
So, I mean, when it starts the animation, when it ends, the animations can have a nice like in and

81
00:04:59,680 --> 00:05:01,120
out and it's not going to be too abrupt.

82
00:05:01,420 --> 00:05:03,790
So let's take a look at what that looks like one more time.

83
00:05:05,360 --> 00:05:06,360
Really beautiful.

84
00:05:07,070 --> 00:05:07,470
Boom.

85
00:05:08,020 --> 00:05:11,750
OK, I have another smart animation.

86
00:05:13,030 --> 00:05:16,390
I've done it on a drag, so it's going to happen here is.

87
00:05:17,650 --> 00:05:24,700
When the user drags on these similar photos, I want to go to this screen now, we could hypothetically

88
00:05:24,700 --> 00:05:30,790
just have a horizontal scroll on these, but we could hijack the scroll like we've done here.

89
00:05:30,790 --> 00:05:32,860
And it will show a new set of items.

90
00:05:32,860 --> 00:05:34,030
And I'll show you what that looks like.

91
00:05:34,680 --> 00:05:36,100
I've done the exact same thing.

92
00:05:36,100 --> 00:05:37,270
I've Ondrej it.

93
00:05:37,600 --> 00:05:41,610
As you can see, the frame is bleeding off of the main mobile frame.

94
00:05:41,950 --> 00:05:43,180
You can see it over here.

95
00:05:43,430 --> 00:05:44,380
So if I just kind of.

96
00:05:49,790 --> 00:05:52,880
So it's very interesting how that's not working properly, but.

97
00:05:54,380 --> 00:06:02,120
So when I actually slide this, it's going to drag to this again, so let's take a look at what that

98
00:06:02,120 --> 00:06:03,920
looks like so I can see.

99
00:06:06,050 --> 00:06:07,200
Looks really nice.

100
00:06:07,710 --> 00:06:09,860
I bring that back and I can slide it back.

101
00:06:11,590 --> 00:06:16,450
So it's just going back between screens now, but the great thing about this is with a horizontal scroll,

102
00:06:16,450 --> 00:06:18,220
you can't really stop it nicely.

103
00:06:18,580 --> 00:06:21,720
This kind of just hijacks that scroll and puts it in place.

104
00:06:22,060 --> 00:06:25,240
So that's a great way to show off that type of animation.

105
00:06:25,540 --> 00:06:29,680
Like, these are great for working closely with developers because they'll be able to see how things

106
00:06:29,680 --> 00:06:34,530
are supposed to work, because with a horizontal scroll, you'll never catch them like this.

107
00:06:34,540 --> 00:06:43,410
So if it's beyond 50 percent of the space of the width, then it should automatically slide like that.

108
00:06:43,420 --> 00:06:45,760
If it isn't, then it shouldn't.

109
00:06:46,120 --> 00:06:50,950
So that's something really, really interesting in terms of a little animation that we made there.

110
00:06:52,030 --> 00:06:54,340
Now, another one is.

111
00:06:55,310 --> 00:06:57,150
A subtle animation with the heart.

112
00:06:57,920 --> 00:07:00,020
So what I've done is I've created another screen.

113
00:07:01,990 --> 00:07:03,340
With that Hartville.

114
00:07:04,750 --> 00:07:09,640
And when I click that, it's just going to smart enemy and it can be very subtle and the fear is going

115
00:07:09,640 --> 00:07:13,840
to change there, and it will also pop a little gift that I have created.

116
00:07:13,870 --> 00:07:19,900
Sorry, it's a little pixilated, but I've created this in fake motion, which is a plug in for Sigma.

117
00:07:19,900 --> 00:07:23,320
And we're going to get into micro interactions in our next lesson.

118
00:07:23,770 --> 00:07:28,540
But I want to give you a sneak peek of what we can kind of do here, because micro interactions are

119
00:07:28,540 --> 00:07:31,720
a form of animation and they use motion.

120
00:07:31,720 --> 00:07:34,090
So we're going to get into that as well.

121
00:07:34,780 --> 00:07:41,450
But so clicking this little heart here is a micro interaction.

122
00:07:41,500 --> 00:07:44,590
Same with like interacting with this type of nav.

123
00:07:44,890 --> 00:07:47,560
So I'm going to click this and it's going to fill the heart.

124
00:07:48,560 --> 00:07:54,950
And it's going to pop this little notification ball that's going to bounce up and down, so I'm keeping

125
00:07:54,950 --> 00:08:00,590
my animations very, very subtle, but also kind of adhering to all those rules.

126
00:08:00,590 --> 00:08:06,230
We talked about things, about state transitions, like we've seen with moving between these different

127
00:08:06,230 --> 00:08:11,320
types of navigation items and also moving from this screen to this screen.

128
00:08:11,570 --> 00:08:13,930
So beautiful state transitions.

129
00:08:14,150 --> 00:08:16,110
We also have visual cues.

130
00:08:16,130 --> 00:08:21,230
So this is going to be a visual cue in terms of clicking this heart and getting that feedback.

131
00:08:21,650 --> 00:08:23,870
That's also part of visual feedback as well.

132
00:08:23,870 --> 00:08:26,480
So when I click this, I'm going to get great feedback.

133
00:08:26,480 --> 00:08:31,970
And another cue over here is this little notification that's going to pop up.

134
00:08:32,180 --> 00:08:36,470
So let's take a look at what this whole prototype looks like from here onward.

135
00:08:36,830 --> 00:08:38,280
So I can see I can click that.

136
00:08:38,840 --> 00:08:40,070
So very nice.

137
00:08:40,400 --> 00:08:46,790
And we have our little tiny, subtle animation bouncing in the background, letting users know, hey,

138
00:08:46,790 --> 00:08:47,620
click me.

139
00:08:47,630 --> 00:08:50,470
I have something for you to look at.

140
00:08:50,930 --> 00:08:51,890
So let's remove that.

141
00:08:52,580 --> 00:08:53,300
And it's gone.

142
00:08:54,210 --> 00:09:00,480
And it's there so really nice, really subtle that it's not instantaneous, it doesn't look really like

143
00:09:00,480 --> 00:09:01,910
jumbled or anything like that.

144
00:09:02,430 --> 00:09:09,600
So that is a way that you can use smart and just make certain interactions look really nice, bring

145
00:09:09,600 --> 00:09:11,040
your prototypes to life.

146
00:09:11,310 --> 00:09:17,010
And just to showcase what you're thinking as a designer, I know it can be really tough with animations.

147
00:09:17,250 --> 00:09:24,060
And I think up until this point, jumping between so many different plug ins, jumping between different

148
00:09:24,060 --> 00:09:28,260
applications for Sigma has really found something amazing here.

149
00:09:28,260 --> 00:09:33,720
There's something really special with the way you can just smart enemy and create these different screen

150
00:09:33,720 --> 00:09:36,420
transitions within the same product.

151
00:09:37,290 --> 00:09:42,660
In our next lesson, we're going to jump right into micro interactions and I'm going to get to what

152
00:09:42,660 --> 00:09:43,200
they are.

153
00:09:43,410 --> 00:09:47,060
I'm going to talk about why they're so important and we're going to create our own.

154
00:09:47,070 --> 00:09:54,300
So go out there, have some fun with, like, creating these smart animations with your own examples

155
00:09:54,300 --> 00:09:57,390
in terms of like, you can use this if you want, you can create your own app.

156
00:09:57,390 --> 00:10:03,090
But I urge you to use the app that we're building as a way that we can create just different interactions

157
00:10:03,090 --> 00:10:09,470
like that and, you know, just work on different screen transitions and different transitions in general.

158
00:10:09,840 --> 00:10:11,190
So go out there and have some fun.

159
00:10:11,490 --> 00:10:13,890
Our next lesson, we're going to learn about micro interactions.