Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, we'll wireframe the show view of our job board. This is the Rails view in which individual jobs will be displayed.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[Master Class] [Designer and Developer Workflow] [Wireframing the Show View]
0:00
Now we're ready to go ahead and create the show view.
0:07
And this is going to be fairly similar to the index view in terms of the
0:11
other things that are around our data, so let's just go ahead and clone our mockup,
0:17
and let's modify this into a show view.
0:25
The first thing I'm going to do is just delete a lot of these job listings here
0:29
until we just have one left.
0:36
There we go.
0:39
And now, we need to go ahead and make this text a little bit larger
0:41
because the job title is probably one of the most important things on the page.
0:47
So, we'll go ahead and increase the size on that.
0:53
There we go, that looks pretty good.
0:57
So now, we need to go ahead and convert this description into paragraph text.
0:59
So, I'll go ahead and grab some text there,
1:06
and we'll copy this text that we have here.
1:10
Just delete that and paste it as paragraph text.
1:14
That way we can go ahead and size our paragraph appropriately.
1:18
Maybe something like that.
1:24
And then we'll just go ahead and copy and paste the data here
1:26
just so we can fill out this description a little bit more.
1:34
There we go.
1:40
Now, what I'm noticing here is this show view is pretty sparse,
1:43
and there probably is some more information that we could include about the job
1:50
because we're already showing the name of the job and then
1:55
the description of the job in our index view.
1:59
So, when people actually click on one of those items and come to the show view,
2:02
they're probably expecting to see more details about the job
2:07
in addition to just this expanded description.
2:11
So, let's go ahead and communicate this to Jim
2:16
so that he can add a few things to the jobs model.
2:19
"Hey Jim, I was wireframing the show view for the jobs, and I was thinking that
2:23
there were a few fields that we could add."
2:29
"I know we originally agreed on just having a job title and description for the job."
2:32
"But I think it would also be nice to add the name of the company
2:36
and a details link in case the company wants to include an external link
2:39
so they can see more details about the job."
2:44
So, we have our job title and our job description, and now we're going to go ahead
2:49
and add in a company name, and we're going to add a details link
2:54
so that people can read more about the job posting and maybe investigate
2:59
the company a little bit before they submit their application.
3:03
In addition, it might also be nice to include a date posted so that people know
3:07
just how old this job posting actually is before they apply.
3:13
Because we're using Ruby on Rails, we actually get this information for free,
3:18
and we don't need to manually add this to the jobs model.
3:22
So first, let's go ahead and add in that company name.
3:26
So, I'm going to add another string of text, and we'll go ahead and put this
3:30
off to the right here, and we'll increase the size of the text,
3:35
and let's go ahead and make up a company name here.
3:43
We'll call this "Ice Cream Industries."
3:46
And we'll put that off to the side, just like that.
3:57
And we may also style this differently or put it in a different color
4:01
once we actually get into CSS.
4:05
But for now, just knowing the general placement is enough.
4:07
So, we'll go ahead and maybe stretch out this job description
4:11
so it takes up more of the page.
4:16
That looks pretty good.
4:20
And we'll account for extra room down here just in case the job description
4:22
is a little bit longer than what we're expecting, and we also need to add
4:28
a details link here so that people can learn more about the job posting.
4:34
So, we'll go ahead and just call this link "See More,"
4:41
and people can go ahead and click on this to learn more about the job, and the people
4:49
posting the job can actually make this link to whatever they want.
4:53
So, it might just be a link to the company's homepage or it might be a link to
4:57
a specific page on the company's website that describes the job in more detail.
5:02
Now we can go ahead and add our date posted, so we'll drag out some more text,
5:08
and we'll go ahead and just pick some arbitrary date in the future.
5:15
That looks good.
5:20
And we'll go ahead and put that off to the right just like that.
5:23
So, now that we have all of the elements on our page, we can go ahead and
5:29
make some adjustments and maybe anticipate a few problems as well.
5:34
One problem that I'm anticipating is the length of various fields here.
5:39
The See More link is always going to be the same length,
5:44
and the date posted isn't going to change too much, and we have plenty of room
5:48
for this description, so that should be fine and it can even expand
5:54
and push these elements down should it need to.
5:59
However, the title of the job as well as the name of the company
6:02
are two fields that might be longer than we're expecting here,
6:06
and they could end up running into one another or doing some sort of ugly wrapping.
6:10
So, before we continue, let's go ahead and just save this mockup
6:16
and then we'll make some adjustments to it.
6:19
So, we'll save this as show view in the same projects folder as our index view.
6:24
And let's go ahead and make these adjustments.
6:30
So, we'll move our description down,
6:33
and really, I think the title of the job is the most important thing.
6:42
So, let's go ahead and make that even larger.
6:46
And we'll just go ahead and copy and paste the name of this job
6:50
just to make it a little bit longer.
6:57
That's not necessarily the actual job name,
6:59
but a job title could actually end up being pretty long.
7:02
And then, we'll have the name of the company in smaller text down here.
7:06
So, the name of the company is slightly less important than the actual job title.
7:11
Let's go ahead and make that a little bit smaller.
7:17
So, we'll decrease the font size here.
7:19
Actually, I think that's a little bit too small.
7:22
We'll increase that, and let's go ahead and change the text color
7:25
just so we know that that is a little bit less important.
7:29
We'll change it to a lighter gray color so it doesn't contrast as much with the page,
7:32
and I think this description is actually going to end up being in a larger font size.
7:39
So, let's go ahead and increase that a little bit.
7:46
These See More links and this date is actually really small.
7:52
So, we'll go ahead and increase that a little bit as well.
7:58
And I'm going to actually change the date to be lighter color
8:08
so it's de-emphasized a little bit more.
8:15
And I'll go ahead and add some text here that just says "Posted on" a certain date.
8:18
There we go.
8:30
Now, this is looking pretty good.
8:32
There's a few little things we could go ahead and tighten up,
8:34
and we can go ahead and do that once we get into more detail with the CSS.
8:37
I think the last thing I am going to do is change the See More link into an actual button
8:41
just to make it sort of like a call to action so that when people see
8:48
a job posting, they have a next action.
8:52
So, I'll go ahead and go up here to buttons, and this button looks just as good as any other.
8:56
And I'll change this to say "See More."
9:05
And remember, we're just in the wireframe stage right now, so we could go ahead
9:10
and actually change that copy later if we wanted to.
9:14
It could end up saying something like "Learn More."
9:18
It doesn't really matter just as long as we know that there's going to be a button
9:21
or a link or something there where people can learn more about this company.
9:25
So, I'll go ahead and save this mockup, and I think for our show view
9:32
that's about all the detail that we really need to get into for now.
9:36
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up