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

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

3
00:00:07,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:24,000
and if we go ahead and click through to one of these, 

7
00:00:24,000 --> 00:00:30,000
we can get to the show view and really this is just to make sure that the website works

8
00:00:30,000 --> 00:00:35,000
on a very basic level 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:51,000
and as I showed you before, we can go ahead and click on one of these

13
00:00:51,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:05,000
 we actually have a few more page elements here that we didn't really address

16
00:01:05,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:23,000
At this phase of the project, we need to create a high-fidelity mockup.

21
00:01:23,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:40,000
And secondly, we want this website to be responsive,

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

26
00:01:47,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:10,000
You can go ahead and download this Photoshop document 

32
00:02:10,000 --> 00:02:14,000
from blueprintcss.org.

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

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

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

36
00:02:25,000 --> 00:02:28,000
The Easy Jobs! logo will help us to establish 

37
00:02:28,000 --> 00:02:33,000
some of the visual design for the rest of the site. 

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

39
00:02:38,000 --> 00:02:45,000
We'll make this font size larger. 

40
00:02:45,000 --> 00:02:52,000
Actually, much larger--there we go.

41
00:02:52,000 --> 00:02:58,000
And then we can go ahead and pick out a font,

42
00:02:58,000 --> 00:03:07,000
so we'll go ahead and scroll through a few fonts here.

43
00:03:07,000 --> 00:03:11,000
This doesn't have to be anything terribly fancy.

44
00:03:11,000 --> 00:03:18,000
There we go--we'll just go with regular old brush script there. 

45
00:03:18,000 --> 00:03:21,000
You can always change this later. 

46
00:03:21,000 --> 00:03:25,000
And then, we can go ahead and apply a few visual effects to this,

47
00:03:25,000 --> 00:03:31,000
so let's go ahead and pop into the Layer Style panel 

48
00:03:31,000 --> 00:03:41,000
and I want to put maybe a gradient on this.

49
00:03:41,000 --> 00:03:52,000
And actually, I think we should go ahead and give this a little bit of color

50
00:03:52,000 --> 00:04:00,000
so we can just go ahead and freely experiment with a few different colors here.

51
00:04:00,000 --> 00:04:06,000
We'll maybe try some sort of orange

52
00:04:06,000 --> 00:04:17,000
and make it fade into maybe a darker red color.

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

54
00:04:23,000 --> 00:04:26,000
maybe even a shadow or a stroke.

55
00:04:26,000 --> 00:04:30,000
Just go ahead and let the lighter colors stand out from the background 

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

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

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

59
00:04:43,000 --> 00:04:47,000
That looks okay.

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

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

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

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

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

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

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

67
00:05:36,000 --> 00:05:42,000
So we can decrease the opacity on this, or actually, we can go ahead 

68
00:05:42,000 --> 00:05:49,000
and just change the color to one of the colors that we're using; 

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

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

71
00:05:57,000 --> 00:06:05,000
So we'll go ahead and do that and I think that looks okay.

72
00:06:05,000 --> 00:06:07,000
And again, we can always change any one of these things,

73
00:06:07,000 --> 00:06:12,000
so we'll just go ahead and keep moving.

74
00:06:12,000 --> 00:06:17,000
So if we go ahead and open up the paragraph and character palettes here, 

75
00:06:17,000 --> 00:06:21,000
we can go ahead and adjust this font even further. 

76
00:06:21,000 --> 00:06:29,000
I think I would like to bring in these letters a little bit closer together.

77
00:06:29,000 --> 00:06:32,000
That's maybe a little bit too much. 

78
00:06:32,000 --> 00:06:35,000
That looks pretty good. 

79
00:06:35,000 --> 00:06:38,000
And now that we have all of these layer styles applied, 

80
00:06:38,000 --> 00:06:42,000
let's go ahead and cycle through a few more fonts

81
00:06:42,000 --> 00:06:53,000
just to see what a couple different fonts might look like. 

82
00:06:53,000 --> 00:06:58,000
So instead of a brush script, I think I'm going to go ahead and settle on Courier,

83
00:06:58,000 --> 00:07:01,000
which has sort of a typewriter look to it,

84
00:07:01,000 --> 00:07:05,000
and I'll bring in these letters a little bit more.

85
00:07:05,000 --> 00:07:10,000
That's pretty good. 

86
00:07:10,000 --> 00:07:13,000
Then, I'm actually going to continue to play with these layer styles,

87
00:07:13,000 --> 00:07:18,000
so let's go ahead and jump back in here. 

88
00:07:18,000 --> 00:07:25,000
And for the gradient, I think I'm going to go more red,

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

90
00:07:35,000 --> 00:07:51,000
and we'll carry that over into the lighter side

91
00:07:51,000 --> 00:07:58,000
and then we'll adjust our shadow accordingly,

92
00:07:58,000 --> 00:08:04,000
maybe put a little bit more distance on there.

93
00:08:04,000 --> 00:08:06,000
That looks good. 

94
00:08:06,000 --> 00:08:12,000
And again, I'm just going to go ahead and continue to play with this gradient,

95
00:08:12,000 --> 00:08:15,000
maybe make it a little lighter still, 

96
00:08:15,000 --> 00:08:20,000
and a little bit more red. 

97
00:08:20,000 --> 00:08:23,000
That's looking good. 

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

99
00:08:33,000 --> 00:08:36,000
And let's see what a larger stroke looks like. 

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

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

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

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

104
00:08:49,000 --> 00:08:51,000
So that looks good. 

105
00:08:51,000 --> 00:08:56,000
And the logo is going to go in the upper left, so we'll just go ahead 

106
00:08:56,000 --> 00:08:59,000
and keep it in that general spot for now

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

108
00:09:04,000 --> 00:09:07,000
And I think the logo is pretty huge right now, 

109
00:09:07,000 --> 00:09:18,000
so let's go ahead and just size that down a bit

110
00:09:18,000 --> 00:09:24,000
and we can go ahead and position it there and I think that looks pretty good. 

111
00:09:24,000 --> 00:09:34,000
We might be able to add a little bit more flair to this logo if we just rotate it slightly.

112
00:09:34,000 --> 00:09:42,000
There we go.