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 Logo]

3
00:00:06,000 --> 00:00:10,000
[Nick Pettit] In the previous Sprint, we established some basic CSS

4
00:00:10,000 --> 00:00:16,000
just to lay out all of these basic page elements that come with Rails Scaffolding.

5
00:00:16,000 --> 00:00:21,000
Here we have the index view of the Easy Jobs! website

6
00:00:21,000 --> 00:00:26,000
and if we go ahead and click through to one of these, we can get to the show view

7
00:00:26,000 --> 00:00:32,000
and really, this is just to make sure that the website works on a very basic level

8
00:00:32,000 --> 00:00:35,000
and to prototype some of the functionality.

9
00:00:35,000 --> 00:00:38,000
So in general, there will be a list of jobs.

10
00:00:38,000 --> 00:00:42,000
We can click on Edit here and maybe edit a job.

11
00:00:42,000 --> 00:00:47,000
We can go back and create a new job and we see a similar form,

12
00:00:47,000 --> 00:00:52,000
and as I showed you before, we can go ahead and click on one of these

13
00:00:52,000 --> 00:00:54,000
and go to the show view for our job.

14
00:00:54,000 --> 00:01:00,000
However, if we look at some of the mockups that we created previously,

15
00:01:00,000 --> 00:01:04,000
we actually have a few more page elements here that we didn't really address 

16
00:01:04,000 --> 00:01:09,000
and for now, we are going to keep those somewhat vague

17
00:01:09,000 --> 00:01:12,000
so that we have space to add elements later on,

18
00:01:12,000 --> 00:01:15,000
such as elements that might go in a sidebar 

19
00:01:15,000 --> 00:01:19,000
or authentication elements that might go in the upper right-hand corner.

20
00:01:19,000 --> 00:01:24,000
At this phase of the project, we need to create a high-fidelity mockup.

21
00:01:24,000 --> 00:01:28,000
A high-fidelity mockup will do two different things for us.

22
00:01:28,000 --> 00:01:33,000
First, it will allow us to establish some of the more detailed visual design

23
00:01:33,000 --> 00:01:36,000
beyond a simple wireframe, like we have here,

24
00:01:36,000 --> 00:01:39,000
and secondly, we want this website to be responsive

25
00:01:39,000 --> 00:01:46,000
so a high-fidelity mockup will allow us to do precise pixel-based measurements

26
00:01:46,000 --> 00:01:51,000
that we can later do fluid grid calculations with.

27
00:01:51,000 --> 00:01:54,000
So let's go ahead and switch over to Photoshop.

28
00:01:54,000 --> 00:01:58,000
Here, I have a very basic grid layout

29
00:01:58,000 --> 00:02:03,000
and this is actually just a modified version of the Photoshop document

30
00:02:03,000 --> 00:02:06,000
that comes with the Blueprint framework.

31
00:02:06,000 --> 00:02:13,000
You can go ahead and download this Photoshop document from blueprintcss.org.

32
00:02:13,000 --> 00:02:16,000
So let's get into it.

33
00:02:16,000 --> 00:02:21,000
First, I want to just go ahead and design an Easy Jobs! logo

34
00:02:21,000 --> 00:02:25,000
and we'll go ahead and position that a little bit later on.

35
00:02:25,000 --> 00:02:30,000
First, I want to go ahead and design just a basic Easy Jobs! logo

36
00:02:30,000 --> 00:02:35,000
and we can go ahead and position it into our layout later on.

37
00:02:35,000 --> 00:02:40,000
The Easy Jobs! logo will help us to establish some of the visual design 

38
00:02:40,000 --> 00:02:44,000
for the rest of the site.

39
00:02:44,000 --> 00:02:48,000
So we'll go ahead and adjust a few things here.

40
00:02:48,000 --> 00:02:56,000
We'll make this font size larger.

41
00:02:56,000 --> 00:03:01,000
Actually, much larger. There we go.

42
00:03:01,000 --> 00:03:09,000
And then we can go ahead and pick out a font

43
00:03:09,000 --> 00:03:17,000
so we'll go ahead and scroll through a few fonts here.

44
00:03:17,000 --> 00:03:21,000
This doesn't have to be anything terribly fancy.

45
00:03:21,000 --> 00:03:27,000
There we go--we'll just go with regular old Brush Script there.

46
00:03:27,000 --> 00:03:30,000
You can always change this later.

47
00:03:30,000 --> 00:03:35,000
And then we can go ahead and apply a few visual effects to this,

48
00:03:35,000 --> 00:03:41,000
so let's go ahead and pop into the Layer Style panel

49
00:03:41,000 --> 00:03:51,000
and I want to put maybe a gradient on this 

50
00:03:51,000 --> 00:04:01,000
and actually, I think we should go ahead and give this a little bit of color.

51
00:04:01,000 --> 00:04:11,000
So we can just go ahead and freely experiment with a few different colors here;

52
00:04:11,000 --> 00:04:27,000
we'll maybe try some sort of orange and make it fade into maybe a darker red color.

53
00:04:27,000 --> 00:04:34,000
And then, let's go ahead and apply some sort of dark color around this,

54
00:04:34,000 --> 00:04:36,000
maybe even a shadow or a stroke,

55
00:04:36,000 --> 00:04:40,000
just to go ahead and let the lighter color stand out from the background 

56
00:04:40,000 --> 00:04:44,000
because I think the background is probably going to be white

57
00:04:44,000 --> 00:04:47,000
or at least some sort of light color.

58
00:04:47,000 --> 00:04:52,000
So first, let's just go ahead and try a stroke and see what that looks like.

59
00:04:52,000 --> 00:04:57,000
That looks okay.

60
00:04:57,000 --> 00:05:06,000
Now let's go ahead and just try a drop-shadow

61
00:05:06,000 --> 00:05:17,000
and we'll go ahead and try to size this appropriately.

62
00:05:17,000 --> 00:05:24,000
That actually kind of looks terrible, so maybe we should just try an inner shadow

63
00:05:24,000 --> 00:05:33,000
and maybe give this like an impressed letter effect.

64
00:05:33,000 --> 00:05:35,000
That doesn't look too bad.

65
00:05:35,000 --> 00:05:41,000
And then, maybe if we apply just a light stroke just to be super sure

66
00:05:41,000 --> 00:05:46,000
that this actually stands out from the background.

67
00:05:46,000 --> 00:05:50,000
So we can decrease the opacity on this,

68
00:05:50,000 --> 00:05:59,000
or actually, we can go ahead and just change the color to one of the colors that we're using.

69
00:05:59,000 --> 00:06:05,000
So maybe like a dark brown color, just to sort of make it pop from the background 

70
00:06:05,000 --> 00:06:07,000
but also match the colors that we're using.

71
00:06:07,000 --> 00:06:10,000
So we'll go ahead and do that

72
00:06:10,000 --> 00:06:14,000
and I think that looks okay. 

73
00:06:14,000 --> 00:06:18,000
And again, we can always change any one of these things,

74
00:06:18,000 --> 00:06:21,000
so we'll just go ahead and keep moving.

75
00:06:21,000 --> 00:06:27,000
So if we go ahead and open up the Paragraph and Character palettes here,

76
00:06:27,000 --> 00:06:31,000
we can go ahead and adjust this font even further.

77
00:06:31,000 --> 00:06:39,000
I think I would like to bring in these letters a little bit closer together.

78
00:06:39,000 --> 00:06:42,000
That's maybe a little bit too much.

79
00:06:42,000 --> 00:06:45,000
That looks pretty good.

80
00:06:45,000 --> 00:06:48,000
And now that we have all of these layer styles applied,

81
00:06:48,000 --> 00:06:52,000
let's go ahead and cycle through a few more fonts

82
00:06:52,000 --> 00:07:03,000
just to see what a couple different fonts might look like.

83
00:07:03,000 --> 00:07:08,000
So instead of a brush script, I think I'm going to go ahead and settle on Courier,

84
00:07:08,000 --> 00:07:12,000
which has sort of a typewriter look to it.

85
00:07:12,000 --> 00:07:16,000
And I'll bring in these letters a little bit more. 

86
00:07:16,000 --> 00:07:19,000
That's pretty good.

87
00:07:19,000 --> 00:07:24,000
Then, I'm actually going to continue to play with these layer styles,

88
00:07:24,000 --> 00:07:28,000
so let's go ahead and jump back in here

89
00:07:28,000 --> 00:07:35,000
and for the gradient, I think I'm going to go more red

90
00:07:35,000 --> 00:07:45,000
so we'll pick a dark red color for our dark side of the gradient

91
00:07:45,000 --> 00:08:01,000
and we'll carry that over into the lighter side.

92
00:08:01,000 --> 00:08:07,000
And then, we'll adjust our shadow accordingly,

93
00:08:07,000 --> 00:08:14,000
maybe put a little bit more distance on there.

94
00:08:14,000 --> 00:08:16,000
That looks good.

95
00:08:16,000 --> 00:08:21,000
And again, I'm just going to go ahead and continue to play with this gradient,

96
00:08:21,000 --> 00:08:31,000
maybe make it a little lighter still and a little bit more red.

97
00:08:31,000 --> 00:08:33,000
That's looking good.

98
00:08:33,000 --> 00:08:42,000
And then for the stroke color, we'll go ahead and set that to a nice dark red color

99
00:08:42,000 --> 00:08:46,000
and let's see what a larger stroke looks like. 

100
00:08:46,000 --> 00:08:51,000
No, I think I am going to keep that at 1 pixel.

101
00:08:51,000 --> 00:08:54,000
In fact, let's just see what it looks like without a stroke.

102
00:08:54,000 --> 00:08:56,000
That's a little bit too light.

103
00:08:56,000 --> 00:08:59,000
We'll go ahead and keep the stroke on there.

104
00:08:59,000 --> 00:09:01,000
So that looks good

105
00:09:01,000 --> 00:09:05,000
and the logo is going to go in the upper left,

106
00:09:05,000 --> 00:09:08,000
so we'll just go ahead and keep it in that general spot for now

107
00:09:08,000 --> 00:09:14,000
and zoom out a little bit here. 

108
00:09:14,000 --> 00:09:27,000
And I think the logo is pretty huge right now, so let's go ahead and just size that down a bit.

109
00:09:27,000 --> 00:09:31,000
And we can go ahead and position it there 

110
00:09:31,000 --> 00:09:34,000
and I think that looks pretty good. 

111
00:09:34,000 --> 00:09:38,000
We might be able to add a little bit more flair to this logo

112
00:09:38,000 --> 00:09:45,000
if we just rotate it slightly.

113
00:09:45,000 --> 00:09:52,000
There we go.