1
00:00:07,930 --> 00:00:09,790
All right everybody welcome back.

2
00:00:09,780 --> 00:00:14,640
So things are looking really really good right now.

3
00:00:14,730 --> 00:00:18,540
We pretty much completed the feed tab.

4
00:00:18,540 --> 00:00:27,270
Now one thing to keep in mind is if you click on a user's picture or name you're probably going to take

5
00:00:27,450 --> 00:00:33,650
them to their profile page which you guys are going to do later on.

6
00:00:33,780 --> 00:00:38,290
But other than that the feed tab is pretty much done and it looks good.

7
00:00:38,310 --> 00:00:44,700
So we're going to do now is move on to the Save tab.

8
00:00:44,700 --> 00:00:57,300
Now let's think about exactly what's going to happen when a user saves either a producer or or a post.

9
00:00:57,360 --> 00:00:57,870
Right.

10
00:00:57,870 --> 00:01:07,500
So first of all we'll probably need some sort of icon saved icon on our custom cells that we're making

11
00:01:08,610 --> 00:01:10,860
to allow the user to easily save them.

12
00:01:10,860 --> 00:01:12,530
So let's let's do that right now.

13
00:01:12,530 --> 00:01:24,450
Actually let's go ahead and open up to the Noun Project and you can either find the icon that you used

14
00:01:24,600 --> 00:01:27,150
to represent the save tab.

15
00:01:27,150 --> 00:01:34,370
I'm just going to go ahead and dive in here and grab that grab that little star.

16
00:01:34,840 --> 00:01:45,770
Just go ahead and copy it and then go back to my feed page and what I can do is drill down into my groups

17
00:01:45,770 --> 00:01:47,700
until I find that first cell.

18
00:01:48,080 --> 00:01:52,120
So with that high lead I can just go ahead and paste

19
00:01:55,880 --> 00:01:57,920
and let's just drag this right over here

20
00:02:01,700 --> 00:02:09,020
and all we can do is kind of give it to like a wider fill because it isn't actually saved yet.

21
00:02:09,050 --> 00:02:15,020
When the user taps on it we can give it a color like a yellow or gold or something.

22
00:02:15,020 --> 00:02:24,690
So this is to indicate that it is not tapped yet it didn't go into this so let's go ahead and do that.

23
00:02:24,800 --> 00:02:35,870
Now what's really cool is if you have something in a group and you have it selected over here in this

24
00:02:36,170 --> 00:02:45,620
this pain and you option click into another group it's going to put it in the exact same location as

25
00:02:45,620 --> 00:02:49,630
the cell just in the appropriate spot.

26
00:02:49,670 --> 00:02:50,420
I'll show you what I mean.

27
00:02:50,420 --> 00:03:00,770
So we have our favorites button if we hold down option and click and drag into our copy which is this

28
00:03:00,770 --> 00:03:02,170
guy right here.

29
00:03:02,360 --> 00:03:07,160
You'll see that the favorite's icon was duplicated in the exact same spot.

30
00:03:07,160 --> 00:03:10,160
So that's super useful.

31
00:03:10,310 --> 00:03:16,070
So you don't have to go back and calculate exactly where it was and try to copy paste it directly in

32
00:03:16,070 --> 00:03:24,180
there and it's now in the appropriately grouped folder so that's super super convenient.

33
00:03:24,710 --> 00:03:25,420
So are at it.

34
00:03:25,460 --> 00:03:31,080
I'm going to go ahead and rename this cell to just to keep things nice and tidy.

35
00:03:31,820 --> 00:03:41,300
And let's go ahead and do the same thing for the artist mode so that and drill down in here.

36
00:03:41,340 --> 00:03:51,790
So I had my cell one in my cell too and I'm going to grab my favorites are saved Iconium and hold down

37
00:03:51,790 --> 00:03:55,270
option and drag it in my first cell folder.

38
00:03:55,510 --> 00:04:01,650
Boom pops another way Skechers making our lives super easy.

39
00:04:01,650 --> 00:04:08,960
And I see it one more time for the second so awesome so now.

40
00:04:08,970 --> 00:04:10,500
And how cool is this.

41
00:04:10,500 --> 00:04:21,260
So we manipulated our feed for the artist and for the producer and now our bid on project or posted

42
00:04:21,270 --> 00:04:26,750
job our boards have updated appropriately because we made them symbols.

43
00:04:27,060 --> 00:04:27,360
Right.

44
00:04:27,360 --> 00:04:35,310
So these are the symbols that we inserted behind our micro interactions are now automatically updating

45
00:04:35,420 --> 00:04:40,040
which which is super super awesome so.

46
00:04:41,310 --> 00:04:41,940
Good stuff.

47
00:04:41,940 --> 00:04:51,090
Now the user has a way to save certain posts or producers.

48
00:04:52,560 --> 00:04:57,330
So let's go ahead and create a new page.

49
00:04:57,440 --> 00:04:59,480
We'll call this saved

50
00:05:02,000 --> 00:05:14,510
and let's insert our Since there are four iPhone seven is perfect and we're going to go ahead and insert

51
00:05:15,900 --> 00:05:18,020
a symbol.

52
00:05:18,020 --> 00:05:21,300
Go ahead and find your.

53
00:05:22,070 --> 00:05:22,460
Let's see.

54
00:05:22,460 --> 00:05:25,610
Well first of all want the bottom bar.

55
00:05:25,610 --> 00:05:27,490
So do the tab bar.

56
00:05:31,020 --> 00:05:36,600
Our custom one once you go ahead and put that in there and let's make sure that everything is aligned

57
00:05:36,600 --> 00:05:37,080
perfectly.

58
00:05:37,080 --> 00:05:47,670
So you want to center it horizontally and then to the bottom and go ahead and click it and click over

59
00:05:47,670 --> 00:05:54,990
here and we're just going to detach it from the symbol because it's no longer selected in the feeds.

60
00:05:54,990 --> 00:06:00,680
I just want to change the colors around to show that we're on the saved have now.

61
00:06:00,780 --> 00:06:07,770
So go ahead and turn this into a gray.

62
00:06:07,830 --> 00:06:15,210
I don't remember what call this was specifically so I'm just going to control C into this gray and turn

63
00:06:15,210 --> 00:06:16,090
it that way.

64
00:06:18,800 --> 00:06:21,460
Looks like it was just that.

65
00:06:21,470 --> 00:06:23,290
Oh I already had it saved.

66
00:06:25,100 --> 00:06:32,490
And let's go ahead and swap these out with our orange stay Rigaud

67
00:06:39,330 --> 00:06:46,630
right now go ahead and up at insert you're going to want to insert.

68
00:06:46,680 --> 00:06:53,080
Let's just go ahead and grab our our navigation from our feed screen.

69
00:06:53,510 --> 00:07:02,310
Go ahead and throw that on there and we're going to make sure it's all line snap to the top and for

70
00:07:02,310 --> 00:07:07,530
this one I want to I'm going to do taxes as well because really do a couple of custom things to this

71
00:07:07,530 --> 00:07:13,900
one so let's manipulate this title first.

72
00:07:14,030 --> 00:07:17,670
But go ahead and just call this saved

73
00:07:23,420 --> 00:07:26,550
and let's go ahead and delete subtitle we don't need subtitles for now.

74
00:07:29,750 --> 00:07:40,430
I'm going to bring this down and I'm going to snap the top of this to the center of our navigation bar.

75
00:07:40,910 --> 00:07:49,830
And then while we're here let's go ahead and answer a status bar.

76
00:07:57,430 --> 00:08:02,880
And make sure it's aligned horizontally and snap to the top so that it is looking good.

77
00:08:02,880 --> 00:08:10,970
So I mean so far and you know three to five minutes with using symbols and things that we've already

78
00:08:10,970 --> 00:08:20,990
created or easily able to create basically a template for our entire saved tab which is awesome.

79
00:08:21,000 --> 00:08:24,450
So now what we want to do.

80
00:08:24,450 --> 00:08:33,750
So let's think about this for a second because in our feed right being good good product people and

81
00:08:33,750 --> 00:08:42,450
anticipating what the user is going to experience and be on this app for so you're going to be one of

82
00:08:42,450 --> 00:08:48,150
two things you're either going to be a producer looking for work or you're going to be a musician looking

83
00:08:48,150 --> 00:08:50,660
for a producer right.

84
00:08:50,700 --> 00:08:57,910
And if I anticipate that you're going to be most likely one of one of those two.

85
00:08:57,920 --> 00:08:59,340
And stick to it.

86
00:08:59,340 --> 00:09:05,400
There could be a small percentage that is both ends going to toggle back and forth.

87
00:09:05,640 --> 00:09:10,000
But since it is a marketplace most likely you're going to be one or the other.

88
00:09:10,020 --> 00:09:22,110
So I think what we should do is for saved since we can either save a project or a producer I don't want

89
00:09:22,110 --> 00:09:30,480
to have them all grouped in the same table view because I think that the likelihood of that scenario

90
00:09:30,480 --> 00:09:36,780
playing out where I'm a producer and I'm saving a bunch of posts then I switch to artist mode and I'm

91
00:09:36,780 --> 00:09:38,240
saving a bunch of producers.

92
00:09:38,400 --> 00:09:44,920
I don't think I don't anticipate that being an ideal use scenario.

93
00:09:45,270 --> 00:09:49,920
And this is something that you guys want to think about as you're building out your products.

94
00:09:49,920 --> 00:09:55,950
You know what is the ideal use case scenario and then how do we optimize the experience for that.

95
00:09:55,950 --> 00:10:04,320
How do we create the ideal user flow and then build out the UI from there.

96
00:10:04,320 --> 00:10:16,410
So I think it's going to be one or the other and so we should have probably a filter that either defaults

97
00:10:16,420 --> 00:10:25,300
to producer or artist and then from there the table view will show you know either saved posts or saved

98
00:10:25,300 --> 00:10:26,770
producers.

99
00:10:26,980 --> 00:10:33,880
And what's even cooler about that is this if you were writing this out in code you can have this tab

100
00:10:34,120 --> 00:10:44,470
talk to your feed tab and say OK if I'm in producer mode let's have the default filter be saved you

101
00:10:44,470 --> 00:10:48,130
know saved post for people looking for work right.

102
00:10:48,160 --> 00:10:55,570
So the app is able to anticipate what the users therefore I'm a producer.

103
00:10:55,570 --> 00:10:58,400
I don't care about saving other producers right now.

104
00:10:58,410 --> 00:11:00,010
I just I'm just looking for jobs right.

105
00:11:00,040 --> 00:11:10,630
So another another way you want to dig deep mentally into the mind of who is using your app and optimized

106
00:11:10,630 --> 00:11:12,800
for that experience.

107
00:11:12,850 --> 00:11:14,630
So enough of me talking.

108
00:11:14,680 --> 00:11:17,110
Let's go ahead and build this out.

109
00:11:17,590 --> 00:11:28,900
I am going to start with the producer mode so we're going to have a list of save jobs from artists so

110
00:11:29,960 --> 00:11:32,980
let's go ahead and insert a shape.

111
00:11:33,440 --> 00:11:35,110
Ovals fine.

112
00:11:37,380 --> 00:11:46,880
And I'm going to talk my grid on control G I'm going to make this roughly.

113
00:11:46,930 --> 00:11:55,040
Well let's see let's see how big this one was because this was kind of a good size I forget 60.

114
00:11:55,060 --> 00:11:55,760
OK.

115
00:11:57,690 --> 00:11:58,980
It's not too bad.

116
00:11:59,050 --> 00:12:05,000
So 60 and I'm going to align it 20 points from the left.

117
00:12:05,090 --> 00:12:14,000
It's fine to get rid of the border and leave that there for now let's go ahead and insert some text

118
00:12:17,310 --> 00:12:26,640
and I'm going to make sure that this is left aligned as well and I'm going to type the first name.

119
00:12:26,760 --> 00:12:31,720
We can go ahead and change the text color to the gray that we we have set for it.

120
00:12:33,320 --> 00:12:39,000
I'll just put this maybe 20 20 points away.

121
00:12:39,660 --> 00:12:45,850
Regular is fine and size 15 or whatever size you guys have already go.

122
00:12:46,310 --> 00:12:48,390
Nice sized 15.

123
00:12:48,520 --> 00:12:58,310
So far this is first and last name so their full name and.

124
00:12:59,890 --> 00:13:03,940
So here's something to think about if I am a producer

125
00:13:07,270 --> 00:13:16,240
and I'm looking through and I have all these jobs saved what is some crucial information that we're

126
00:13:16,240 --> 00:13:17,560
going to want to have.

127
00:13:17,560 --> 00:13:18,730
Scannable.

128
00:13:18,880 --> 00:13:20,500
Right.

129
00:13:21,010 --> 00:13:28,670
Right now at our disposal we have the time that it was posted the day was posted.

130
00:13:28,780 --> 00:13:34,820
Where was the post the budget the genre and the name.

131
00:13:34,900 --> 00:13:44,270
I am not entirely sure that that is John-Roger matters as much as the budget the name because when you're

132
00:13:44,270 --> 00:13:49,160
scanning you're going to associate the picture with the name.

133
00:13:49,160 --> 00:13:51,250
And that's going to stick out in your mind.

134
00:13:51,530 --> 00:13:56,830
And I think I want to default organize this by the time saved right so that somebody's going to have

135
00:13:56,840 --> 00:14:05,210
to keep in mind if you're building this app out or sending it to a developer you know the default would

136
00:14:05,210 --> 00:14:10,700
be from top to bottom from most recent to least.

137
00:14:10,730 --> 00:14:18,130
So I think I'm going to go with the first and last name and I'm going to limit it to two lines of a

138
00:14:18,140 --> 00:14:22,260
description so it will be scription.

139
00:14:22,280 --> 00:14:30,690
This is a description a description that is two lines right.

140
00:14:30,770 --> 00:14:40,760
And I'm going to decrease the size because I don't want to take up the same scan ability scannable space

141
00:14:40,790 --> 00:14:42,940
as the first and last name of the picture.

142
00:14:42,950 --> 00:14:45,230
I don't want it to detract from that so

143
00:14:48,560 --> 00:14:51,110
it's good going to bring this up.

144
00:14:51,120 --> 00:14:53,480
So that's eight points away.

145
00:14:54,050 --> 00:14:57,110
And let's go ahead.

146
00:14:57,110 --> 00:15:01,360
Well let's let's group the description and the name.

147
00:15:01,550 --> 00:15:08,330
So this is going to be post name and description.

148
00:15:08,420 --> 00:15:12,490
And now let's go ahead ingroup it with our picture.

149
00:15:12,600 --> 00:15:15,360
So it's going to.

150
00:15:15,610 --> 00:15:19,620
We can also while we have this go ahead in the line it vertically.

151
00:15:20,590 --> 00:15:22,440
And that kind of fits nicely nicely.

152
00:15:22,440 --> 00:15:26,110
They're really really close to the same height.

153
00:15:26,860 --> 00:15:31,530
And while we're at it let's go in group and post.

154
00:15:31,930 --> 00:15:37,200
Well post description and picture

155
00:15:40,780 --> 00:15:41,380
are right.

156
00:15:41,380 --> 00:15:47,540
So the last thing I think I'm going to want to know if I am a producer that I've saved all these jobs

157
00:15:47,540 --> 00:15:55,460
and probably going to follow up with them later is the bid amount and we want this in a place that's

158
00:15:55,520 --> 00:16:00,170
easily scannable in this area.

159
00:16:00,200 --> 00:16:10,470
This entire side right here is taken up by the name and the picture which I think is super super important

160
00:16:10,490 --> 00:16:13,710
already since the eyes read from left to right.

161
00:16:14,030 --> 00:16:17,550
So let's insert text I'm going to put it on the right side.

162
00:16:17,640 --> 00:16:22,380
I'm going to say good $500

163
00:16:25,070 --> 00:16:28,150
and I'm going to make it that green color.

164
00:16:28,520 --> 00:16:37,000
So we had it think it was out one bold it make it stick out a little bit more.

165
00:16:37,440 --> 00:16:45,310
And I want to make sure that it does not interfere with our dynamic text and what I mean by that is

166
00:16:46,330 --> 00:16:48,510
this first and last name right now.

167
00:16:48,580 --> 00:16:50,360
This is the great right.

168
00:16:50,500 --> 00:16:52,400
With the big amount right here.

169
00:16:52,450 --> 00:16:53,880
Seems like it's out of the way enough.

170
00:16:53,890 --> 00:17:03,250
What if I had a last name that was this long and since the user can put in anything they can do it in

171
00:17:03,250 --> 00:17:05,170
all caps whatever they want to do.

172
00:17:05,170 --> 00:17:10,360
Right now it's getting awfully close to the good amount.

173
00:17:10,360 --> 00:17:19,630
So always keep in mind dynamic text when you're creating your apps you know users will find a way to

174
00:17:20,650 --> 00:17:27,820
mess up everything that you've had envisioned and they'll they'll write super long descriptions and

175
00:17:27,850 --> 00:17:35,440
you'll have to go back and fix your code or I've had an app where I didn't put any character limits

176
00:17:35,440 --> 00:17:35,880
on it.

177
00:17:35,890 --> 00:17:42,550
And then the name just went off the screen or it wrapped around the entire the entire width of the screen

178
00:17:42,580 --> 00:17:44,110
it was crazy.

179
00:17:44,110 --> 00:17:48,830
So you always want to account for those sort of things so.

180
00:17:49,980 --> 00:17:51,840
And of course I spelled that wrong.

181
00:17:54,040 --> 00:17:59,420
So while this is here I'm going to find a good high that's going to float right above it.

182
00:18:00,380 --> 00:18:04,330
And I want it roughly 20 points away from the right edge.

183
00:18:04,520 --> 00:18:10,650
So roughly it doesn't to be perfect we can actually go to the right and then count 20 out.

184
00:18:10,950 --> 00:18:12,890
But this is fine.

185
00:18:15,170 --> 00:18:22,610
For now it's not going to go ahead and delete this text.

186
00:18:22,830 --> 00:18:27,050
And I think that looks great.

187
00:18:27,060 --> 00:18:30,880
So let me add this to the group.

188
00:18:31,060 --> 00:18:32,560
I can actually you know what I'm going to do.

189
00:18:32,560 --> 00:18:38,740
I'm going to throw this in here and I'm going to rename this post details

190
00:18:41,570 --> 00:18:42,250
OK.

191
00:18:44,580 --> 00:18:50,160
So now that we have some grid lines as you can see

192
00:18:53,020 --> 00:19:02,940
we can kind of tell where the how big the post is going to go ahead and add a line

193
00:19:05,620 --> 00:19:13,980
that's got me here insert shade and you grab a line and toggle my grid on I'm going to start 20 points

194
00:19:13,980 --> 00:19:15,220
from the left.

195
00:19:15,600 --> 00:19:16,980
I mean a whole down shift.

196
00:19:17,010 --> 00:19:21,610
I'm going to drag it all the way out to the right edge as close as I can.

197
00:19:21,900 --> 00:19:29,480
And then you can also zoom in if you want to make it a little more perfect.

198
00:19:30,270 --> 00:19:31,130
Just my opinion.

199
00:19:31,140 --> 00:19:35,480
I find that having a one point line is a little afiq.

200
00:19:35,580 --> 00:19:44,640
So I like to just go point 5 over here in the border section of the line and that I'll usually drop

201
00:19:44,640 --> 00:19:45,480
it down.

202
00:19:47,080 --> 00:19:51,610
I may get a nice nice then line you can even decrease the opacity.

203
00:19:51,610 --> 00:19:52,900
I think that looks nice.

204
00:19:52,900 --> 00:19:53,830
Fifty percent.

205
00:19:53,890 --> 00:19:55,190
Kind of like a letter grade.

206
00:19:56,710 --> 00:19:57,030
OK.

207
00:19:57,050 --> 00:20:00,020
So I'm going to go ahead and

208
00:20:03,470 --> 00:20:12,970
sort of give it the same space it had from the from this top to the knife to the bottom of her nav.

209
00:20:13,440 --> 00:20:21,190
And then the bottom two our are aligned so it is rough if you want it to be exact.

210
00:20:24,480 --> 00:20:32,020
We could actually see so that's 40

211
00:20:35,370 --> 00:20:36,730
Do we have a line here you know.

212
00:20:36,730 --> 00:20:37,690
Go ahead.

213
00:20:38,860 --> 00:20:39,660
I'm going to clean this up.

214
00:20:39,670 --> 00:20:47,560
This is probably my my doing but if you had a shot or a line that you can go out and clean that up.

215
00:20:48,160 --> 00:20:51,730
And so we want this to be roughly 40 away.

216
00:20:52,180 --> 00:20:53,480
Let's see what that looks like.

217
00:20:57,020 --> 00:20:59,380
You know it looks a little spaced out.

218
00:20:59,380 --> 00:21:11,410
I don't I don't mind it but go ahead and adjust to taste and use the this picture as a guideline for

219
00:21:11,440 --> 00:21:17,750
how you want this line to be spaced from the top and the bottom because this is all this is all kind

220
00:21:17,750 --> 00:21:24,470
of not as as relevant when you're at first glance and the bid is just kind of off to the right so I

221
00:21:24,470 --> 00:21:31,220
think if anything people are going to be drawn to this general area right here and then see like I said

222
00:21:31,220 --> 00:21:37,990
if this is too close then this huge circle is out of center.

223
00:21:38,050 --> 00:21:39,990
Bring this back up just a little bit.

224
00:21:44,750 --> 00:21:48,820
So I brought it up seven seven points I do the same thing for my line

225
00:21:54,250 --> 00:21:55,240
I feel like it didn't

226
00:22:00,750 --> 00:22:22,840
it looks like it's roughly 15 years and bring it up a little more.

227
00:22:22,970 --> 00:22:30,290
What we can also do as well and I've done this a couple of times before is I'll go ahead and insert

228
00:22:30,380 --> 00:22:37,760
a rectangle in the background and I'll use that as kind of a guideline so that I can use these handy

229
00:22:37,760 --> 00:22:40,200
dandy tools right here.

230
00:22:41,170 --> 00:22:46,800
And so if you're mocking something up for perfection you can insert a rectangle.

231
00:22:47,200 --> 00:22:54,190
Go ahead and throw it over and for this I'm going to go ahead and make it 120

232
00:22:56,590 --> 00:23:02,290
high and let's go ahead and throw it in our post details we're gonna put it all of the at the bottom

233
00:23:02,440 --> 00:23:12,220
because you wanted to be in the background and I'm going to get rid of the border and I'm going to make

234
00:23:12,220 --> 00:23:16,340
the fill white.

235
00:23:16,390 --> 00:23:28,330
Now you could also if you wanted to use the border as a separator you would just have to sacrifice not

236
00:23:28,330 --> 00:23:32,710
having this like little little space which I think looks really nice.

237
00:23:32,710 --> 00:23:34,860
I'm going to keep that.

238
00:23:35,170 --> 00:23:35,620
Go ahead.

239
00:23:35,620 --> 00:23:43,380
You can bring your line into your post details folder.

240
00:23:44,080 --> 00:23:52,260
And let's go ahead and align it to the bottom of our rectangle.

241
00:23:52,260 --> 00:23:56,200
Go ahead and snap that.

242
00:23:56,400 --> 00:24:02,100
And I think actually it it move the rectangle down so I'm going to go in group this and then we'll just

243
00:24:02,100 --> 00:24:10,590
do a rectangle template and line I'm going to bring this up.

244
00:24:12,120 --> 00:24:14,170
All the way to the top

245
00:24:17,120 --> 00:24:20,180
of my navigation.

246
00:24:20,530 --> 00:24:21,820
And now we can do

247
00:24:24,620 --> 00:24:26,330
is grab all of these

248
00:24:29,970 --> 00:24:31,180
and we can group them

249
00:24:34,400 --> 00:24:35,860
post information.

250
00:24:35,870 --> 00:24:37,010
I am running out of names.

251
00:24:37,030 --> 00:24:41,230
Call these things and select our second group.

252
00:24:41,240 --> 00:24:44,990
Let's go ahead and align it vertically.

253
00:24:45,510 --> 00:24:52,770
So you know we're going to have to do is take our bid out of this because it's actually offsetting our

254
00:24:53,970 --> 00:24:54,450
our

255
00:24:58,450 --> 00:25:05,390
our circle here and now just go ahead and with this with this post so it's just going to be the picture

256
00:25:05,750 --> 00:25:08,580
the name and the description.

257
00:25:09,080 --> 00:25:14,060
Select the rectangle template and you're going to align it vertically.

258
00:25:14,850 --> 00:25:20,550
And that will snap it perfectly to the center and then you can go ahead and bring your bed back up.

259
00:25:22,770 --> 00:25:31,530
Make sure it looks good in a good spot and once you're done you can throw it back in back into the Citigroup

260
00:25:31,590 --> 00:25:32,610
folder.

261
00:25:37,300 --> 00:25:39,580
So that looks really really good.

262
00:25:41,520 --> 00:25:42,870
What we can also do

263
00:25:45,560 --> 00:25:48,320
now that we have all of this is we can go ahead and just

264
00:25:51,900 --> 00:25:59,440
option click and drag it down to create a couple more.

265
00:25:59,650 --> 00:26:03,390
And obviously what you're going to want to do is change the bed numbers.

266
00:26:03,390 --> 00:26:06,370
Throw some cool headshots in here.

267
00:26:06,490 --> 00:26:10,840
Change the names make it look super real.

268
00:26:11,530 --> 00:26:21,190
And lastly for this section what we're going to want to do is make sure that the user knows they are

269
00:26:21,190 --> 00:26:22,730
in producer mode.

270
00:26:22,810 --> 00:26:26,740
So we get to that one of two ways we could manipulate the title.

271
00:26:26,760 --> 00:26:33,750
And this is more of what you would want to do is personal preference.

272
00:26:34,420 --> 00:26:40,540
We could manipulate the title to say saved job postings

273
00:26:43,190 --> 00:26:49,490
and we can put like a little drop down or filter like the same way we have it in our feed where they

274
00:26:49,490 --> 00:26:57,770
could toggle between save job postings or saved producers so I kind of like that idea.

275
00:26:58,320 --> 00:27:04,880
I'm going to see I think we used a filter triangle somewhere.

276
00:27:04,880 --> 00:27:11,500
If not we can just make one.

277
00:27:11,720 --> 00:27:12,390
We did not.

278
00:27:12,410 --> 00:27:13,030
OK.

279
00:27:13,040 --> 00:27:16,010
All right so let's go ahead and just make one really quickly.

280
00:27:16,010 --> 00:27:20,900
We can go up to insert triangle.

281
00:27:20,950 --> 00:27:25,480
Let's just go ahead and make it a little trying going.

282
00:27:25,490 --> 00:27:29,470
Take the border off and make it white.

283
00:27:29,700 --> 00:27:30,300
Let's rotate

284
00:27:35,810 --> 00:27:36,290
OK.

285
00:27:36,300 --> 00:27:43,020
It's a little big I'm going to click the lock so we stay proportionate with all our dimensions are going

286
00:27:43,020 --> 00:27:45,180
to just decrease the width.

287
00:27:45,350 --> 00:27:50,520
So that's going to bring down the height a little bit and then slap this right over here.

288
00:27:56,590 --> 00:28:03,490
So now the user knows that they if they tap this what will will probably happen is it will become a

289
00:28:05,250 --> 00:28:05,860
toggle.

290
00:28:05,860 --> 00:28:10,520
So go ahead and drag your triangle into your navigation bar.

291
00:28:14,570 --> 00:28:18,580
And we can go ahead and group the triangle and our title.

292
00:28:18,950 --> 00:28:25,370
Let's go ahead and just call this title and I'm going to position it or line it horizontally.

293
00:28:25,370 --> 00:28:26,730
I'm sorry.

294
00:28:26,760 --> 00:28:27,240
So

295
00:28:30,560 --> 00:28:31,630
that's looking good.

296
00:28:31,850 --> 00:28:33,980
So here is a quick tidbit.

297
00:28:34,010 --> 00:28:41,810
I don't know if it's just me but when you add icons either to the left or to the right of text and you

298
00:28:41,810 --> 00:28:49,010
Center it obviously it's grabbing this edge and this edge and making sure that the equidistant on both

299
00:28:49,010 --> 00:28:49,970
sides.

300
00:28:50,240 --> 00:29:02,000
But for some reason I think visually the text makes it look like it's not aligned and I'm not sure why

301
00:29:02,010 --> 00:29:10,010
and this might be just my personal preference but I always offset it a little bit towards the direction

302
00:29:10,040 --> 00:29:11,510
in which we have the icon right.

303
00:29:11,510 --> 00:29:14,410
So it looks a little too far left.

304
00:29:14,420 --> 00:29:18,170
I'm just going to bump it over to the right just a little bit.

305
00:29:18,460 --> 00:29:23,620
And I find that helps to make things look a little more even.

306
00:29:23,810 --> 00:29:29,120
Similarly if we have this icon on the left and we centered it would probably want to tap it over to

307
00:29:29,120 --> 00:29:34,970
the left a couple of times so that is looking great guys.