1
00:00:05,040 --> 00:00:12,030
One guy so the app are going to be building is called top.

2
00:00:12,410 --> 00:00:19,460
And the basic premise of the app is you know it's going to give you 10 articles on a topic you care

3
00:00:19,460 --> 00:00:21,640
about a day or a week.

4
00:00:21,910 --> 00:00:28,790
And this is something you can open up to pass the time you know if you have a quick second on a subway

5
00:00:29,270 --> 00:00:31,510
or you know waiting in line for lunch or something.

6
00:00:31,510 --> 00:00:37,850
You'll be able to open this up and read an article or a credible article about a topic you care about

7
00:00:39,050 --> 00:00:46,730
whether this be tech business sports football you know anything goes.

8
00:00:46,820 --> 00:00:53,540
And so like I said before you know there's three things that we're going to want to identify in order

9
00:00:53,540 --> 00:00:58,400
to round out the vision of the app and help us mold it as we design it.

10
00:00:58,400 --> 00:01:02,630
So the first question is what is the goal of your.

11
00:01:02,690 --> 00:01:09,680
And like I said right here the goal is to keep the user up to date on a topic they care about in a brief

12
00:01:09,680 --> 00:01:11,650
and engaging manner.

13
00:01:11,680 --> 00:01:11,960
Right.

14
00:01:11,960 --> 00:01:15,570
So we want to keep it short we want to keep it snappy.

15
00:01:15,830 --> 00:01:23,810
You know if I was waiting in line for a sandwich and I saw this 30 page article I'd kind of gauge how

16
00:01:23,810 --> 00:01:28,880
much I'd want to read it versus maybe a couple of paragraphs about the new Mac Book Pro coming out.

17
00:01:28,880 --> 00:01:37,240
So that is the goal the I keep it brief and you know keeping the user up to date.

18
00:01:37,550 --> 00:01:40,570
Describe your app as if it were a person.

19
00:01:40,580 --> 00:01:47,430
So when I think about this app I want it to resonate with me.

20
00:01:47,870 --> 00:01:55,420
And so I put you know like modern credible and deliberate and modern is kind of self-explanatory.

21
00:01:55,520 --> 00:02:01,280
Credible is we want the user to feel like when they open it up they're not getting garbage they're not

22
00:02:01,280 --> 00:02:02,270
getting stuff.

23
00:02:02,270 --> 00:02:07,910
You can find on yahoo answers or littered in the deep dark web right.

24
00:02:07,910 --> 00:02:16,090
You know it's it's a credible source and it's it's something that they can depend on.

25
00:02:16,550 --> 00:02:17,750
That's going to be correct.

26
00:02:17,760 --> 00:02:20,970
So modern credible.

27
00:02:21,260 --> 00:02:29,450
And last but not least deliberate and deliberate kind of plays off of you know incredible a little bit

28
00:02:30,380 --> 00:02:40,060
but mixed with the brevity the how brief it is and how to the point all of the content is going to be.

29
00:02:40,760 --> 00:02:48,080
So that is how I would describe it if you know if it was a person you know maybe somebody my age or

30
00:02:48,080 --> 00:02:51,780
your age that's credible and they mean what they say.

31
00:02:52,610 --> 00:03:01,700
And who'll be using your apps so I'm anticipating that it's going to be 20 to 30 year old young busy

32
00:03:01,730 --> 00:03:02,850
professionals.

33
00:03:03,170 --> 00:03:09,080
And the reason why I say this is because people in this age really like to keep up with what's going

34
00:03:09,080 --> 00:03:09,780
on.

35
00:03:10,220 --> 00:03:17,600
But you know they're so busy getting their professional lives started they may have a really busy job

36
00:03:18,230 --> 00:03:19,220
running around.

37
00:03:19,220 --> 00:03:25,990
You know also having a night life having fun and doing a bunch of all sorts of other things so if you're

38
00:03:26,000 --> 00:03:30,590
in this age range you and you know you and you're a young professional you might know what I'm talking

39
00:03:30,590 --> 00:03:31,920
about.

40
00:03:32,010 --> 00:03:37,280
So this is going to be geared towards them something that they can pick up real quick about something

41
00:03:37,280 --> 00:03:42,030
they care about and set it down in 30 seconds to a minute.

42
00:03:42,080 --> 00:03:50,870
So let's go ahead and get started on what we're going to want to do is open sketch now that you've downloaded

43
00:03:50,870 --> 00:03:51,850
or bought it.

44
00:03:52,320 --> 00:04:00,590
And so normally there's this there's interest free in you know if you already have a project open you

45
00:04:00,590 --> 00:04:06,870
can go to file new to create in your project but this works great.

46
00:04:07,040 --> 00:04:14,290
And what we're going to start with is inserting and art boards up here at the top left.

47
00:04:14,360 --> 00:04:24,320
We are going to click this little plus button and click our board now our words act as canvases almost

48
00:04:24,620 --> 00:04:27,450
like in some other programs you may be familiar with.

49
00:04:27,980 --> 00:04:35,510
And basically what they allow us to do is start designing on a canvas or you know a place where we can

50
00:04:35,510 --> 00:04:40,090
put all our assets so there's two ways that you can create our boards.

51
00:04:40,190 --> 00:04:49,130
The first way as you can see my mouse turn this little cross-hair looking thing so you can click and

52
00:04:49,130 --> 00:04:56,110
drag and Krynn are part of any in any dimension.

53
00:04:56,130 --> 00:04:59,940
Right so here is what it looks like.

54
00:05:00,290 --> 00:05:06,710
And we can also choose from one of the templates over here.

55
00:05:06,720 --> 00:05:16,650
Now what's really really powerful about sketch is you can choose from templates from iOS design or iOS

56
00:05:16,650 --> 00:05:24,200
devices web material design icons Android icons like the list goes on and on.

57
00:05:24,230 --> 00:05:26,000
It's actually a pretty unreal.

58
00:05:26,610 --> 00:05:35,150
But we are going to go ahead and just click iPhone 7 that works perfectly for what we're trying to do.

59
00:05:36,280 --> 00:05:45,580
And if you'll notice on the left hand side over here the art board kind of got thrown into this little

60
00:05:45,580 --> 00:05:51,250
little pain and it says Page 1 and this is kind of where all the organization lives like this is the

61
00:05:51,250 --> 00:05:55,540
organization hierarchy over here.

62
00:05:55,540 --> 00:06:00,530
And as you can probably tell you can have multiple pages.

63
00:06:00,790 --> 00:06:03,140
I don't know why mine is stuck there.

64
00:06:03,160 --> 00:06:03,440
OK.

65
00:06:03,450 --> 00:06:03,910
Here we go.

66
00:06:03,910 --> 00:06:08,530
So you can have multiple pages like you here I can add.

67
00:06:08,530 --> 00:06:10,150
And you know another page.

68
00:06:10,150 --> 00:06:15,130
And then within these pages we can have multiple art boards.

69
00:06:15,680 --> 00:06:20,310
And those are Burts we're going to have her designs.

70
00:06:20,500 --> 00:06:22,150
So I'm going to go ahead and delete these

71
00:06:24,640 --> 00:06:27,950
pages because we only need one for now.

72
00:06:30,850 --> 00:06:39,920
And we're going to go ahead and rename our board homescreen so you can see it changed up here.

73
00:06:40,530 --> 00:06:47,370
Now what's really cool about scatch is they work off the point system which is the same system that

74
00:06:48,210 --> 00:06:54,880
Apple designed in X code you know to handle their screen sizes and screen resolution.

75
00:06:54,870 --> 00:07:07,160
So as you can as you can see over here the size actually three 175 points wide and 667 points high.

76
00:07:07,180 --> 00:07:10,780
That's good to know and good to keep in mind.

77
00:07:10,800 --> 00:07:16,840
All right so now what we're going to do is insert our navigation bar.

78
00:07:16,860 --> 00:07:25,260
So we're going to go back up here to the insert button and click shape and rectangle.

79
00:07:25,740 --> 00:07:30,930
And this is by the way this is where you're probably mostly going to live in this little insur area

80
00:07:30,960 --> 00:07:39,810
as you can see you can do vector's pencil tonner shapes tacks images symbols slices you know you name

81
00:07:39,810 --> 00:07:46,470
it pretty much so we'll go ahead and choose rectangle and then we're going to start a period at the

82
00:07:46,470 --> 00:07:54,480
top left corner and we're going to left click and drag and we're going to go all the way across the

83
00:07:54,660 --> 00:07:55,130
board.

84
00:07:57,040 --> 00:08:05,060
Until it snaps and then we're going to go down to around 64 64 points high.

85
00:08:05,890 --> 00:08:11,870
And we have our first shape in sketch so congratulations.

86
00:08:12,520 --> 00:08:20,240
And as you can see this attributes pain kind of got filled up in it's referencing the rectangle.

87
00:08:20,240 --> 00:08:26,300
So because we have the rectangle selected it's now saying OK look you can you know change the opacity

88
00:08:26,720 --> 00:08:31,500
you can change the radius of the corners which is really cool right from here.

89
00:08:31,570 --> 00:08:36,680
Phil Boyer's shadows Blur's a bunch of course stuff you can do here.

90
00:08:36,690 --> 00:08:41,420
But for now we'll just go ahead and check the border.

91
00:08:41,880 --> 00:08:49,290
And I want to make this Phil a darker color like a dark gray.

92
00:08:49,300 --> 00:08:53,260
So go ahead and find a dark gray.

93
00:08:53,370 --> 00:08:57,030
I'm going to use this because this looks pretty good.

94
00:08:57,060 --> 00:09:02,590
If you can't find one that you like I'm going to use 3 7 3 7 3 7.

95
00:09:05,620 --> 00:09:06,390
All right.

96
00:09:06,410 --> 00:09:10,070
And that looks that looks good.

97
00:09:10,080 --> 00:09:15,350
And so we're going to want to rename this so we don't get confused because as you start adding more

98
00:09:15,350 --> 00:09:22,690
shapes and more elements onto your board it's really important to keep this side of the screen organized.

99
00:09:22,700 --> 00:09:28,030
You know you'll end up having 30 rectangles and not know which ones which.

100
00:09:28,040 --> 00:09:38,340
So go ahead and type in navigation rectangle.

101
00:09:38,370 --> 00:09:46,390
Now let's go ahead and insert text so again appear at the top top left insert text.

102
00:09:46,420 --> 00:09:47,640
That's huge.

103
00:09:47,650 --> 00:10:00,890
Let's go ahead and bring this down just a bit and let's type top10 you top 10 in all caps one word and

104
00:10:00,890 --> 00:10:09,980
I'll show you why in just a second and go ahead and choose a font that you like but remember that we

105
00:10:09,980 --> 00:10:16,850
wanted to give off let's say a modern credible deliberate feel.

106
00:10:17,120 --> 00:10:17,450
Right.

107
00:10:17,450 --> 00:10:25,490
So this is the first example of you know going back to these three these three questions that we started

108
00:10:25,490 --> 00:10:31,940
with are these three bullet points that we started with and using them to dictate our direction as we

109
00:10:31,940 --> 00:10:32,990
go.

110
00:10:32,990 --> 00:10:41,560
So I kind of want this to you know feel like it's a it's a modern modern brand.

111
00:10:42,090 --> 00:10:49,790
So I am going to will first of all let's boldy and our show is pretty cool.

112
00:10:49,810 --> 00:10:51,480
Right out the gate.

113
00:10:52,990 --> 00:10:54,460
I'm using Avenue next.

114
00:10:54,550 --> 00:10:55,300
I really like it.

115
00:10:55,300 --> 00:11:00,430
I feel like it has a really good authoritative bold font.

116
00:11:00,430 --> 00:11:03,040
Go ahead and choose something that you like.

117
00:11:03,040 --> 00:11:12,000
That is a modern credible and deliberate and I am going to separate these two words.

118
00:11:12,000 --> 00:11:21,790
I'm going to make top the word Top White for now and I think that looks really cool.

119
00:11:21,800 --> 00:11:33,260
Now as you can see when you start dragging any elements you know in or around a shape these little red

120
00:11:33,260 --> 00:11:34,240
grids will come up.

121
00:11:34,350 --> 00:11:35,600
Are red lines.

122
00:11:35,600 --> 00:11:40,520
And this is a really handy thing a sketch does basically telling you hey you know what.

123
00:11:40,520 --> 00:11:48,080
Here's the center of this rectangle So if you put it here you know your ass it will be centered.

124
00:11:48,420 --> 00:11:49,900
And here's the top and here's the bottom.

125
00:11:49,910 --> 00:11:51,980
We're going to go ahead and just leave it here for now.

126
00:11:51,980 --> 00:11:59,900
Right smack dab in the center and that is looking pretty good right.

127
00:11:59,950 --> 00:12:07,690
So before we move on there's a couple of things that I wanted to point out and the first thing is if

128
00:12:07,690 --> 00:12:09,220
you notice this top 10.

129
00:12:09,220 --> 00:12:16,130
So like I said before we wanted to keep it one word but we split up the colors to denote that there

130
00:12:16,130 --> 00:12:19,240
are actually two words you know top 10.

131
00:12:19,600 --> 00:12:28,450
And it's really important whenever you can to find ways to speak with colors texts you know especially

132
00:12:28,450 --> 00:12:32,860
with text Boulding things and you know keeping things maybe like light.

133
00:12:33,010 --> 00:12:39,280
It enhances the personality of your app what you're trying to convey and since you're trying to convey

134
00:12:39,280 --> 00:12:46,220
a modern ABW I thought this was a perfect example of how to use that in practice other things you can

135
00:12:46,220 --> 00:12:54,800
do other things you could do is if you just highlight a top and maybe made it ultralite for example.

136
00:12:54,820 --> 00:12:58,160
I mean that even looks I mean looks pretty cool.

137
00:12:58,690 --> 00:13:06,060
But instead what we could do is keep you know make this white or vice versa.

138
00:13:06,100 --> 00:13:12,230
Or maybe that's a little too bold but things like that where you can have some things like somethings

139
00:13:12,310 --> 00:13:20,490
ball some things Demy bold and something regular you know really add adds character to your text.

140
00:13:20,530 --> 00:13:22,000
And you know your UI.

141
00:13:22,000 --> 00:13:27,900
So I'm going to go ahead and change this back because I like the way it was before.

142
00:13:28,150 --> 00:13:32,550
And for 10 we had a green color.

143
00:13:33,500 --> 00:13:36,480
It just shows one of these.

144
00:13:36,600 --> 00:13:38,830
It looks pretty good.

145
00:13:38,830 --> 00:13:39,430
We use that.

146
00:13:39,440 --> 00:13:42,590
So go ahead and choose a green color that you like.

147
00:13:43,030 --> 00:13:52,660
If you are having trouble finding one I'll be using this one it's for be five 5 4 9 looks pretty good.

148
00:13:52,690 --> 00:13:58,570
The second thing that I wanted to point out is if you notice we made the navigation bar gray and the

149
00:13:58,570 --> 00:14:06,640
reason why we're doing this is the the body or the rest of the app is going to basically be a table

150
00:14:06,640 --> 00:14:10,130
view that's very image driven image heavy.

151
00:14:10,210 --> 00:14:18,490
And as you're scrolling through especially with dynamic text you want to make sure that no colors are

152
00:14:18,490 --> 00:14:22,860
going to really clash with the static assets that you have in your app right.

153
00:14:22,870 --> 00:14:28,120
So thing but what I mean by static is things that are going to stay like the navigation bar or you know

154
00:14:28,120 --> 00:14:30,120
like a button.

155
00:14:30,640 --> 00:14:33,440
Right that's going to be overlaid on it.

156
00:14:33,760 --> 00:14:41,890
And so for example if this was another bold color we'd have to worry about our dynamic assets maybe

157
00:14:41,920 --> 00:14:44,980
you know some images that we're grabbing from a server.

158
00:14:45,310 --> 00:14:46,920
Clashing with that.

159
00:14:46,930 --> 00:14:56,770
So my advice is that if you have a lot of dynamic assets especially images that could be a variety of

160
00:14:56,780 --> 00:15:01,960
colors you know grays are great black and white.

161
00:15:01,960 --> 00:15:03,800
Basically anything in between.

162
00:15:03,940 --> 00:15:13,150
You know do a really good job at keeping things looking nice clean and modern but also give your dynamic

163
00:15:13,150 --> 00:15:15,190
assets room to shine.

164
00:15:15,190 --> 00:15:22,060
So that is pretty much those two things I wanted to point out.

165
00:15:22,960 --> 00:15:26,480
So yeah we'll go ahead and move on.

166
00:15:26,890 --> 00:15:32,410
We are going to go up here to the top left and we're going to insert another shape and this is going

167
00:15:32,410 --> 00:15:41,690
to be the placeholder for our essentially the first cell in the table view.

168
00:15:41,770 --> 00:15:49,300
So we're going to go ahead and insert a rectangle around a left click and drag from right below the

169
00:15:49,900 --> 00:16:00,920
navigation rectangle and we're going to go down around 175 175 points.

170
00:16:00,970 --> 00:16:11,380
Now you notice I didn't quite get 175 but don't worry right over here in the on the right hand side

171
00:16:11,680 --> 00:16:12,690
we can go ahead and change.

172
00:16:12,700 --> 00:16:21,430
We can just hit you know delete 175 and we now have the dimensions that we wanted one thing to know

173
00:16:22,170 --> 00:16:28,420
is that we have this little walk icon here and what that's going to do is when it is engaged when it's

174
00:16:28,420 --> 00:16:36,550
locked it is going to keep all of the dimensions proportionate meaning if I decrease the height it is

175
00:16:36,640 --> 00:16:40,070
also going to decrease the width to keep things aspect ratio.

176
00:16:40,090 --> 00:16:52,260
So as I started decreasing it is you know adjusting accordingly to keep the proportions.

177
00:16:52,670 --> 00:17:01,630
So we'll leave this unlocked for now and let's go ahead and take off the borders and since this is just

178
00:17:01,630 --> 00:17:06,430
a placeholder tax let's go ahead and just have fun.

179
00:17:06,430 --> 00:17:10,960
I want to make this all black all black because we're going to be putting stuff over it.

180
00:17:10,960 --> 00:17:13,200
And I want to be able to see it flow.

181
00:17:13,210 --> 00:17:14,260
So.

182
00:17:14,910 --> 00:17:15,720
So that's good.

183
00:17:15,730 --> 00:17:23,920
Let's go up here again and click insert text and I'll put this right in the middle and in all caps go

184
00:17:23,920 --> 00:17:31,950
ahead and think of maybe a creative article title that we can use will do.

185
00:17:32,050 --> 00:17:36,550
Maybe Apple releases new MacBook

186
00:17:41,770 --> 00:17:42,590
OK.

187
00:17:42,840 --> 00:17:46,220
So just roughly throw it in the center doesn't need to be perfect.

188
00:17:46,380 --> 00:17:53,310
So are you going to do is select this text and you're going to hold down shift and also select the rectangle

189
00:17:53,400 --> 00:17:54,690
behind it.

190
00:17:54,990 --> 00:18:03,600
And what we are going to do is center this text in this rectangle and we're going to do that by clicking

191
00:18:03,600 --> 00:18:05,060
this little icon right here.

192
00:18:05,070 --> 00:18:07,200
It's a line vertically.

193
00:18:07,200 --> 00:18:14,790
And basically what this does is it takes all of the selected elements and snaps them vertically like

194
00:18:14,790 --> 00:18:17,600
the like the icon is shown here.

195
00:18:17,880 --> 00:18:19,470
And we're going to be using these a lot.

196
00:18:19,470 --> 00:18:24,770
You know there's a line from the bottom from the top left to right.

197
00:18:25,050 --> 00:18:27,030
Horizontally We'll get to these in a little bit.

198
00:18:27,050 --> 00:18:38,340
But if you click it you'll notice the snaps directly into the center of the of the rectangle.

199
00:18:38,340 --> 00:18:42,160
And you know what made me say this rectangle popped out.

200
00:18:42,180 --> 00:18:48,270
It shouldn't be in the navigation bar or navigation bar should be only have the rectangle and the text

201
00:18:48,270 --> 00:18:49,510
in it.

202
00:18:49,610 --> 00:19:04,020
So we're going to go ahead and rename this image cell one just so we know and this is looking good.

203
00:19:04,020 --> 00:19:09,350
So now there's two elements that I want to add to this cell.

204
00:19:09,630 --> 00:19:13,340
Before we move on we're going to go ahead and insert another text.

205
00:19:15,350 --> 00:19:20,390
And let's go ahead and type in the date.

206
00:19:20,420 --> 00:19:27,850
So say 10 26 2016 almost Halloween.

207
00:19:28,550 --> 00:19:36,000
And again we're going to want to speak with our attacks and the date isn't as significant as the title

208
00:19:36,000 --> 00:19:38,040
so we're going to make it a little smaller.

209
00:19:41,210 --> 00:19:45,580
Size 15 is good and I'm going to make it.

210
00:19:45,590 --> 00:19:46,330
Oh Troy.

211
00:19:46,390 --> 00:19:49,660
Going to see what that looks like it might be a little.

212
00:19:50,470 --> 00:19:50,900
You know what.

213
00:19:50,900 --> 00:19:52,160
It is a little too light.

214
00:19:52,160 --> 00:19:55,970
Let's go ahead and make it regular.

215
00:19:55,970 --> 00:19:56,660
There we go.

216
00:19:59,040 --> 00:19:59,790
Are right.

217
00:19:59,790 --> 00:20:15,150
So we have our day and let's go ahead and insert one more text and I am going to write a mock comment.

218
00:20:17,010 --> 00:20:17,490
Area.

219
00:20:17,490 --> 00:20:21,690
So cynosure scrolling through all of this those are going to look like this.

220
00:20:21,690 --> 00:20:27,960
And you'll quickly see the title.

221
00:20:27,960 --> 00:20:34,480
You know I might catch your eye and then how many Kommissar are and the date that it was posted.

222
00:20:34,890 --> 00:20:37,320
And there's a couple of things that we can do.

223
00:20:37,320 --> 00:20:46,340
So these elements are obviously secondary to the title and we could either stack them like so you know

224
00:20:46,350 --> 00:20:47,470
that doesn't look too bad actually.

225
00:20:47,490 --> 00:20:49,540
It looks really nice.

226
00:20:49,770 --> 00:20:54,940
We can kind of drag them out into the corners.

227
00:20:54,960 --> 00:21:00,260
The only thing that I don't like about this and you might want to be wary when you're building your

228
00:21:00,260 --> 00:21:03,450
own ABSs this tax is actually dynamic as well right.

229
00:21:03,450 --> 00:21:10,520
So let's just say we had a title that was just said MacBook right now this looks pretty good.

230
00:21:10,620 --> 00:21:18,540
I'd say it doesn't look bad but it's something that we want to keep in mind.

231
00:21:18,540 --> 00:21:26,460
Is there a better solution since our titles are going to be stemming from the center and then moving

232
00:21:26,460 --> 00:21:27,200
outward.

233
00:21:27,390 --> 00:21:29,880
Maybe we should do the same thing with these two.

234
00:21:30,030 --> 00:21:37,620
So I am going to insert a shape insert a line.

235
00:21:37,620 --> 00:21:42,960
I'm going to try to make it right in the center right here and I'm holding down shift as well.

236
00:21:42,970 --> 00:21:44,970
But keep it if you know as you're holding on.

237
00:21:44,980 --> 00:21:50,740
Sure it's going to snap it to a 45 degree angle so to make sure it's a straight line down the middle.

238
00:21:52,640 --> 00:22:00,860
And I'm going to turn the thickness up to maybe two two is good and I'm going to change the color a

239
00:22:00,860 --> 00:22:04,500
pure white.

240
00:22:04,620 --> 00:22:13,250
And so as you can see it's kind of snapping to the rectangles center we could also just to make sure

241
00:22:13,270 --> 00:22:21,090
we can select it as well and a wider horizontally and then I'm going to take my comment and bring it

242
00:22:21,090 --> 00:22:27,310
in just a little bit and bring this in.

243
00:22:27,310 --> 00:22:29,050
Same with the date.

244
00:22:29,610 --> 00:22:36,210
And I'm going to zoom in with command plus and just to make sure as you can see if I'm using the arrow

245
00:22:36,210 --> 00:22:45,970
keys now but with the comments selected you can see how far apart the comments are.

246
00:22:45,970 --> 00:22:50,580
So I'm going to make them twelve point five.

247
00:22:50,760 --> 00:22:55,970
It doesn't need to be twelve point five on your end just as long as you have the number in mind.

248
00:22:56,100 --> 00:23:02,400
And I'm also going to make sure that the this is left line because if we go in and edit these we want

249
00:23:02,400 --> 00:23:04,760
them to expand outwards.

250
00:23:05,310 --> 00:23:15,040
And now I'm going to go to my day and give it the same same distance to twelve point five away from

251
00:23:15,040 --> 00:23:21,550
this this little little line that we just made and also making sure that this is this is right a line.

252
00:23:21,550 --> 00:23:26,320
So if we went to edit it it would shoot out to the left.

253
00:23:26,320 --> 00:23:35,310
Now I'm going to take all three of these elements so make sure they're all selected and I am going to

254
00:23:35,790 --> 00:23:48,240
align them vertically just to make sure that they are all correctly aligned and pixel perfect.

255
00:23:48,740 --> 00:23:51,830
So now you know what I'm going to do as well just to experiment.

256
00:23:51,830 --> 00:23:53,200
I'm going to make this a little smaller.

257
00:23:53,200 --> 00:23:56,100
I'm going to make this maybe 13.

258
00:23:56,180 --> 00:23:59,850
Both of these both of these 13.

259
00:23:59,890 --> 00:24:01,310
That looks a little better.

260
00:24:05,510 --> 00:24:12,760
And with all of these selected again holding down shift I'm going to command you to group them.

261
00:24:14,120 --> 00:24:19,150
And we'll call this so details

262
00:24:22,200 --> 00:24:23,630
this is the title.

263
00:24:24,040 --> 00:24:31,450
And so now with the cell details holding on shift clicking the title and the image cell we can go ahead

264
00:24:31,480 --> 00:24:39,170
and throw all of these into it's own group and title it sell one.

265
00:24:39,510 --> 00:24:49,110
Right so just to recap what we did here is we made sure that these had an equal distance apart from

266
00:24:49,440 --> 00:24:57,630
this line that we created which we had a wind horizontally in the entire cell that was what.

267
00:24:57,690 --> 00:25:05,580
And we made sure that this was had a left alignment and this had a right alignment so that if we went

268
00:25:05,580 --> 00:25:09,670
to go back and change it it would expand outwards.

269
00:25:09,690 --> 00:25:16,920
And similarly with the date awesome So now things are looking really really clean.

270
00:25:16,970 --> 00:25:22,620
We have our cell one and group together.

271
00:25:23,090 --> 00:25:31,880
Now what we're going to do is if you hold down option and left click on your cell one and you drag.

272
00:25:31,880 --> 00:25:34,240
It's actually going to create a copy of it.

273
00:25:34,700 --> 00:25:39,500
And so you can drag until it snaps to the bottom of the first cell.

274
00:25:39,640 --> 00:25:41,810
And let's just go ahead and rename this cell to

275
00:25:45,000 --> 00:25:53,890
our right now all we can do is go in and change all of these to something you know a little more little

276
00:25:53,890 --> 00:25:59,110
more interesting you know instead of having eight or ten Apple releases a new Mac book.

277
00:25:59,360 --> 00:26:03,100
Let's do I don't know.

278
00:26:03,190 --> 00:26:12,040
Company X sells for 1 million.

279
00:26:12,280 --> 00:26:16,090
That's fine and this could have you know six comments.

280
00:26:16,150 --> 00:26:16,600
I don't know.

281
00:26:16,630 --> 00:26:25,890
Not too many people are not as many people are excited about Company X than Apple.

282
00:26:26,060 --> 00:26:26,880
All right.

283
00:26:27,460 --> 00:26:33,140
So we're going to go ahead and do this all the way down for every single cell that we're going to have

284
00:26:33,140 --> 00:26:42,830
showing so make sure that cell to a selected run all down option click and drag and analysts do it one

285
00:26:42,830 --> 00:26:46,960
more time just so it can cap off its tail and right click and drag.

286
00:26:47,660 --> 00:26:58,880
Let's go rename this cell three and this one is the cell for.

287
00:26:59,470 --> 00:27:03,400
Now what's really cool is we could then take all of these so highly.

288
00:27:03,410 --> 00:27:11,280
All of these and put that in its own group and call it Table View.

289
00:27:11,500 --> 00:27:13,710
So I know this doesn't look all that great right now.

290
00:27:13,720 --> 00:27:20,450
It looks like we just basically made a huge giant black square or rectangle and slap some text on it

291
00:27:20,500 --> 00:27:23,170
but I promise you it will look better.

292
00:27:23,170 --> 00:27:29,970
So now we're going to do is put some images behind it.

293
00:27:30,040 --> 00:27:38,590
I grabbed four images off the internet that is going to loosely correlate with the title and what you're

294
00:27:38,590 --> 00:27:47,240
going to want to do whenever you're filling in images or you know creating mock mock images like let's

295
00:27:47,240 --> 00:27:54,700
just say you have a user profile and you want to fill it in with you know maybe some headshots you found

296
00:27:54,700 --> 00:27:56,230
on Google.

297
00:27:56,230 --> 00:28:06,250
I always strive to find the best pictures and find the best images that is going to fully enhance the

298
00:28:07,390 --> 00:28:09,960
personality and the UI or the app.

299
00:28:10,090 --> 00:28:16,300
And for a couple of reasons the first one is if I'm handing this off to a developer I want them to see

300
00:28:16,300 --> 00:28:17,000
the vision.

301
00:28:17,020 --> 00:28:17,720
Right.

302
00:28:17,720 --> 00:28:23,400
I don't feel like I could easily hand this to you and I was developer and say like.

303
00:28:23,410 --> 00:28:27,610
All right so I mean you kind of get it right but there is I know this is black space but there's going

304
00:28:27,610 --> 00:28:29,940
to be images back here right.

305
00:28:29,950 --> 00:28:31,090
Some people might get it.

306
00:28:31,090 --> 00:28:34,300
Some people might see the vision and say this is perfect.

307
00:28:34,300 --> 00:28:34,830
I get it.

308
00:28:34,850 --> 00:28:35,950
This is awesome.

309
00:28:35,950 --> 00:28:37,070
And some people won't.

310
00:28:37,120 --> 00:28:38,950
And that's just the reality.

311
00:28:39,460 --> 00:28:45,160
And so especially if you're designing for a client and you're going there are going to be handing this

312
00:28:45,160 --> 00:28:46,760
off to a developer.

313
00:28:46,870 --> 00:28:54,310
You always want to make everything as concrete as possible you know use the best images you can find

314
00:28:56,200 --> 00:29:03,700
and try to simulate it as if it was an actual live app try to get as close to that as you can because

315
00:29:03,800 --> 00:29:10,870
it'll work out really well in the long run you know if you're doing it for a client but also I've noticed

316
00:29:10,870 --> 00:29:19,090
that a lot of people don't go down this path whether they're lazy or you know they don't see any value

317
00:29:19,090 --> 00:29:20,080
in it.

318
00:29:20,220 --> 00:29:27,490
But come to find out sometimes if you actually start plugging in things that you might use or you might

319
00:29:27,490 --> 00:29:35,110
see in an app you may run into even better ways to present data and present information and images so

320
00:29:35,410 --> 00:29:40,630
highly encourage you to go the full nine yards when you're designing.

321
00:29:40,630 --> 00:29:45,820
Some people you know are I said are not going to see the value in it right off the bat but it's definitely

322
00:29:45,820 --> 00:29:48,330
100 percent worth it.

323
00:29:48,940 --> 00:29:56,800
So go ahead and find four images that are loosely tied to your titles and what we're going to do is

324
00:29:56,800 --> 00:29:58,690
click the image sell.

325
00:29:59,470 --> 00:30:05,440
So drill down into your groups and so you find the image sell and click fill.

326
00:30:05,560 --> 00:30:05,850
Right.

327
00:30:05,860 --> 00:30:14,320
And instead of this black we are going to click this little photos icon under the pattern fill and we're

328
00:30:14,320 --> 00:30:17,290
going to choose image and I have mine saved to my desktop somewhere.

329
00:30:17,290 --> 00:30:25,450
So I mean and grab it and there's the MacBook Pro right.

330
00:30:25,490 --> 00:30:28,000
And let's go ahead and we'll leave it on Phil..

331
00:30:28,040 --> 00:30:32,710
You can play around with these later because they're definitely worth looking at.

332
00:30:32,900 --> 00:30:40,530
Fit will keep the image you have aspect ratio and they're just going to be a white space around like

333
00:30:40,550 --> 00:30:45,680
as you get here at here stretch is going to make sure that all the corners are filled.

334
00:30:45,680 --> 00:30:57,010
But now our Mac Pro is is you gained some gain some with and tile is basically going to talk to them

335
00:30:57,020 --> 00:31:05,470
across so we're going to stick with Phil and I think there's some people Pardhan outside.

336
00:31:05,970 --> 00:31:14,130
We're going to stick with Phil and as you may notice some parts of it are too light for our techs to

337
00:31:14,130 --> 00:31:15,020
see through.

338
00:31:15,060 --> 00:31:23,180
So we are going to decrease the capacity to let the black background show.

339
00:31:23,250 --> 00:31:32,970
Oh you know what actually here's what it says so if we go to our site or our board and click background

340
00:31:32,970 --> 00:31:37,860
color it's going to check off including export.

341
00:31:37,860 --> 00:31:40,200
We're going to want that as well.

342
00:31:40,200 --> 00:31:40,690
Click here.

343
00:31:40,700 --> 00:31:50,090
And let's bring make this black and basically what this does is OUR out our board of board our art board

344
00:31:50,100 --> 00:31:51,750
excuse me.

345
00:31:51,990 --> 00:31:55,310
When we created it is transparent.

346
00:31:55,380 --> 00:32:00,210
Right so every asset that we throw on top of it if we were to export it out it's not going to export

347
00:32:00,240 --> 00:32:01,230
a white background.

348
00:32:01,230 --> 00:32:04,260
It's going to export a transparent background.

349
00:32:04,260 --> 00:32:13,680
And that's why when we selected background color we included it in the export because if we didn't we

350
00:32:13,680 --> 00:32:16,990
would only see it here but we wouldn't see it when we export their design.

351
00:32:16,990 --> 00:32:26,040
So now that our background is black and we decreased the opacity of this image.

352
00:32:26,910 --> 00:32:32,650
Now our our white white Texas trying to show through and it's looking really good.

353
00:32:32,700 --> 00:32:37,920
So you know you can increase or decrease the taste.

354
00:32:37,950 --> 00:32:43,510
I for this project I want to keep it around 65 and that looks really good.

355
00:32:43,620 --> 00:32:52,510
And then you can go ahead and do the same for the rest of the images so fill them in to find.

356
00:32:52,560 --> 00:33:01,370
I saved an image that reminded me of something like a Company X that might sell that wasn't that wasn't

357
00:33:01,370 --> 00:33:08,740
it but it looks like they're doing the deal and would decrease the capacity to 65.

358
00:33:08,850 --> 00:33:14,190
You can either use the slider or type in a number if you know it

359
00:33:17,010 --> 00:33:18,080
in this one.

360
00:33:18,110 --> 00:33:20,310
We're also going to have to change the title on this too.

361
00:33:20,320 --> 00:33:22,490
But let's throw an image on your first

362
00:33:28,630 --> 00:33:32,510
office.

363
00:33:32,590 --> 00:33:35,130
Bring this down to 65.

364
00:33:35,650 --> 00:33:38,970
And again we don't want to be lazy.

365
00:33:39,070 --> 00:33:43,830
We want to be full and thorough So even though there's no text here.

366
00:33:44,170 --> 00:33:51,350
We're going to throw an image in here just to simulate an actual app have a skyscraper.

367
00:33:53,470 --> 00:34:02,170
So here is one really really good benefit of filling things out and we wouldn't have caught this if

368
00:34:02,170 --> 00:34:03,640
we hadn't done this.

369
00:34:03,850 --> 00:34:09,260
But basically I almost feel like it is a little too busy with the opacity being 65.

370
00:34:09,310 --> 00:34:17,200
Maybe we need to bring it down even more to have you know the everything stand out in its own little

371
00:34:17,200 --> 00:34:18,530
block.

372
00:34:18,610 --> 00:34:22,440
So I'm going to bring it down to 30 and then maybe we can work our way up from there.

373
00:34:23,620 --> 00:34:25,660
That I think 30 might do the trick.

374
00:34:33,750 --> 00:34:35,140
Now I wasn't even.

375
00:34:35,460 --> 00:34:41,280
It was an even adjusted so that is looking a whole lot better.

376
00:34:41,420 --> 00:34:47,750
Let's also you know do this one company

377
00:34:50,270 --> 00:34:53,410
Y raises 65 million

378
00:34:56,680 --> 00:34:57,840
and they should be on the same day.

379
00:34:57,850 --> 00:34:59,000
That's fine.

380
00:35:01,350 --> 00:35:01,930
OK.

381
00:35:02,090 --> 00:35:02,720
So

382
00:35:05,380 --> 00:35:11,830
you know like I said before if if we hadn't actually gone through this exercise of putting images in

383
00:35:12,010 --> 00:35:20,080
to into our placeholders we might tell a developer or even do it ourselves say you know what just leave

384
00:35:20,080 --> 00:35:22,270
the opacity sixty five is fine.

385
00:35:22,270 --> 00:35:31,180
Or you know this should work but we we wouldn't have really seen what it looked like and you know as

386
00:35:31,180 --> 00:35:39,670
you and funny funnier is the more that I'm looking at this the more I'm realizing that this this line

387
00:35:39,770 --> 00:35:49,030
are not line of where the images break off are actually kind of visually cluttered with the date and

388
00:35:49,030 --> 00:35:52,300
the comments of the previous cell.

389
00:35:52,330 --> 00:35:52,530
Right.

390
00:35:52,530 --> 00:35:57,160
Like if we're scrolling down I don't know if these comments and the state is with this one or this one

391
00:35:57,190 --> 00:36:03,600
and things these assets need to be fully readable from a glance.

392
00:36:03,610 --> 00:36:09,210
So what I'm going to do is I'm just going to move this up and drag this up all the way

393
00:36:13,600 --> 00:36:15,780
and do the same thing for this one.

394
00:36:15,910 --> 00:36:23,950
Drag it straight up.

395
00:36:24,020 --> 00:36:24,770
That's it.

396
00:36:24,770 --> 00:36:25,640
Third one.

397
00:36:26,390 --> 00:36:27,490
All right.

398
00:36:30,120 --> 00:36:30,610
Wow.

399
00:36:30,660 --> 00:36:34,060
That looks so much better.

400
00:36:34,140 --> 00:36:40,330
That looks a whole lot better see now things are sectioned off.

401
00:36:40,500 --> 00:36:47,050
We still have you know these these techs coming out from the center.

402
00:36:47,190 --> 00:36:49,410
Both of them the title and the comment.

403
00:36:49,410 --> 00:36:51,560
The common area.

404
00:36:51,720 --> 00:36:55,080
It's looking really really good.

405
00:36:55,080 --> 00:37:01,500
And you know like I said before if we had just designed this with the placeholders we wouldn't have

406
00:37:01,500 --> 00:37:05,450
known how this was going to show up once the three images in here.

407
00:37:05,460 --> 00:37:08,070
And once we did we decided to adjust.

408
00:37:08,160 --> 00:37:15,400
So just to recap you know go the full nine yards when you're when you're building your screens out.

409
00:37:15,660 --> 00:37:19,110
And yeah this is this is a really great first app guys.