1
00:00:00,000 --> 00:00:02,000
[?music?]

2
00:00:02,000 --> 00:00:06,000
[Master Class Designer and Developer Workflow: Second Sprint Content]

3
00:00:06,000 --> 00:00:09,000
[Nick Pettit] And now, it's time to bring in some of the information 

4
00:00:09,000 --> 00:00:11,000
that's on the Jobs model,

5
00:00:11,000 --> 00:00:15,000
so let's go ahead and flip back to our wireframe and take a second look.

6
00:00:15,000 --> 00:00:20,000
So as you can see, we have the job title, 

7
00:00:20,000 --> 00:00:24,000
we have the name of the company that posted the job, 

8
00:00:24,000 --> 00:00:31,000
we have a job description, and we also have a See More link down here at the bottom.

9
00:00:31,000 --> 00:00:37,000
Originally, I designed this as a button, and I may keep that,

10
00:00:37,000 --> 00:00:40,000
but I may actually end up changing that to a link 

11
00:00:40,000 --> 00:00:43,000
just because we're going for more of a paper look now

12
00:00:43,000 --> 00:00:46,000
and a button might look strange.

13
00:00:46,000 --> 00:00:51,000
But we may just keep a button; we'll see how it looks.

14
00:00:51,000 --> 00:00:55,000
In addition to that, we also have a Posted On date

15
00:00:55,000 --> 00:00:57,000
and right now, we have it down here in the bottom, 

16
00:00:57,000 --> 00:01:00,000
but may actually end up putting it up here at the top

17
00:01:00,000 --> 00:01:04,000
just because we have a little bit more space than we had counted for here

18
00:01:04,000 --> 00:01:06,000
in our wireframe. 

19
00:01:06,000 --> 00:01:11,000
So let's go ahead and switch back to Photoshop 

20
00:01:11,000 --> 00:01:17,000
and let's go ahead and add in some text for our job title.

21
00:01:17,000 --> 00:01:29,000
So this job is going to be Ice Cream Tester

22
00:01:29,000 --> 00:01:32,000
and we can go ahead and decrease this font size

23
00:01:32,000 --> 00:01:36,000
because I'm sure that there will be job titles that are longer than that

24
00:01:36,000 --> 00:01:39,000
and right now, our font size is just as large as our logo

25
00:01:39,000 --> 00:01:42,000
and we probably don't want that. 

26
00:01:42,000 --> 00:01:46,000
So we'll go ahead and play with this a little bit;

27
00:01:46,000 --> 00:01:53,000
maybe make it a little bit larger here.

28
00:01:53,000 --> 00:01:56,000
I think that looks pretty good.

29
00:01:56,000 --> 00:01:59,000
Let's go ahead turn on our grid

30
00:01:59,000 --> 00:02:04,000
and it looks like we're one column in and just a couple of lines down here.

31
00:02:04,000 --> 00:02:13,000
I think that's a pretty good spot for our text.

32
00:02:13,000 --> 00:02:15,000
And below that, we want to put a company name,

33
00:02:15,000 --> 00:02:18,000
so let's go ahead and add that in.

34
00:02:18,000 --> 00:02:28,000
I believe this job came from Ice Cream Industries

35
00:02:28,000 --> 00:02:32,000
and the name of the company isn't quite as important as the actual job, 

36
00:02:32,000 --> 00:02:41,000
so let's go ahead and adjust the color on that first.

37
00:02:41,000 --> 00:02:46,000
We actually need to go into the Character palette there.

38
00:02:46,000 --> 00:02:51,000
So we'll make this more of a dark gray color

39
00:02:51,000 --> 00:02:55,000
rather than the full-on black that we have there,

40
00:02:55,000 --> 00:03:01,000
and then, in addition, we'll go ahead and decrease the font size.

41
00:03:01,000 --> 00:03:06,000
So we'll maybe put it about there, 

42
00:03:06,000 --> 00:03:13,000
and we want this to be right underneath the job title

43
00:03:13,000 --> 00:03:16,000
and it is aligned to the left.

44
00:03:16,000 --> 00:03:19,000
That's what we want.

45
00:03:19,000 --> 00:03:23,000
And if we go ahead and zoom out, I think that looks pretty good.

46
00:03:23,000 --> 00:03:26,000
We'll go ahead and move that down a bit more.

47
00:03:26,000 --> 00:03:30,000
So now, let's go ahead and add in a description,

48
00:03:30,000 --> 00:03:40,000
and we'll say "This is a job tasting ice cream all day."

49
00:03:40,000 --> 00:03:43,000
That looks good. 

50
00:03:43,000 --> 00:03:46,000
And now we're going to go up to the Layer menu and say Type,

51
00:03:46,000 --> 00:03:52,000
and we'll say Convert to Paragraph Text, and what that's going to do

52
00:03:52,000 --> 00:03:56,000
is just convert this text into the form of a paragraph 

53
00:03:56,000 --> 00:04:03,000
so that we can more easily adjust the amount of space that the text takes up.

54
00:04:03,000 --> 00:04:07,000
So let's go ahead and turn on our guides

55
00:04:07,000 --> 00:04:21,000
and let's see if we can line this up with the grid really nicely.

56
00:04:21,000 --> 00:04:24,000
That looks pretty good.

57
00:04:24,000 --> 00:04:30,000
Remember, we're going one column in from the edge of this piece of paper

58
00:04:30,000 --> 00:04:34,000
and we want to give a pretty good amount of space for a description.

59
00:04:34,000 --> 00:04:38,000
And of course, this could expand further down, 

60
00:04:38,000 --> 00:04:42,000
and it's just going to push the other page elements further down the page.

61
00:04:42,000 --> 00:04:47,000
And we want to decrease this font size because it's pretty large right now,

62
00:04:47,000 --> 00:04:51,000
so let's go ahead and switch over to the Character palette

63
00:04:51,000 --> 00:04:53,000
and we'll adjust the font size.

64
00:04:53,000 --> 00:04:56,000
And again, this is a really nice thing about creating paragraph text

65
00:04:56,000 --> 00:04:59,000
because as we adjust the font size,

66
00:04:59,000 --> 00:05:04,000
the paragraph is still going to take up the same amount of space.

67
00:05:04,000 --> 00:05:13,000
So let's go ahead and get some additional test data in there

68
00:05:13,000 --> 00:05:17,000
so we'll copy and paste what we have,

69
00:05:17,000 --> 00:05:25,000
and we'll just paste it a few times there.

70
00:05:25,000 --> 00:05:28,000
That looks pretty good. 

71
00:05:28,000 --> 00:05:38,000
And now, we can turn off our guides and it's really just a matter of adjusting the font size.

72
00:05:38,000 --> 00:05:42,000
So we don't want this font to be too terribly large.

73
00:05:42,000 --> 00:05:45,000
I think that looks pretty good. 

74
00:05:45,000 --> 00:05:49,000
Remember, this is just normal paragraph text and it's not really a header

75
00:05:49,000 --> 00:05:53,000
like our logo or the job title or the name of the company,

76
00:05:53,000 --> 00:05:56,000
so I think that's a good size. 

77
00:05:56,000 --> 00:06:01,000
And I do want this text to be a dark color

78
00:06:01,000 --> 00:06:05,000
just because it is smaller text.

79
00:06:05,000 --> 00:06:09,000
So now I'm going to go ahead and create a link down here

80
00:06:09,000 --> 00:06:20,000
and this link will say Read More About This Job.

81
00:06:20,000 --> 00:06:28,000
And we'll change this link to just a very classic blue color

82
00:06:28,000 --> 00:06:30,000
to indicate that it's a link,

83
00:06:30,000 --> 00:06:34,000
and we haven't really used blue anywhere else on the site yet 

84
00:06:34,000 --> 00:06:38,000
so that's a perfectly good color to use for links.

85
00:06:38,000 --> 00:06:45,000
Go ahead and make sure that is aligned with the left side of the page,

86
00:06:45,000 --> 00:06:49,000
and just to make it stand out a little bit more, 

87
00:06:49,000 --> 00:06:53,000
we can maybe put that in bold text. 

88
00:06:53,000 --> 00:07:02,000
And I think that the tracking for this text is a little bit too tight considering its size,

89
00:07:02,000 --> 00:07:06,000
but I do want to bring it in a little bit because I think this font 

90
00:07:06,000 --> 00:07:13,000
just has way too much tracking built in by default.

91
00:07:13,000 --> 00:07:17,000
So maybe about 30 is what we want,

92
00:07:17,000 --> 00:07:22,000
and I actually want to do the same thing for this paragraph text

93
00:07:22,000 --> 00:07:25,000
that we have up above.

94
00:07:25,000 --> 00:07:30,000
Just adjust the tracking a little bit

95
00:07:30,000 --> 00:07:34,000
and we should really put in some more leading or line height

96
00:07:34,000 --> 00:07:37,000
in paragraph text like this,

97
00:07:37,000 --> 00:07:44,000
so we'll go ahead and adjust this manually.

98
00:07:44,000 --> 00:07:47,000
That looks a lot nicer, as though it's a typed letter.

99
00:07:47,000 --> 00:07:51,000
It's a little bit too much for the web.

100
00:07:51,000 --> 00:07:53,000
I think that looks good.

101
00:07:53,000 --> 00:07:58,000
And now, we can go ahead and move that link further down,

102
00:07:58,000 --> 00:08:03,000
so we'll go ahead and move that down the page

103
00:08:03,000 --> 00:08:07,000
and let's just see what it looks like when we increase the font size on that link.

104
00:08:07,000 --> 00:08:11,000
I think that looks pretty good when it's a little bit larger than the paragraph text like that,

105
00:08:11,000 --> 00:08:14,000
so let's go ahead and stick with that.

106
00:08:14,000 --> 00:08:18,000
So now, we need to just adjust spacing a little bit more here

107
00:08:18,000 --> 00:08:20,000
and fine-tune a few things,

108
00:08:20,000 --> 00:08:23,000
and I think that looks pretty good.

109
00:08:23,000 --> 00:08:28,000
Now, we need to add in the Date Posted for this job,

110
00:08:28,000 --> 00:08:33,000
and I want to have that up here on the right side,

111
00:08:33,000 --> 00:08:37,000
but I also want to sort of reserve this space over here 

112
00:08:37,000 --> 00:08:41,000
should we ever decide to use this paperclip for sidebar information 

113
00:08:41,000 --> 00:08:44,000
or maybe even updates to this job. 

114
00:08:44,000 --> 00:08:49,000
So for the date, I want to stick with the theme that we've established so far, 

115
00:08:49,000 --> 00:08:51,000
and I want to sort of create a stamp here.

116
00:08:51,000 --> 00:08:59,000
So let's go ahead and say POSTED ON, and we'll use all caps

117
00:08:59,000 --> 00:09:03,000
just because it's a stamp

118
00:09:03,000 --> 00:09:15,000
and we'll say that this job was posted on just some arbitrary date.

119
00:09:15,000 --> 00:09:17,000
That looks good. 

120
00:09:17,000 --> 00:09:20,000
Now, let's go ahead and adjust this text.

121
00:09:20,000 --> 00:09:28,000
So first, I'm actually going to go ahead and remove these spaces. 

122
00:09:28,000 --> 00:09:30,000
That looks good. 

123
00:09:30,000 --> 00:09:40,000
And now, let's go ahead and change this to a nice red stamp color,

124
00:09:40,000 --> 00:09:44,000
and we'll make it a little bit darker 

125
00:09:44,000 --> 00:09:55,000
and we'll go ahead and center the text so that the POSTED ON is centered with the date.

126
00:09:55,000 --> 00:09:59,000
And let's make this larger 

127
00:09:59,000 --> 00:10:07,000
and we'll go ahead and decrease the leading here so that it's nice and tight.

128
00:10:07,000 --> 00:10:14,000
Let's decrease the kerning as well. 

129
00:10:14,000 --> 00:10:15,000
There we go. 

130
00:10:15,000 --> 00:10:21,000
Maybe adjust that a little more. That looks good. 

131
00:10:21,000 --> 00:10:33,000
And now, we can go ahead and tilt that a little bit, just like that.

132
00:10:33,000 --> 00:10:39,000
And for now, I think that comes across pretty well. 

133
00:10:39,000 --> 00:10:44,000
It looks like a stamp; especially since it's offset and in sort of a red color. 

134
00:10:44,000 --> 00:10:47,000
We could maybe even adjust the opacity a little bit

135
00:10:47,000 --> 00:10:55,000
and maybe dial it down to 90, or maybe even lower;

136
00:10:55,000 --> 00:11:01,000
something like 80 percent or 85 percent.

137
00:11:01,000 --> 00:11:03,000
That looks pretty good. 

138
00:11:03,000 --> 00:11:08,000
And although it doesn't look like it's perfectly blended or stamped onto the page,

139
00:11:08,000 --> 00:11:12,000
I think we have enough visual cues there to give the right impression. 

140
00:11:12,000 --> 00:11:16,000
And remember, we can always adjust things like this in future iterations. 

141
00:11:16,000 --> 00:11:24,000
So I like the way that looks, and I'm just going to adjust the positioning here.

142
00:11:24,000 --> 00:11:30,000
I think I'm going to actually keep this a little bit over to the right,

143
00:11:30,000 --> 00:11:35,000
just to give enough space for maybe longer job titles,

144
00:11:35,000 --> 00:11:39,000
but I also want to leave some room over here on the right,

145
00:11:39,000 --> 00:11:42,000
should we ever decide to really use this area. 

146
00:11:42,000 --> 00:11:46,000
So I think that looks pretty good. 

147
00:11:46,000 --> 00:11:52,000
Now, Jim did mention that he wanted to add image uploading to the Jobs model

148
00:11:52,000 --> 00:11:58,000
so that companies could post pictures for their jobs or perhaps post company logos,

149
00:11:58,000 --> 00:12:03,000
but he may or may not get to that feature, so let's just worry about that

150
00:12:03,000 --> 00:12:07,000
in a future iteration and go with what we have right now.

151
00:12:07,000 --> 00:12:13,000
Now, to wrap this up, we should go ahead and leave a little bit of space up here

152
00:12:13,000 --> 00:12:17,000
for some sort of login and logout system.

153
00:12:17,000 --> 00:12:21,000
Jim is still working on that, so we don't actually know what that's going to look like

154
00:12:21,000 --> 00:12:25,000
just yet, but we can go ahead and at least design some sort of text

155
00:12:25,000 --> 00:12:28,000
or space for it. 

156
00:12:28,000 --> 00:12:33,000
So to do that, we'll keep this really simple

157
00:12:33,000 --> 00:12:41,000
and we'll create a white background for the whole site.

158
00:12:41,000 --> 00:12:47,000
Actually, let's go ahead and make this color just slightly off-white

159
00:12:47,000 --> 00:12:51,000
to give the site some variation.

160
00:12:51,000 --> 00:13:00,000
That's a little bit too dark. 

161
00:13:00,000 --> 00:13:03,000
I think that looks good.

162
00:13:03,000 --> 00:13:06,000
And now, let's go ahead and add some text in the upper right here 

163
00:13:06,000 --> 00:13:11,000
and we want to make sure that we're using the same color as our blue link

164
00:13:11,000 --> 00:13:15,000
down here at the bottom, so let's go ahead and see what color we used.

165
00:13:15,000 --> 00:13:24,000
We'll go ahead and just copy that hexadecimal color and hold onto it.

166
00:13:24,000 --> 00:13:31,000
And now, let's go ahead and create a new folder here

167
00:13:31,000 --> 00:13:39,000
and we'll keep this very generic and just call it Navigation 

168
00:13:39,000 --> 00:13:42,000
because in addition to some sort of login and logout authentication system,

169
00:13:42,000 --> 00:13:47,000
we may have horizontal navigation here up at the top

170
00:13:47,000 --> 00:13:51,000
but that's, of course, going to be for a future iteration.

171
00:13:51,000 --> 00:13:55,000
So let's just go ahead and type in some text here.

172
00:13:55,000 --> 00:14:01,000
We'll say Sign In and we'll put a pipe |

173
00:14:01,000 --> 00:14:04,000
and we'll say Sign Up.

174
00:14:04,000 --> 00:14:11,000
Actually, just to differentiate these, I'll go ahead and say Log In 

175
00:14:11,000 --> 00:14:14,000
and Sign Up.

176
00:14:14,000 --> 00:14:20,000
So we'll create some space between these

177
00:14:20,000 --> 00:14:29,000
and we'll line them up with our grid and we want this to be aligned to the right

178
00:14:29,000 --> 00:14:38,000
so we'll push those over to the edge of our paper here

179
00:14:38,000 --> 00:14:46,000
and then we'll try to maybe line those up with the logo a little bit.

180
00:14:46,000 --> 00:14:53,000
We'll turn the guides off and I think that looks pretty good.

181
00:14:53,000 --> 00:14:57,000
We'll go ahead and zoom out here and see what we have. 

182
00:14:57,000 --> 00:15:02,000
Up here at the top, we have our logo and we have some basic authentication.

183
00:15:02,000 --> 00:15:11,000
We have a job post with the POSTED ON date, a description, the title, 

184
00:15:11,000 --> 00:15:15,000
the name of the company, and a link to read more about the job.

185
00:15:15,000 --> 00:15:19,000
And although we've only designed the show view here, 

186
00:15:19,000 --> 00:15:25,000
we don't really need to mockup all of the views in full high-definition detail like this.

187
00:15:25,000 --> 00:15:28,000
From the CSS that we create for this particular page, 

188
00:15:28,000 --> 00:15:31,000
we can go ahead and adapt it to the list view

189
00:15:31,000 --> 00:15:33,000
or even to the form view.

190
00:15:33,000 --> 00:15:39,000
Now, we didn't really leave any space over here on the right for supplementary content,

191
00:15:39,000 --> 00:15:44,000
but we do have this paperclip here in case we want to add additional things,

192
00:15:44,000 --> 00:15:48,000
and I think it would be pretty easy to add additional content here.

193
00:15:48,000 --> 00:15:52,000
All we would really need to do is move this text in a little bit,

194
00:15:52,000 --> 00:15:56,000
and that could easily be done on the list view as well.

195
00:15:56,000 --> 00:15:59,000
So I think the design that we have here is pretty good

196
00:15:59,000 --> 00:16:05,000
and I think we're ready to go ahead and meet with Jim.