1
00:00:00,000 --> 00:00:07,000
[Master Class] [Designer and Developer Workflow] [Wireframing the Index View]

2
00:00:07,000 --> 00:00:09,000
I just had my meeting with Jim, and he's going to go ahead 

3
00:00:09,000 --> 00:00:12,000
and generate the Rail scaffolding.

4
00:00:12,000 --> 00:00:15,000
In the meantime, I can go ahead and get started on the wireframes,

5
00:00:15,000 --> 00:00:19,000
and then get into the CSS once Jim is done with the scaffolding.

6
00:00:19,000 --> 00:00:21,000
So, let's get into it.

7
00:00:21,000 --> 00:00:26,000
So, I'm about to start wireframing, but I've just received an email from Jim.

8
00:00:26,000 --> 00:00:28,000
Let's go ahead and see what that says.

9
00:00:28,000 --> 00:00:33,000
"Hey Nick, I setup the GitHub Repository for our project."

10
00:00:33,000 --> 00:00:35,000
"It's at TeamTreehouse/EasyJobs."

11
00:00:35,000 --> 00:00:39,000
"So, I've added you as a collaborator if you want to go ahead and pull it,

12
00:00:39,000 --> 00:00:42,000
you can start working on it."

13
00:00:42,000 --> 00:00:46,000
So, it looks like Jim has set up the repo in GitHub, and he's gone ahead and

14
00:00:46,000 --> 00:00:49,000
sent me the details about that.

15
00:00:49,000 --> 00:00:51,000
I'm not really going to worry about that right now because first,

16
00:00:51,000 --> 00:00:53,000
I do need to do some wireframing.

17
00:00:53,000 --> 00:00:58,000
So, I'll let him go ahead and get the rest of the scaffolding set up  

18
00:00:58,000 --> 00:01:03,000
and add in SASS and a few other niceties before I dive into the code.

19
00:01:03,000 --> 00:01:05,000
So, let's go ahead and get started.

20
00:01:05,000 --> 00:01:09,000
One of the first things that I like to do when wireframing in a program 

21
00:01:09,000 --> 00:01:16,000
like Balsamiq Mockups is I like to design from the inside out.

22
00:01:16,000 --> 00:01:20,000
So, they do have a browser window somewhere in here.

23
00:01:20,000 --> 00:01:22,000
There it is.

24
00:01:22,000 --> 00:01:27,000
And a lot of people will start out by dragging a browser window out just like that,

25
00:01:27,000 --> 00:01:30,000
and then they'll start adding things inside.

26
00:01:30,000 --> 00:01:32,000
But I'm not going to do that.

27
00:01:32,000 --> 00:01:38,000
I want to actually start with the base piece of data that we're going to be working with

28
00:01:38,000 --> 00:01:42,000
and then work my way out and build the layout around it.

29
00:01:42,000 --> 00:01:46,000
That way we ensure that we design the most important parts of the layout first,

30
00:01:46,000 --> 00:01:50,000
and then we design all the other niceties that go with it.

31
00:01:50,000 --> 00:01:55,000
So, we need to design a couple different things here, and in this Master Class,

32
00:01:55,000 --> 00:01:59,000
I'm just going to go ahead and focus on 3 different views.

33
00:01:59,000 --> 00:02:04,000
We're going to create the index view that will list all of the jobs.

34
00:02:04,000 --> 00:02:10,000
We're going to create a show view that will show individual jobs,

35
00:02:10,000 --> 00:02:15,000
and then we're going to create a form view which may be for the new 

36
00:02:15,000 --> 00:02:19,000
or edit view to create and edit jobs.

37
00:02:19,000 --> 00:02:23,000
So, let's go ahead and start out with the index view.

38
00:02:23,000 --> 00:02:27,000
Right now, a job consists of 2 basic components.

39
00:02:27,000 --> 00:02:32,000
We have the title of the job, and then we have the description for the job.

40
00:02:32,000 --> 00:02:35,000
So, let's just go ahead and design that.

41
00:02:35,000 --> 00:02:42,000
I'm going to drag out some text here, and let's just go ahead and create a few easy jobs.

42
00:02:42,000 --> 00:02:52,000
The first one is going to be an ice cream tester, and that will be the title of the job.

43
00:02:52,000 --> 00:02:56,000
And we probably want that text to be a little bit larger, 

44
00:02:56,000 --> 00:02:59,000
so we'll go ahead and increase the size.

45
00:02:59,000 --> 00:03:02,000
That's probably a little bit too large for a list view.

46
00:03:02,000 --> 00:03:05,000
That's still a bit too large.

47
00:03:05,000 --> 00:03:08,000
Maybe we can go down to about 16.

48
00:03:08,000 --> 00:03:10,000
That looks pretty good.

49
00:03:10,000 --> 00:03:14,000
That way the job titles will be nice and bold, and then right next to it,

50
00:03:14,000 --> 00:03:19,000
we'll go ahead and put another string, which will be the description for the job,

51
00:03:19,000 --> 00:03:23,000
and this can be a little bit smaller.

52
00:03:23,000 --> 00:03:32,000
And we'll say "Get paid to taste new ice cream all day."

53
00:03:32,000 --> 00:03:36,000
So, there we go, there's our description for that job.

54
00:03:36,000 --> 00:03:40,000
And that's about all we need for each item in our index view.

55
00:03:40,000 --> 00:03:43,000
So, let's go ahead and create a few more of these.

56
00:03:43,000 --> 00:03:47,000
We'll go ahead and just duplicate this text here and line it up,

57
00:03:47,000 --> 00:03:51,000
and we'll change this to another job.

58
00:03:51,000 --> 00:03:57,000
We'll say "Fashion police officer."

59
00:03:57,000 --> 00:04:02,000
So, we'll put that there.

60
00:04:02,000 --> 00:04:07,000
I'll just go ahead and duplicate this description here, and let's go ahead and change this,

61
00:04:07,000 --> 00:04:22,000
and we'll say something like "Police the fashion crimes of the general public."

62
00:04:22,000 --> 00:04:27,000
And make a few more of these here.

63
00:04:27,000 --> 00:04:29,000
It looks like I spelled fashion police wrong.

64
00:04:29,000 --> 00:04:32,000
That's okay, change that.

65
00:04:32,000 --> 00:04:35,000
And we'll create another easy job.

66
00:04:35,000 --> 00:04:44,000
Say "Plant Babysitter."

67
00:04:44,000 --> 00:04:49,000
Create a job called "People Watcher."

68
00:04:49,000 --> 00:04:57,000
Make one that says "Cinema Patron."

69
00:04:57,000 --> 00:05:05,000
And we'll create a job called "Sandwich Enthusiast."

70
00:05:05,000 --> 00:05:07,000
There we go, we have a few descriptions here.

71
00:05:07,000 --> 00:05:09,000
So, we can just go ahead and duplicate those.

72
00:05:09,000 --> 00:05:14,000
We don't necessarily need to write descriptions for each one of these,

73
00:05:14,000 --> 00:05:20,000
but what I should mention is that it is good to try and create some real data like this,

74
00:05:20,000 --> 00:05:25,000
rather than using Lorem Ipsum text, because what we're already seeing

75
00:05:25,000 --> 00:05:29,000
is that each one of these jobs is a different length.

76
00:05:29,000 --> 00:05:35,000
If we had just created some Lorem Ipsum text and used the same title for every job,

77
00:05:35,000 --> 00:05:39,000
we would see that these would just line up very nicely,

78
00:05:39,000 --> 00:05:41,000
but here they're sort of staggered.

79
00:05:41,000 --> 00:05:46,000
So, let's just go ahead and push all of these descriptions so that they're 

80
00:05:46,000 --> 00:05:52,000
right next to the job title, and let's see how that looks.

81
00:05:52,000 --> 00:05:54,000
Now, this is pretty staggered.

82
00:05:54,000 --> 00:05:58,000
We might be able to get away with this if the job titles are in bold text

83
00:05:58,000 --> 00:06:02,000
and then the job descriptions are in weaker text, 

84
00:06:02,000 --> 00:06:06,000
or we could try and make all of these line up.

85
00:06:06,000 --> 00:06:11,000
These job titles are always going to be variable, and actually, I think this is fine.

86
00:06:11,000 --> 00:06:19,000
All we really need to do here is just change these job titles so that they're a little bit weaker,

87
00:06:19,000 --> 00:06:24,000
and to do that, we'll just go ahead and put them in some lighter gray text.

88
00:06:24,000 --> 00:06:27,000
That's maybe a little bit too light.

89
00:06:27,000 --> 00:06:31,000
Just like that, and that way when someone is scanning the page,

90
00:06:31,000 --> 00:06:36,000
they can go ahead and see these bold job titles, and then if they are interested

91
00:06:36,000 --> 00:06:40,000
in one of the titles, they can go ahead and read onto the description

92
00:06:40,000 --> 00:06:44,000
and possibly go ahead and click through to the actual job.

93
00:06:44,000 --> 00:06:51,000
Another problem I'm noticing here is that we have this rag along the right side,

94
00:06:51,000 --> 00:06:55,000
and that is something I actually would like to line up very neatly

95
00:06:55,000 --> 00:07:01,000
because we have this nice left justified text, and we are going to be putting this in a column.

96
00:07:01,000 --> 00:07:06,000
So, we should go ahead and try to cut some of this off.

97
00:07:06,000 --> 00:07:10,000
Now, these job descriptions are a little bit short, so I'll just go ahead

98
00:07:10,000 --> 00:07:21,000
and copy and paste these to make them a little bit longer.

99
00:07:21,000 --> 00:07:29,000
And then we'll go ahead and do it for the other one here.

100
00:07:29,000 --> 00:07:35,000
And I think something like this is more realistic in terms of the length of a job description,

101
00:07:35,000 --> 00:07:39,000
and in fact, it's probably going to be much longer, but for the list view,

102
00:07:39,000 --> 00:07:41,000
this will work just fine.

103
00:07:41,000 --> 00:07:44,000
So, we need to cut this off, and I think the way we're going to do that is 

104
00:07:44,000 --> 00:07:46,000
with some sort of ellipses.

105
00:07:46,000 --> 00:07:49,000
So, let's go ahead and add that in.

106
00:07:49,000 --> 00:07:54,000
We'll cut it off right about there.

107
00:07:54,000 --> 00:07:59,000
And we'll copy that so we can paste it in more easily.

108
00:07:59,000 --> 00:08:05,000
We'll cut that off about there.

109
00:08:05,000 --> 00:08:08,000
That looks good.

110
00:08:08,000 --> 00:08:15,000
We'll do the same for that one.

111
00:08:15,000 --> 00:08:19,000
And one more here.

112
00:08:19,000 --> 00:08:22,000
It's a little bit short.

113
00:08:22,000 --> 00:08:24,000
There we go.

114
00:08:24,000 --> 00:08:28,000
So, that's not lining up perfectly, but we can get the general idea

115
00:08:28,000 --> 00:08:34,000
and make it a little bit more perfect with CSS once we actually get into styling the page.

116
00:08:34,000 --> 00:08:36,000
So, I think this is looking pretty good.

117
00:08:36,000 --> 00:08:43,000
I'm going to go ahead and save this out, and I'll go ahead and save it in our projects directory,

118
00:08:43,000 --> 00:08:47,000
and I'll just call this "Index View."

119
00:08:47,000 --> 00:08:50,000
Now that we have a pretty good list going, we can start to build some of 

120
00:08:50,000 --> 00:08:53,000
the other things around that list.

121
00:08:53,000 --> 00:08:58,000
So, let's go ahead and jump over to our containers here,

122
00:08:58,000 --> 00:09:06,000
and we can assume that we're probably going to have some sort of logo up here at the top.

123
00:09:06,000 --> 00:09:10,000
It's probably going to say "Easy Jobs," but we can worry about that 

124
00:09:10,000 --> 00:09:14,000
when we get into a little bit more detail with the styling.

125
00:09:14,000 --> 00:09:19,000
Jim and I did talk about some sort of log in system, 

126
00:09:19,000 --> 00:09:23,000
and we can also assume that there's going to be some sort of navigation

127
00:09:23,000 --> 00:09:27,000
or maybe search or filtering functionality in the future.

128
00:09:27,000 --> 00:09:33,000
So, we'll go ahead and add some space over here in the upper right for that.

129
00:09:33,000 --> 00:09:40,000
Now, I'll go ahead and maybe copy this and create some sort of side bar here.

130
00:09:40,000 --> 00:09:45,000
So, we're starting to build out the shape of the page here.

131
00:09:45,000 --> 00:09:48,000
So, we can line a few things up a little bit more confidently,

132
00:09:48,000 --> 00:09:52,000
and I actually am going to change this container to text just so that we know

133
00:09:52,000 --> 00:09:56,000
for sure that it is in fact the logo for the site.

134
00:09:56,000 --> 00:10:04,000
So, I'll delete that container, drag out some text here, and we'll say "Easy Jobs."

135
00:10:04,000 --> 00:10:11,000
And we'll go ahead and make that text a little bit larger, maybe even bigger,

136
00:10:11,000 --> 00:10:15,000
have a nice big logo here.

137
00:10:15,000 --> 00:10:17,000
That's a little bit too large.

138
00:10:17,000 --> 00:10:19,000
There we go, that's good.

139
00:10:19,000 --> 00:10:24,000
So, we'll say "Easy Jobs."

140
00:10:24,000 --> 00:10:30,000
And let's go ahead and copy a few more of these jobs 

141
00:10:30,000 --> 00:10:35,000
just so that we can fill out the page a little bit more.

142
00:10:35,000 --> 00:10:43,000
We'll duplicate those and then just drag them down like that.

143
00:10:43,000 --> 00:10:48,000
And so now, we're starting to build out the page a little bit more.

144
00:10:48,000 --> 00:10:59,000
Move these up to the top so it doesn't go off the page.

145
00:10:59,000 --> 00:11:04,000
And I think this index view looks pretty good.