1
00:00:05,040 --> 00:00:06,500
One

2
00:00:08,470 --> 00:00:09,780
are right.

3
00:00:09,780 --> 00:00:13,400
So let's go ahead and make this micro interaction.

4
00:00:13,650 --> 00:00:23,160
What we're going to do is well first of us think about our target audience again and our use cases so

5
00:00:24,150 --> 00:00:34,290
I think it would be really cool if Since we're giving the user 10 articles a day or a week they might

6
00:00:34,290 --> 00:00:43,440
lose track of them or you might want to refer back to one that was interesting that they read so let's

7
00:00:43,800 --> 00:00:46,770
have a way where the user can save an article.

8
00:00:47,400 --> 00:00:51,070
And what I'm thinking we could do.

9
00:00:52,070 --> 00:00:54,080
Well there's two options that we can do.

10
00:00:54,210 --> 00:01:00,750
The first one is to have some sort of icon like maybe a star or a favorite's icon a little bookmark

11
00:01:00,750 --> 00:01:03,050
icon in one of the corners.

12
00:01:03,140 --> 00:01:03,840
That's what I'm thinking.

13
00:01:03,840 --> 00:01:08,600
So the user can tap on it and automatically they could they can save it.

14
00:01:08,820 --> 00:01:21,090
But what we could also do is have a swipe gesture where similar to a spot where you just swipe it and

15
00:01:21,360 --> 00:01:24,060
it'll get saved to your favorites or bookmarks.

16
00:01:24,060 --> 00:01:29,640
I can see a habit where the user would open the phone see an article that may maybe looks interesting

17
00:01:29,640 --> 00:01:32,820
to them swipe it to save for later.

18
00:01:32,850 --> 00:01:37,530
And then you know they don't have to worry about reading it at the end of that day or at the end of

19
00:01:37,530 --> 00:01:43,780
that week because they have it in their archives so there's two things to think about here.

20
00:01:43,810 --> 00:01:50,640
A two case scenarios the first one is the user sees an article that they're interested in and they want

21
00:01:50,640 --> 00:01:51,560
to save it for later.

22
00:01:51,570 --> 00:01:57,630
And that's the one we're going to use a swipe gesture on the second one is going to be once they've

23
00:01:57,630 --> 00:01:59,270
read the article.

24
00:01:59,340 --> 00:02:02,280
There has to be a way for them to save it.

25
00:02:03,210 --> 00:02:08,120
And that's that's the second use case that's the one where you know they just want to reference that

26
00:02:08,130 --> 00:02:11,370
for later and to refer back to it.

27
00:02:11,370 --> 00:02:19,380
So let's start with the swipe gesture because that is the most exciting in my opinion.

28
00:02:19,620 --> 00:02:26,370
And the way I envision this is you swipe it and you don't need to tap anything it'll just swipe and

29
00:02:26,370 --> 00:02:30,360
register and then it'll just fighting back or flying back.

30
00:02:30,370 --> 00:02:34,500
It will go back to its original position.

31
00:02:34,560 --> 00:02:41,820
So what we're going to do is with the art board selected the homescreen are selected We're going to

32
00:02:41,820 --> 00:02:46,770
hold down option and we're going to click and drag and it's going to make an entire copy.

33
00:02:47,130 --> 00:02:54,750
As you can see it's home homescreen copy we'll just rename it something comprehensible like home screen

34
00:02:56,430 --> 00:02:58,800
swipe gesture.

35
00:02:59,650 --> 00:03:00,150
Save

36
00:03:04,260 --> 00:03:05,360
right.

37
00:03:05,400 --> 00:03:07,600
Actually you know what I'm going to make this a lot more fun.

38
00:03:07,640 --> 00:03:17,400
Do favorites save reminds me of a little those little disks that you click on Save way back in the day.

39
00:03:17,460 --> 00:03:18,570
All right.

40
00:03:19,130 --> 00:03:26,790
So just your favorites and what's awesome is since we've already put these in groups as you can see

41
00:03:26,790 --> 00:03:33,370
we just kind of pick one and move it over a little bit and it'll just slide off the board.

42
00:03:34,320 --> 00:03:41,250
And we can easily just make a graphic right here.

43
00:03:41,250 --> 00:03:43,650
Remember this over just a little bit.

44
00:03:44,280 --> 00:03:45,240
So you got some room

45
00:03:49,400 --> 00:03:49,700
cool.

46
00:03:49,700 --> 00:03:55,670
So what I'm thinking is we'll just put a little icon here and some text and we're going to want to find

47
00:03:55,700 --> 00:04:03,530
a favorite's icon that we can use throughout the entire app so that when every time the user sees it

48
00:04:03,530 --> 00:04:06,700
they know exactly what it's there for.

49
00:04:07,160 --> 00:04:09,170
So let's go ahead and

50
00:04:11,650 --> 00:04:12,730
roam.

51
00:04:13,110 --> 00:04:20,540
Let's go over to the Noun Project and the Noun Project is a great spot for finding icons.

52
00:04:20,540 --> 00:04:22,310
So we're going to go ahead and type in

53
00:04:24,730 --> 00:04:25,520
Favorites

54
00:04:32,690 --> 00:04:37,910
so we could go with the star seems very generic

55
00:04:40,700 --> 00:04:43,220
but it might serve us the best.

56
00:04:43,220 --> 00:04:44,690
I'm not sure.

57
00:04:46,650 --> 00:04:53,380
Yeah go ahead and go over to the Noun Project find an icon you like that represents favorites.

58
00:04:53,780 --> 00:04:59,340
I might actually end up going with a star because I think it'll be the best.

59
00:04:59,360 --> 00:05:00,500
Seems like a winner.

60
00:05:00,830 --> 00:05:09,990
So you can download it as a PNB and you can just give the artist credit.

61
00:05:09,990 --> 00:05:15,180
So what I like to do is every time I Dallam I come from the Noun Project you know you've got to give

62
00:05:15,450 --> 00:05:24,720
you've got to give credit to the artist already down in a Pages or pages document or document and at

63
00:05:24,720 --> 00:05:31,200
the end when I'm done with my app I will link it to my Web site and there will be a link from the app

64
00:05:31,200 --> 00:05:33,700
to the Web site that says you know here's where all the icons are.

65
00:05:33,720 --> 00:05:40,950
Here's the artist for the for these icons so make sure to credit your artist so you don't get you don't

66
00:05:40,950 --> 00:05:43,030
get sued or anything.

67
00:05:43,500 --> 00:05:43,760
All right.

68
00:05:43,770 --> 00:05:49,140
So I just clicked in drag the icon on here and now as you can see it is ginormous.

69
00:05:49,180 --> 00:05:51,240
Let's go ahead and scale this down.

70
00:05:51,690 --> 00:05:55,760
I'm holding down shift to keep the dimensions proportionate.

71
00:05:56,490 --> 00:06:02,000
And as you can see there's NCDC a little more.

72
00:06:02,010 --> 00:06:05,850
There's some text right here from the PMG.

73
00:06:05,880 --> 00:06:14,390
We're going to go ahead and double click our image and now we're an edit mode so you can either double

74
00:06:14,420 --> 00:06:22,830
click it or you can just go here and click Edit and with selection selected we are going to click and

75
00:06:22,830 --> 00:06:29,400
drag over this text and hit delete and then enter or return.

76
00:06:29,970 --> 00:06:36,240
And what's really cool about scatch is it senses where pixels are.

77
00:06:36,510 --> 00:06:42,360
And so once you delete the text it automatically knows that you know there's nothing left here but this

78
00:06:42,360 --> 00:06:47,860
icon and so it you know kind of forms around that shape which is really really nice.

79
00:06:48,980 --> 00:06:53,430
So what we're going to do now is we're going to put this in here.

80
00:06:55,530 --> 00:06:59,560
And for now go ahead and make the fill light just so we can see it.

81
00:06:59,640 --> 00:07:01,510
Want to be able to see it.

82
00:07:01,800 --> 00:07:08,590
And let's rename this favorite's icon.

83
00:07:08,930 --> 00:07:12,500
All right so now we have our favorites icon First of all.

84
00:07:12,510 --> 00:07:20,910
I want to put this into the cell folder that it's that it's currently in.

85
00:07:20,910 --> 00:07:26,460
Only because as you can see you know it's it's snapping to the center of the board because it's not

86
00:07:26,460 --> 00:07:27,450
in the cell folder.

87
00:07:27,450 --> 00:07:35,400
Once we put it in the cell folder it will recognize what context is and now is starting to pick up all

88
00:07:35,400 --> 00:07:37,350
the grid lines from within that cell.

89
00:07:37,350 --> 00:07:40,890
So let's go ahead and leave that there.

90
00:07:41,580 --> 00:07:48,860
And we kind of want to make this a color we don't want to keep it black and white seems kind of boring.

91
00:07:49,220 --> 00:07:56,830
So I'm going to go to a Web site called Paletta in Palatine.

92
00:07:56,850 --> 00:08:05,960
Not entirely sure how to say it but basically this is a tool that's used to help create color schemes

93
00:08:06,170 --> 00:08:09,520
and palettes that's really useful really powerful.

94
00:08:09,540 --> 00:08:12,090
And I like to use it too.

95
00:08:12,120 --> 00:08:18,560
I just as a starting point you know you don't have to go off of these colors verbatim but it gives you

96
00:08:18,560 --> 00:08:23,660
a really good idea as to what you can use and it's super helpful.

97
00:08:23,660 --> 00:08:30,050
So I'm going to grab this hex and I'm going to throw it in here.

98
00:08:30,050 --> 00:08:36,020
So that was four zero be five for nine.

99
00:08:36,680 --> 00:08:38,060
So here is our original hacks.

100
00:08:38,060 --> 00:08:44,870
And as you can see up here there's a bunch of different options you can scroll through adjacent colors

101
00:08:45,330 --> 00:08:53,240
try triad tetrad all these cool things so feel free you know throw some hexes in there mess around with

102
00:08:53,240 --> 00:08:56,170
it see what works.

103
00:08:56,220 --> 00:08:59,760
And I like this color.

104
00:08:59,930 --> 00:09:01,890
This is a cool color.

105
00:09:01,890 --> 00:09:03,700
Ali's first starting point.

106
00:09:03,700 --> 00:09:12,340
So I'm going to go ahead and copy copy this hex over and drill down to my favorites icon Let's go ahead

107
00:09:12,700 --> 00:09:13,890
and paste it in there.

108
00:09:15,760 --> 00:09:18,830
It that looks pretty cool.

109
00:09:18,870 --> 00:09:27,410
We are also probably going to want to fill in that star a black Blackstar looks kind of kind of morbid.

110
00:09:27,490 --> 00:09:34,860
What we could do is insert a circle behind it too start come to life.

111
00:09:34,870 --> 00:09:40,290
So let's go ahead and insert novel and hold down shift.

112
00:09:40,300 --> 00:09:50,870
So it's a complete circle and with the favorites icon selected we can align it vertically and horizontally

113
00:09:51,000 --> 00:10:02,460
just to get it nice and square it away or circle away and each and let's get rid of the border to make

114
00:10:02,460 --> 00:10:03,170
it white.

115
00:10:05,310 --> 00:10:10,050
And we can just go ahead and dump this right behind our favorites icon.

116
00:10:11,900 --> 00:10:24,660
And let's go ahead and with those two cycles of Scroop it let's call it favorite's con Alex cool.

117
00:10:24,740 --> 00:10:25,250
Alex great.

118
00:10:25,250 --> 00:10:30,980
So yeah I mean like I said you know you can use it as a starting point if you like the color red out

119
00:10:30,980 --> 00:10:38,300
the gate which I kind of do looks good can always brighten it up a little bit like even that gold yellow

120
00:10:38,300 --> 00:10:40,760
looks really good.

121
00:10:40,880 --> 00:10:43,160
I'm going to go with.

122
00:10:44,000 --> 00:10:45,650
I'm actually going to go with that.

123
00:10:45,650 --> 00:10:47,510
I like that a lot.

124
00:10:48,290 --> 00:10:52,430
So you find a color you like that will exemplify the

125
00:10:55,310 --> 00:10:59,720
exemplify the favorites icon as best as you'd like.

126
00:11:00,650 --> 00:11:04,330
And I was going to move it over a little bit.

127
00:11:04,340 --> 00:11:08,870
I'm going to eyeball it for now I'm to be in the center of this little box.

128
00:11:08,870 --> 00:11:14,150
This is what's going to show up when they swipe to save it.

129
00:11:14,150 --> 00:11:16,950
And then once they let go it's just going to go back.

130
00:11:17,250 --> 00:11:24,500
And what we're going to do is once it's swiped and it goes back we're going to have a little modal pop

131
00:11:24,500 --> 00:11:31,780
over that says you know you've successfully saved it or favorite it and that's going to be a micro interaction.

132
00:11:33,140 --> 00:11:42,290
So let's go ahead and well first let's go ahead and do our favorites in our article.

133
00:11:42,300 --> 00:11:50,120
So now that we know what it's going to look like I don't think we're going to have anything up here

134
00:11:50,120 --> 00:11:50,890
at the top right.

135
00:11:50,880 --> 00:11:53,490
So I kind of want to throw that icon up there.

136
00:11:54,110 --> 00:12:01,970
Let's go ahead and copy our favorites icon with command see school retard article.

137
00:12:01,970 --> 00:12:04,230
It's just pasted on here.

138
00:12:08,210 --> 00:12:14,360
And let's scale this down so it fits a little better.

139
00:12:16,810 --> 00:12:21,970
And if you'll notice it's actually snapping to to our margins that we've already created which is really

140
00:12:21,970 --> 00:12:26,530
nice but I want to go ahead and put this in the navigation bar.

141
00:12:27,910 --> 00:12:33,430
And then just to make sure I'm going to click the rectangle the navigation rectangle and I'm going to

142
00:12:33,430 --> 00:12:35,540
center it vertically.

143
00:12:35,550 --> 00:12:39,860
It's already it's already good to go.

144
00:12:39,860 --> 00:12:40,170
All right.

145
00:12:40,180 --> 00:12:45,760
So there is our favorites button so if you're scrolling through you'll like what you're reading you

146
00:12:45,760 --> 00:12:47,200
want to reference it later.

147
00:12:47,440 --> 00:12:53,260
Boom click the favorites button and it's in your Favorites folder.

148
00:12:53,260 --> 00:12:53,770
All right.

149
00:12:53,770 --> 00:12:57,660
So let's go ahead and make this a modal pop over.

150
00:12:57,970 --> 00:13:07,060
And so once the user swipes and this little star displays maybe it lights up a little little message

151
00:13:07,060 --> 00:13:09,460
Rap-Up up saying like hey it's successfully saved.

152
00:13:09,640 --> 00:13:12,400
And we won't have that user have to tap anything.

153
00:13:12,400 --> 00:13:15,110
It should probably just fade away in a couple of seconds.

154
00:13:15,160 --> 00:13:21,700
So what's incertain our board phone 7 is fine.

155
00:13:21,810 --> 00:13:30,390
And since this is just a template I am going to going to give it a background color so we can kind of

156
00:13:30,390 --> 00:13:32,060
see what we're working with.

157
00:13:32,130 --> 00:13:35,430
Just give it a gray or something that's fine.

158
00:13:35,910 --> 00:13:39,950
Let's go ahead and insert a rounded rectangle.

159
00:13:42,110 --> 00:13:46,790
And we'll just go ahead and make it around that size

160
00:13:49,550 --> 00:13:56,370
I'm going to decrease the radius around eight.

161
00:13:57,900 --> 00:14:08,750
And let's go ahead and remove the borders and I kind of want to make this black and white or gray I

162
00:14:08,750 --> 00:14:12,220
want to make it dark of Matra theme.

163
00:14:13,500 --> 00:14:16,420
That look really nice.

164
00:14:16,420 --> 00:14:17,100
All right.

165
00:14:17,410 --> 00:14:24,490
So like I said before you know this is going to pop up for a couple of seconds once these are swipes.

166
00:14:24,490 --> 00:14:29,190
This would be a really cool opportunity for an animation as well.

167
00:14:30,040 --> 00:14:35,170
If you guys want to take this and run with it if you're actually building the app but all we're going

168
00:14:35,170 --> 00:14:41,440
to do is kind of have a little checkmark or we could even use this icon.

169
00:14:41,980 --> 00:14:46,950
And then it's just going to say save it at the bottom so let's do that first.

170
00:14:46,960 --> 00:14:53,580
Go ahead and insert text and change changes to whites.

171
00:14:53,580 --> 00:14:55,830
We can see as we're typing.

172
00:14:56,330 --> 00:15:02,280
Well let's go ahead and type saved to favorites

173
00:15:05,850 --> 00:15:18,310
and I want to make this a regular I'm a center it and I'm also going to decrease the opacity just a

174
00:15:18,310 --> 00:15:22,200
bit because I don't think it needs to be super out there.

175
00:15:22,200 --> 00:15:24,890
Well I think 85 is fine.

176
00:15:28,370 --> 00:15:36,680
And let's bring the size down to maybe 17 17 is good.

177
00:15:36,760 --> 00:15:43,930
So go ahead and select it and click shift on the rectangle area to align it horizontally

178
00:15:49,810 --> 00:15:51,940
and let's go ahead and find a checkmark.

179
00:15:52,380 --> 00:15:59,940
Let's go back to the noun project and you can type in checkmark.

180
00:16:00,260 --> 00:16:08,390
A lot of times with Noun Project you can even think of synonyms like confirm or complete that or help

181
00:16:08,390 --> 00:16:12,270
you you know get some some other cool results.

182
00:16:12,310 --> 00:16:13,530
And but I like this guy.

183
00:16:13,700 --> 00:16:15,220
This guy's pretty cool.

184
00:16:16,660 --> 00:16:21,460
Let's go ahead and download it and we'll drag it over.

185
00:16:25,290 --> 00:16:29,650
Let's bring this an.

186
00:16:29,700 --> 00:16:29,980
All right.

187
00:16:29,980 --> 00:16:36,850
Now you'll notice it actually got thrown into the this art board.

188
00:16:36,850 --> 00:16:44,670
That's why it's not showing up so we just got to go here and drag it into our correct art.

189
00:16:45,120 --> 00:16:51,460
Let's double click it and let's click and drag over the text again we're going to delete and hit enter.

190
00:16:52,790 --> 00:16:56,590
And bring it in a little more

191
00:17:00,230 --> 00:17:09,210
all right and you know what that looks really good I'm just going to get it correct vertically so that

192
00:17:09,210 --> 00:17:11,150
we can just align it horizontally.

193
00:17:11,160 --> 00:17:13,980
I think that looks good.

194
00:17:13,980 --> 00:17:22,390
I aligned it horizontally and I want to see what it looks like when I give it the fill of my green color.

195
00:17:22,420 --> 00:17:26,360
So let's just go ahead and fill that in.

196
00:17:28,770 --> 00:17:31,950
And that looks really really good.

197
00:17:32,220 --> 00:17:35,040
And then I'm going to do the same thing I did with the star.

198
00:17:35,040 --> 00:17:42,840
I'm just going to put a white oval behind it so that we can fill in that check mark.

199
00:17:42,920 --> 00:17:52,480
So let's get rid of the border make this white and we're going to click this area and click our checkmark.

200
00:17:53,030 --> 00:17:56,750
Let's align it horizontally and vertically.

201
00:17:57,350 --> 00:17:59,430
Let's go and let's just throw that behind it.

202
00:18:01,200 --> 00:18:01,940
Looks great.

203
00:18:03,490 --> 00:18:05,500
It's also rename this.

204
00:18:05,530 --> 00:18:10,010
This is the check mark.

205
00:18:10,150 --> 00:18:18,420
And then with these selected we'll do command Jeeta group them and then checkmark.

206
00:18:18,440 --> 00:18:20,820
This is actually probably bad practice.

207
00:18:20,820 --> 00:18:28,630
Let's we want to denote this as just maybe just image or icon or there should be the image and image

208
00:18:28,660 --> 00:18:30,180
should be the icon.

209
00:18:30,940 --> 00:18:38,160
You don't want to name them to do the same thing because then you will know what's what's what.

210
00:18:38,170 --> 00:18:38,770
All right.

211
00:18:38,770 --> 00:18:40,510
So this is great.

212
00:18:40,510 --> 00:18:53,330
Now let's go ahead and group these well call these say we'll call this details and then let's go ahead

213
00:18:53,330 --> 00:18:53,810
in

214
00:18:56,810 --> 00:19:04,250
Shift click the rectangle and let's group this also we've got one group in here and we'll call it saved

215
00:19:04,580 --> 00:19:07,610
two favorites.

216
00:19:08,960 --> 00:19:09,630
Awesome.

217
00:19:12,060 --> 00:19:13,370
Awesome awesome awesome.

218
00:19:13,410 --> 00:19:13,790
Oh.

219
00:19:13,860 --> 00:19:15,000
One last thing.

220
00:19:15,120 --> 00:19:25,350
We're going to rename this laju home screen save to favorites so you might be wondering where are all

221
00:19:25,350 --> 00:19:29,360
these favorites being stored right we haven't created a screen for them yet.

222
00:19:29,700 --> 00:19:32,880
And that is what I want you guys to do.

223
00:19:32,880 --> 00:19:40,230
So think about the three questions that we answered in the beginning you know one of them being who

224
00:19:40,220 --> 00:19:45,310
is using this app what type of person are they and how are they going to be using it.

225
00:19:45,330 --> 00:19:52,170
And think about if you were saving articles to read later or to reference later how would you want them

226
00:19:52,260 --> 00:19:52,980
organized.

227
00:19:52,980 --> 00:19:54,890
How would you interact with this app.

228
00:19:55,200 --> 00:20:04,050
And I really encourage you to think deep on this because this kind of thinking and this kind of exercise

229
00:20:04,620 --> 00:20:07,980
is what separates the good apps from the great apps.

230
00:20:08,190 --> 00:20:16,140
And you know the great apps from the ones that actually become amazing products and go viral et cetera.

231
00:20:16,150 --> 00:20:24,770
So exercise the idea muscle exercise your creativity design a screen and you know you may not get in

232
00:20:24,770 --> 00:20:31,290
on the first on the first try you know I never get my final designs you know down on the first try so

233
00:20:31,320 --> 00:20:36,380
wrestle with it makes something that you're proud of that you like that you can see and envision in

234
00:20:36,390 --> 00:20:39,630
the app and once you're done with that.

235
00:20:39,630 --> 00:20:41,600
I'll see you in the next video.