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

2
00:00:07,000 --> 00:00:11,000
Now we're ready to go ahead and create the show view.

3
00:00:11,000 --> 00:00:17,000
And this is going to be fairly similar to the index view in terms of the 

4
00:00:17,000 --> 00:00:25,000
other things that are around our data, so let's just go ahead and clone our mockup,

5
00:00:25,000 --> 00:00:29,000
and let's modify this into a show view.

6
00:00:29,000 --> 00:00:36,000
The first thing I'm going to do is just delete a lot of these job listings here

7
00:00:36,000 --> 00:00:39,000
until we just have one left.

8
00:00:39,000 --> 00:00:41,000
There we go. 

9
00:00:41,000 --> 00:00:47,000
And now, we need to go ahead and make this text a little bit larger

10
00:00:47,000 --> 00:00:53,000
because the job title is probably one of the most important things on the page.

11
00:00:53,000 --> 00:00:57,000
So, we'll go ahead and increase the size on that.

12
00:00:57,000 --> 00:00:59,000
There we go, that looks pretty good.

13
00:00:59,000 --> 00:01:06,000
So now, we need to go ahead and convert this description into paragraph text.

14
00:01:06,000 --> 00:01:10,000
So, I'll go ahead and grab some text there, 

15
00:01:10,000 --> 00:01:14,000
and we'll copy this text that we have here.

16
00:01:14,000 --> 00:01:18,000
Just delete that and paste it as paragraph text.

17
00:01:18,000 --> 00:01:24,000
That way we can go ahead and size our paragraph appropriately.

18
00:01:24,000 --> 00:01:26,000
Maybe something like that. 

19
00:01:26,000 --> 00:01:34,000
And then we'll just go ahead and copy and paste the data here

20
00:01:34,000 --> 00:01:40,000
just so we can fill out this description a little bit more.

21
00:01:40,000 --> 00:01:43,000
There we go.

22
00:01:43,000 --> 00:01:50,000
Now, what I'm noticing here is this show view is pretty sparse,

23
00:01:50,000 --> 00:01:55,000
and there probably is some more information that we could include about the job

24
00:01:55,000 --> 00:01:59,000
because we're already showing the name of the job and then 

25
00:01:59,000 --> 00:02:02,000
the description of the job in our index view.

26
00:02:02,000 --> 00:02:07,000
So, when people actually click on one of those items and come to the show view,

27
00:02:07,000 --> 00:02:11,000
they're probably expecting to see more details about the job

28
00:02:11,000 --> 00:02:16,000
in addition to just this expanded description.

29
00:02:16,000 --> 00:02:19,000
So, let's go ahead and communicate this to Jim 

30
00:02:19,000 --> 00:02:23,000
so that he can add a few things to the jobs model.

31
00:02:23,000 --> 00:02:29,000
"Hey Jim, I was wireframing the show view for the jobs, and I was thinking that 

32
00:02:29,000 --> 00:02:32,000
there were a few fields that we could add."

33
00:02:32,000 --> 00:02:36,000
"I know we originally agreed on just having a job title and description for the job."

34
00:02:36,000 --> 00:02:39,000
"But I think it would also be nice to add the name of the company 

35
00:02:39,000 --> 00:02:44,000
and a details link in case the company wants to include an external link 

36
00:02:44,000 --> 00:02:49,000
so they can see more details about the job."

37
00:02:49,000 --> 00:02:54,000
So, we have our job title and our job description, and now we're going to go ahead

38
00:02:54,000 --> 00:02:59,000
and add in a company name, and we're going to add a details link

39
00:02:59,000 --> 00:03:03,000
so that people can read more about the job posting and maybe investigate

40
00:03:03,000 --> 00:03:07,000
the company a little bit before they submit their application.

41
00:03:07,000 --> 00:03:13,000
In addition, it might also be nice to include a date posted so that people know

42
00:03:13,000 --> 00:03:18,000
just how old this job posting actually is before they apply.

43
00:03:18,000 --> 00:03:22,000
Because we're using Ruby on Rails, we actually get this information for free,

44
00:03:22,000 --> 00:03:26,000
and we don't need to manually add this to the jobs model.

45
00:03:26,000 --> 00:03:30,000
So first, let's go ahead and add in that company name.

46
00:03:30,000 --> 00:03:35,000
So, I'm going to add another string of text, and we'll go ahead and put this

47
00:03:35,000 --> 00:03:43,000
off to the right here, and we'll increase the size of the text,

48
00:03:43,000 --> 00:03:46,000
and let's go ahead and make up a company name here.

49
00:03:46,000 --> 00:03:57,000
We'll call this "Ice Cream Industries."

50
00:03:57,000 --> 00:04:01,000
And we'll put that off to the side, just like that.

51
00:04:01,000 --> 00:04:05,000
And we may also style this differently or put it in a different color 

52
00:04:05,000 --> 00:04:07,000
once we actually get into CSS.

53
00:04:07,000 --> 00:04:11,000
But for now, just knowing the general placement is enough.

54
00:04:11,000 --> 00:04:16,000
So, we'll go ahead and maybe stretch out this job description 

55
00:04:16,000 --> 00:04:20,000
so it takes up more of the page.

56
00:04:20,000 --> 00:04:22,000
That looks pretty good. 

57
00:04:22,000 --> 00:04:28,000
And we'll account for extra room down here just in case the job description

58
00:04:28,000 --> 00:04:34,000
is a little bit longer than what we're expecting, and we also need to add

59
00:04:34,000 --> 00:04:41,000
a details link here so that people can learn more about the job posting.

60
00:04:41,000 --> 00:04:49,000
So, we'll go ahead and just call this link "See More," 

61
00:04:49,000 --> 00:04:53,000
and people can go ahead and click on this to learn more about the job, and the people

62
00:04:53,000 --> 00:04:57,000
posting the job can actually make this link to whatever they want.

63
00:04:57,000 --> 00:05:02,000
So, it might just be a link to the company's homepage or it might be a link to 

64
00:05:02,000 --> 00:05:08,000
a specific page on the company's website that describes the job in more detail.

65
00:05:08,000 --> 00:05:15,000
Now we can go ahead and add our date posted, so we'll drag out some more text,

66
00:05:15,000 --> 00:05:20,000
and we'll go ahead and just pick some arbitrary date in the future.

67
00:05:20,000 --> 00:05:23,000
That looks good.

68
00:05:23,000 --> 00:05:29,000
And we'll go ahead and put that off to the right just like that.

69
00:05:29,000 --> 00:05:34,000
So, now that we have all of the elements on our page, we can go ahead and 

70
00:05:34,000 --> 00:05:39,000
make some adjustments and maybe anticipate a few problems as well.

71
00:05:39,000 --> 00:05:44,000
One problem that I'm anticipating is the length of various fields here.

72
00:05:44,000 --> 00:05:48,000
The See More link is always going to be the same length,

73
00:05:48,000 --> 00:05:54,000
and the date posted isn't going to change too much, and we have plenty of room

74
00:05:54,000 --> 00:05:59,000
for this description, so that should be fine and it can even expand

75
00:05:59,000 --> 00:06:02,000
and push these elements down should it need to.

76
00:06:02,000 --> 00:06:06,000
However, the title of the job as well as the name of the company

77
00:06:06,000 --> 00:06:10,000
are two fields that might be longer than we're expecting here, 

78
00:06:10,000 --> 00:06:16,000
and they could end up running into one another or doing some sort of ugly wrapping.

79
00:06:16,000 --> 00:06:19,000
So, before we continue, let's go ahead and just save this mockup

80
00:06:19,000 --> 00:06:24,000
and then we'll make some adjustments to it.

81
00:06:24,000 --> 00:06:30,000
So, we'll save this as show view in the same projects folder as our index view.

82
00:06:30,000 --> 00:06:33,000
And let's go ahead and make these adjustments.

83
00:06:33,000 --> 00:06:42,000
So, we'll move our description down, 

84
00:06:42,000 --> 00:06:46,000
and really, I think the title of the job is the most important thing.

85
00:06:46,000 --> 00:06:50,000
So, let's go ahead and make that even larger.

86
00:06:50,000 --> 00:06:57,000
And we'll just go ahead and copy and paste the name of this job

87
00:06:57,000 --> 00:06:59,000
just to make it a little bit longer.

88
00:06:59,000 --> 00:07:02,000
That's not necessarily the actual job name, 

89
00:07:02,000 --> 00:07:06,000
but a job title could actually end up being pretty long.

90
00:07:06,000 --> 00:07:11,000
And then, we'll have the name of the company in smaller text down here.

91
00:07:11,000 --> 00:07:17,000
So, the name of the company is slightly less important than the actual job title.

92
00:07:17,000 --> 00:07:19,000
Let's go ahead and make that a little bit smaller.

93
00:07:19,000 --> 00:07:22,000
So, we'll decrease the font size here.

94
00:07:22,000 --> 00:07:25,000
Actually, I think that's a little bit too small.

95
00:07:25,000 --> 00:07:29,000
We'll increase that, and let's go ahead and change the text color

96
00:07:29,000 --> 00:07:32,000
just so we know that that is a little bit less important.

97
00:07:32,000 --> 00:07:39,000
We'll change it to a lighter gray color so it doesn't contrast as much with the page,

98
00:07:39,000 --> 00:07:46,000
and I think this description is actually going to end up being in a larger font size. 

99
00:07:46,000 --> 00:07:52,000
So, let's go ahead and increase that a little bit.

100
00:07:52,000 --> 00:07:58,000
These See More links and this date is actually really small.

101
00:07:58,000 --> 00:08:08,000
So, we'll go ahead and increase that a little bit as well.

102
00:08:08,000 --> 00:08:15,000
And I'm going to actually change the date to be lighter color 

103
00:08:15,000 --> 00:08:18,000
so it's de-emphasized a little bit more.

104
00:08:18,000 --> 00:08:30,000
And I'll go ahead and add some text here that just says "Posted on" a certain date.

105
00:08:30,000 --> 00:08:32,000
There we go.

106
00:08:32,000 --> 00:08:34,000
Now, this is looking pretty good.

107
00:08:34,000 --> 00:08:37,000
There's a few little things we could go ahead and tighten up, 

108
00:08:37,000 --> 00:08:41,000
and we can go ahead and do that once we get into more detail with the CSS.

109
00:08:41,000 --> 00:08:48,000
I think the last thing I am going to do is change the See More link into an actual button

110
00:08:48,000 --> 00:08:52,000
just to make it sort of like a call to action so that when people see 

111
00:08:52,000 --> 00:08:56,000
a job posting, they have a next action.

112
00:08:56,000 --> 00:09:05,000
So, I'll go ahead and go up here to buttons, and this button looks just as good as any other.

113
00:09:05,000 --> 00:09:10,000
And I'll change this to say "See More."

114
00:09:10,000 --> 00:09:14,000
And remember, we're just in the wireframe stage right now, so we could go ahead

115
00:09:14,000 --> 00:09:18,000
and actually change that copy later if we wanted to.

116
00:09:18,000 --> 00:09:21,000
It could end up saying something like "Learn More."

117
00:09:21,000 --> 00:09:25,000
It doesn't really matter just as long as we know that there's going to be a button

118
00:09:25,000 --> 00:09:32,000
or a link or something there where people can learn more about this company.

119
00:09:32,000 --> 00:09:36,000
So, I'll go ahead and save this mockup, and I think for our show view

120
00:09:36,000 --> 00:09:41,000
that's about all the detail that we really need to get into for now.