Designing the Visual Hierarchy of Content16:05 with Nick Pettit
In this video, we'll add some placeholder text to our design. Placing these elements on the page will establish the visual hierarchy of our layout.
This video doesn't have any notes.
[?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 download course files.Sign up