1
00:00:00,360 --> 00:00:05,400
Everyone, and welcome back, so we are going to start working on this little search, so I'm going

2
00:00:05,400 --> 00:00:15,180
to do is I'm going to duplicate that search button and I'm actually going to stick this background just

3
00:00:15,180 --> 00:00:17,980
expanded a bit and see what that looks like.

4
00:00:18,090 --> 00:00:20,070
So I'm going to do is on hover.

5
00:00:25,380 --> 00:00:27,960
So on we are suffering more Hadrien.

6
00:00:29,140 --> 00:00:32,050
Open overlay, let's see what that looks like.

7
00:00:34,440 --> 00:00:38,850
So that's not matched up properly, so what we're going to do is we're going to.

8
00:00:42,730 --> 00:00:44,260
Manually do it.

9
00:00:44,770 --> 00:00:45,310
Here we go.

10
00:00:49,510 --> 00:00:53,290
So we have a little kind of hover interaction, let's bring that up in size.

11
00:00:54,660 --> 00:00:56,400
So we have a nice little.

12
00:00:58,370 --> 00:01:00,770
Now, this interaction isn't perfect, but.

13
00:01:02,490 --> 00:01:04,590
We are still kind of showcasing.

14
00:01:06,060 --> 00:01:07,530
What would happen if we had over?

15
00:01:09,170 --> 00:01:10,660
It would just grow in size.

16
00:01:11,010 --> 00:01:14,930
So that's really cool and what we're going to do next.

17
00:01:15,960 --> 00:01:19,710
We are going to take this from.

18
00:01:22,120 --> 00:01:23,150
Duplicate it.

19
00:01:24,670 --> 00:01:25,300
Down here.

20
00:01:26,580 --> 00:01:27,980
We are going to take this out.

21
00:01:29,590 --> 00:01:38,890
Let's actually go and search for a an icon, so I'm going to go to Feather Icons Perfect's.

22
00:01:40,850 --> 00:01:42,380
I'm searching for an ex.

23
00:01:44,780 --> 00:01:45,350
Beautiful.

24
00:01:45,950 --> 00:01:54,440
So we got our X over here showing ginger to white and, you know, copy that.

25
00:01:57,390 --> 00:01:58,820
Throw that in there.

26
00:02:03,340 --> 00:02:04,750
Let's delete search.

27
00:02:05,080 --> 00:02:06,010
We'll have our act.

28
00:02:06,070 --> 00:02:11,110
So what's going to happen is on this overlay because we're going to be hovering on it and the only way

29
00:02:11,110 --> 00:02:14,010
to cook it, it's going to be to actually click the overlay.

30
00:02:14,290 --> 00:02:18,060
So while we click on this overlay.

31
00:02:18,070 --> 00:02:22,180
So let me just make that frame a little bit larger.

32
00:02:22,840 --> 00:02:24,990
So let's go to prototype again.

33
00:02:25,000 --> 00:02:30,100
So unclick we are going to navigate to.

34
00:02:32,240 --> 00:02:37,130
This second nav, let's see what this looks like, so we just begin to dissolve.

35
00:02:38,250 --> 00:02:42,030
We can actually just smart animate, so see what that looks like.

36
00:02:45,510 --> 00:02:46,440
So we've got to fix that.

37
00:02:49,370 --> 00:02:50,310
Let's do that again.

38
00:02:50,780 --> 00:02:52,310
OK, so this.

39
00:02:59,550 --> 00:03:03,810
Perfect, this will not have anything on it.

40
00:03:04,490 --> 00:03:06,420
OK, so let's see what that looks like.

41
00:03:08,220 --> 00:03:09,880
Let's restart it, pressing our.

42
00:03:15,730 --> 00:03:20,350
And then we have an ex huddled together into a larger interaction.

43
00:03:21,010 --> 00:03:28,570
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.

44
00:03:32,530 --> 00:03:36,220
And what I'm going to do is I'm going to place this and have.

45
00:03:39,930 --> 00:03:43,260
Let's go back to our design because it's near impossible.

46
00:03:46,580 --> 00:03:49,700
OK, so we have that they're perfect.

47
00:03:53,340 --> 00:03:54,660
Let's see what this looks like.

48
00:03:59,300 --> 00:04:00,180
Nice.

49
00:04:01,190 --> 00:04:05,330
So when I click this, it will.

50
00:04:06,530 --> 00:04:07,940
Navigate to.

51
00:04:11,580 --> 00:04:15,780
This screen and delete that.

52
00:04:21,860 --> 00:04:29,540
OK, so Prototyp and so when I click on this, it's actually Kanako to the screen and everything should

53
00:04:29,540 --> 00:04:32,190
smart aname this should swap.

54
00:04:32,210 --> 00:04:33,350
Perfect, perfect.

55
00:04:33,710 --> 00:04:35,120
Now what I want to do is.

56
00:04:38,940 --> 00:04:42,390
Let's think about an overlay so.

57
00:04:48,220 --> 00:04:56,710
We can do a couple of different things here, we can actually keep this out of this frame, we can remove

58
00:04:56,710 --> 00:04:57,310
this.

59
00:05:00,560 --> 00:05:08,450
Actually, we're going to need that because we can't have more than one thing at a time, but let's

60
00:05:08,450 --> 00:05:09,770
just create this.

61
00:05:10,430 --> 00:05:12,080
This is going to be.

62
00:05:13,490 --> 00:05:19,860
Let's create like a background color, so I'm going to make, like an overlay for search.

63
00:05:20,150 --> 00:05:25,040
It's not going to be anything final or anything, but I want to create something pretty cool here.

64
00:05:25,400 --> 00:05:27,810
So I'm going to do is I'm going to do that.

65
00:05:27,830 --> 00:05:33,650
I'm going to just make like a rounded, rounded corners for this card.

66
00:05:35,780 --> 00:05:38,990
And who knows, like this could pop like a search up.

67
00:05:43,640 --> 00:05:44,360
You can have.

68
00:05:49,020 --> 00:05:55,380
A search form input and I can be.

69
00:06:00,750 --> 00:06:04,560
Right there, we can even just steal this iacone.

70
00:06:07,460 --> 00:06:09,190
Something really quickly together.

71
00:06:19,240 --> 00:06:27,310
OK, this is going to be rounded as well, and we need some text that says search.

72
00:06:32,840 --> 00:06:37,590
So I know that a lot of these interactions aren't really viable.

73
00:06:37,610 --> 00:06:43,910
I mean, whoever isn't viable on mobile, but we can start playing around with cool things that we wouldn't

74
00:06:43,910 --> 00:06:50,390
normally think about and what we're working on, desktop and stuff like that, we will definitely be

75
00:06:50,390 --> 00:06:51,110
working with.

76
00:06:52,940 --> 00:06:54,530
So it's good to think about that.

77
00:06:54,920 --> 00:06:56,360
So what do we got here?

78
00:06:56,540 --> 00:06:56,840
Got?

79
00:06:56,900 --> 00:06:58,760
I'm going to show you something pretty cool.

80
00:06:58,760 --> 00:07:00,290
So we're going to Smart Enemy.

81
00:07:00,800 --> 00:07:04,760
This is actually going to be in here.

82
00:07:05,480 --> 00:07:07,550
Where I'm going to do is I'm actually going to.

83
00:07:16,210 --> 00:07:22,990
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,

84
00:07:22,990 --> 00:07:25,210
we're just going to go back to this screen.

85
00:07:25,210 --> 00:07:28,420
So prototype to do.

86
00:07:28,990 --> 00:07:35,050
We are going to go back here and click navigate to a smart animate.

87
00:07:35,620 --> 00:07:36,450
Perfect.

88
00:07:36,910 --> 00:07:39,220
Let's see what we've put together here.

89
00:07:40,540 --> 00:07:43,090
Let's get a black background on this

90
00:07:46,960 --> 00:07:48,750
just so we can see where we are.

91
00:07:49,180 --> 00:07:51,910
So we have all our different items.

92
00:07:51,920 --> 00:07:59,070
If I hover over the search, I can see that it will get larger if I click and I get an overlay.

93
00:07:59,320 --> 00:08:00,400
So that's pretty cool.

94
00:08:00,400 --> 00:08:02,010
If I close it, it goes away.

95
00:08:02,770 --> 00:08:08,500
So, I mean, you can create all these little micro interactions, incorporate motion into them to create

96
00:08:08,500 --> 00:08:10,330
like little types of experiences like that.

97
00:08:10,330 --> 00:08:14,620
Like this is probably not a good search experience just because we don't have like an actual search

98
00:08:14,620 --> 00:08:14,830
bar.

99
00:08:14,830 --> 00:08:19,300
But if you wanted to kind of create an overlay, I can imagine this working really well for something

100
00:08:19,300 --> 00:08:21,640
like Kaat, where it may not be a whole page.

101
00:08:21,640 --> 00:08:24,660
It may just be like a little overlay that shows your car items.

102
00:08:24,940 --> 00:08:28,570
So think about all the different ways you can incorporate that.

103
00:08:28,570 --> 00:08:30,060
Like, this is pretty awesome.

104
00:08:33,320 --> 00:08:33,950
I love it.

105
00:08:34,190 --> 00:08:38,270
I think that's a pretty cool way to create a micro interaction there.

106
00:08:40,580 --> 00:08:42,760
So something is happening over here.

107
00:08:43,180 --> 00:08:44,360
OK, so that's pretty cool.

108
00:08:44,730 --> 00:08:50,870
Now, like I said, that may not be the best interaction for search, but I thought it was pretty interesting

109
00:08:50,870 --> 00:08:53,150
because you could just, like, pop a model.

110
00:08:53,450 --> 00:08:57,010
And having the search, like, turn into an X is pretty cool.

111
00:08:57,020 --> 00:08:58,190
Little micro interaction.

112
00:08:58,190 --> 00:09:01,890
You get that nice little feedback after you've clicked it.

113
00:09:02,360 --> 00:09:09,020
So I think car is another kind of a good candidate for something like that, where you just pop an overlay

114
00:09:09,020 --> 00:09:15,830
and it would have like car items applied that structure to micro interactions, you know, trigger rules,

115
00:09:16,190 --> 00:09:18,740
feedback and modes and loops.

116
00:09:18,740 --> 00:09:26,150
So that way when users go back and use the interaction, I mean, it's just very seamless.

117
00:09:26,480 --> 00:09:29,690
It's very good in the sense that this one's triggered by a user.

118
00:09:30,170 --> 00:09:32,330
It is giving me feedback.

119
00:09:32,340 --> 00:09:41,060
The rules behind the scenes are that if I click on this, I will hide and show I will get the feedback

120
00:09:41,060 --> 00:09:42,150
that something's happened.

121
00:09:42,410 --> 00:09:44,150
These are individual micro interactions.

122
00:09:44,150 --> 00:09:46,370
I am seeing the the different items.

123
00:09:46,370 --> 00:09:54,620
I'm noticing that the color change and in terms of modes and loops in this case, it may change in terms

124
00:09:54,620 --> 00:09:58,250
of like if I have something in the cart, it'll change.

125
00:09:58,250 --> 00:10:03,470
Or if I searched in the past, we may have type of head like previous searches or save searches that

126
00:10:03,470 --> 00:10:05,120
could apply to the micro interaction.

127
00:10:05,330 --> 00:10:08,200
So apply all those rules I spoke about earlier.

128
00:10:08,630 --> 00:10:14,630
Remember those tips just about motion in general and you're well on your way to creating beautiful,

129
00:10:14,630 --> 00:10:15,740
seamless experiences.