How to Design the Show View9:41 with Nick Pettit
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.
[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 up