Designing the Visual Hierarchy of Content

[?music?] 0:00 [Master Class Designer and Developer Workflow: Second Sprint Content] 0:02 [Nick Pettit] And now, it's time to bring in some of the information 0:06 that's on the Jobs model, 0:09 so let's go ahead and flip back to our wireframe and take a second look. 0:11 So as you can see, we have the job title, 0:15 we have the name of the company that posted the job, 0:20 we have a job description, and we also have a See More link down here at the bottom. 0:24 Originally, I designed this as a button, and I may keep that, 0:31 but I may actually end up changing that to a link 0:37 just because we're going for more of a paper look now 0:40 and a button might look strange. 0:43 But we may just keep a button; we'll see how it looks. 0:46 In addition to that, we also have a Posted On date 0:51 and right now, we have it down here in the bottom, 0:55 but may actually end up putting it up here at the top 0:57 just because we have a little bit more space than we had counted for here 1:00 in our wireframe. 1:04 So let's go ahead and switch back to Photoshop 1:06 and let's go ahead and add in some text for our job title. 1:11 So this job is going to be Ice Cream Tester 1:17 and we can go ahead and decrease this font size 1:29 because I'm sure that there will be job titles that are longer than that 1:32 and right now, our font size is just as large as our logo 1:36 and we probably don't want that. 1:39 So we'll go ahead and play with this a little bit; 1:42 maybe make it a little bit larger here. 1:46 I think that looks pretty good. 1:53 Let's go ahead turn on our grid 1:56 and it looks like we're one column in and just a couple of lines down here. 1:59 I think that's a pretty good spot for our text. 2:04 And below that, we want to put a company name, 2:13 so let's go ahead and add that in. 2:15 I believe this job came from Ice Cream Industries 2:18 and the name of the company isn't quite as important as the actual job, 2:28 so let's go ahead and adjust the color on that first. 2:32 We actually need to go into the Character palette there. 2:41 So we'll make this more of a dark gray color 2:46 rather than the full-on black that we have there, 2:51 and then, in addition, we'll go ahead and decrease the font size. 2:55 So we'll maybe put it about there, 3:01 and we want this to be right underneath the job title 3:06 and it is aligned to the left. 3:13 That's what we want. 3:16 And if we go ahead and zoom out, I think that looks pretty good. 3:19 We'll go ahead and move that down a bit more. 3:23 So now, let's go ahead and add in a description, 3:26 and we'll say "This is a job tasting ice cream all day." 3:30 That looks good. 3:40 And now we're going to go up to the Layer menu and say Type, 3:43 and we'll say Convert to Paragraph Text, and what that's going to do 3:46 is just convert this text into the form of a paragraph 3:52 so that we can more easily adjust the amount of space that the text takes up. 3:56 So let's go ahead and turn on our guides 4:03 and let's see if we can line this up with the grid really nicely. 4:07 That looks pretty good. 4:21 Remember, we're going one column in from the edge of this piece of paper 4:24 and we want to give a pretty good amount of space for a description. 4:30 And of course, this could expand further down, 4:34 and it's just going to push the other page elements further down the page. 4:38 And we want to decrease this font size because it's pretty large right now, 4:42 so let's go ahead and switch over to the Character palette 4:47 and we'll adjust the font size. 4:51 And again, this is a really nice thing about creating paragraph text 4:53 because as we adjust the font size, 4:56 the paragraph is still going to take up the same amount of space. 4:59 So let's go ahead and get some additional test data in there 5:04 so we'll copy and paste what we have, 5:13 and we'll just paste it a few times there. 5:17 That looks pretty good. 5:25 And now, we can turn off our guides and it's really just a matter of adjusting the font size. 5:28 So we don't want this font to be too terribly large. 5:38 I think that looks pretty good. 5:42 Remember, this is just normal paragraph text and it's not really a header 5:45 like our logo or the job title or the name of the company, 5:49 so I think that's a good size. 5:53 And I do want this text to be a dark color 5:56 just because it is smaller text. 6:01 So now I'm going to go ahead and create a link down here 6:05 and this link will say Read More About This Job. 6:09 And we'll change this link to just a very classic blue color 6:20 to indicate that it's a link, 6:28 and we haven't really used blue anywhere else on the site yet 6:30 so that's a perfectly good color to use for links. 6:34 Go ahead and make sure that is aligned with the left side of the page, 6:38 and just to make it stand out a little bit more, 6:45 we can maybe put that in bold text. 6:49 And I think that the tracking for this text is a little bit too tight considering its size, 6:53 but I do want to bring it in a little bit because I think this font 7:02 just has way too much tracking built in by default. 7:06 So maybe about 30 is what we want, 7:13 and I actually want to do the same thing for this paragraph text 7:17 that we have up above. 7:22 Just adjust the tracking a little bit 7:25 and we should really put in some more leading or line height 7:30 in paragraph text like this, 7:34 so we'll go ahead and adjust this manually. 7:37 That looks a lot nicer, as though it's a typed letter. 7:44 It's a little bit too much for the web. 7:47 I think that looks good. 7:51 And now, we can go ahead and move that link further down, 7:53 so we'll go ahead and move that down the page 7:58 and let's just see what it looks like when we increase the font size on that link. 8:03 I think that looks pretty good when it's a little bit larger than the paragraph text like that, 8:07 so let's go ahead and stick with that. 8:11 So now, we need to just adjust spacing a little bit more here 8:14 and fine-tune a few things, 8:18 and I think that looks pretty good. 8:20 Now, we need to add in the Date Posted for this job, 8:23 and I want to have that up here on the right side, 8:28 but I also want to sort of reserve this space over here 8:33 should we ever decide to use this paperclip for sidebar information 8:37 or maybe even updates to this job. 8:41 So for the date, I want to stick with the theme that we've established so far, 8:44 and I want to sort of create a stamp here. 8:49 So let's go ahead and say POSTED ON, and we'll use all caps 8:51 just because it's a stamp 8:59 and we'll say that this job was posted on just some arbitrary date. 9:03 That looks good. 9:15 Now, let's go ahead and adjust this text. 9:17 So first, I'm actually going to go ahead and remove these spaces. 9:20 That looks good. 9:28 And now, let's go ahead and change this to a nice red stamp color, 9:30 and we'll make it a little bit darker 9:40 and we'll go ahead and center the text so that the POSTED ON is centered with the date. 9:44 And let's make this larger 9:55 and we'll go ahead and decrease the leading here so that it's nice and tight. 9:59 Let's decrease the kerning as well. 10:07 There we go. 10:14 Maybe adjust that a little more. That looks good. 10:15 And now, we can go ahead and tilt that a little bit, just like that. 10:21 And for now, I think that comes across pretty well. 10:33 It looks like a stamp; especially since it's offset and in sort of a red color. 10:39 We could maybe even adjust the opacity a little bit 10:44 and maybe dial it down to 90, or maybe even lower; 10:47 something like 80 percent or 85 percent. 10:55 That looks pretty good. 11:01 And although it doesn't look like it's perfectly blended or stamped onto the page, 11:03 I think we have enough visual cues there to give the right impression. 11:08 And remember, we can always adjust things like this in future iterations. 11:12 So I like the way that looks, and I'm just going to adjust the positioning here. 11:16 I think I'm going to actually keep this a little bit over to the right, 11:24 just to give enough space for maybe longer job titles, 11:30 but I also want to leave some room over here on the right, 11:35 should we ever decide to really use this area. 11:39 So I think that looks pretty good. 11:42 Now, Jim did mention that he wanted to add image uploading to the Jobs model 11:46 so that companies could post pictures for their jobs or perhaps post company logos, 11:52 but he may or may not get to that feature, so let's just worry about that 11:58 in a future iteration and go with what we have right now. 12:03 Now, to wrap this up, we should go ahead and leave a little bit of space up here 12:07 for some sort of login and logout system. 12:13 Jim is still working on that, so we don't actually know what that's going to look like 12:17 just yet, but we can go ahead and at least design some sort of text 12:21 or space for it. 12:25 So to do that, we'll keep this really simple 12:28 and we'll create a white background for the whole site. 12:33 Actually, let's go ahead and make this color just slightly off-white 12:41 to give the site some variation. 12:47 That's a little bit too dark. 12:51 I think that looks good. 13:00 And now, let's go ahead and add some text in the upper right here 13:03 and we want to make sure that we're using the same color as our blue link 13:06 down here at the bottom, so let's go ahead and see what color we used. 13:11 We'll go ahead and just copy that hexadecimal color and hold onto it. 13:15 And now, let's go ahead and create a new folder here 13:24 and we'll keep this very generic and just call it Navigation 13:31 because in addition to some sort of login and logout authentication system, 13:39 we may have horizontal navigation here up at the top 13:42 but that's, of course, going to be for a future iteration. 13:47 So let's just go ahead and type in some text here. 13:51 We'll say Sign In and we'll put a pipe | 13:55 and we'll say Sign Up. 14:01 Actually, just to differentiate these, I'll go ahead and say Log In 14:04 and Sign Up. 14:11 So we'll create some space between these 14:14 and we'll line them up with our grid and we want this to be aligned to the right 14:20 so we'll push those over to the edge of our paper here 14:29 and then we'll try to maybe line those up with the logo a little bit. 14:38 We'll turn the guides off and I think that looks pretty good. 14:46 We'll go ahead and zoom out here and see what we have. 14:53 Up here at the top, we have our logo and we have some basic authentication. 14:57 We have a job post with the POSTED ON date, a description, the title, 15:02 the name of the company, and a link to read more about the job. 15:11 And although we've only designed the show view here, 15:15 we don't really need to mockup all of the views in full high-definition detail like this. 15:19 From the CSS that we create for this particular page, 15:25 we can go ahead and adapt it to the list view 15:28 or even to the form view. 15:31 Now, we didn't really leave any space over here on the right for supplementary content, 15:33 but we do have this paperclip here in case we want to add additional things, 15:39 and I think it would be pretty easy to add additional content here. 15:44 All we would really need to do is move this text in a little bit, 15:48 and that could easily be done on the list view as well. 15:52 So I think the design that we have here is pretty good 15:56 and I think we're ready to go ahead and meet with Jim. 15:59

You need to sign up for Treehouse in order to set up Workspace

Sign up