Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
How to Style Site Content12:28 with Nick Pettit
[?music?] 0:00 [Master Class: Designer and Developer Workflow: Second Sprint Logo] 0:02 [Nick Pettit] In the previous Sprint, we established some basic CSS 0:07 just to lay out all of these basic page elements that come with Rails scaffolding. 0:10 Here we have the index view of the Easy Jobs! website 0:16 and if we go ahead and click through to one of these, 0:21 we can get to the show view and really this is just to make sure that the website works 0:24 on a very basic level and to prototype some of the functionality. 0:30 So in general, there will be a list of jobs. 0:35 We can click on Edit here and maybe edit a job. 0:38 We can go back and create a new job and we see a similar form, 0:42 and as I showed you before, we can go ahead and click on one of these 0:47 and go to the show view for our job. 0:51 However, if we look at some of the mockups that we created previously, 0:54 we actually have a few more page elements here that we didn't really address 1:00 and for now, we are going to keep those somewhat vague 1:05 so that we have space to add elements later on, 1:09 such as elements that might go in a sidebar 1:12 or authentication elements that might go in the upper right-hand corner. 1:15 At this phase of the project, we need to create a high-fidelity mockup. 1:19 A high-fidelity mockup will do two different things for us. 1:23 First, it will allow us to establish some of the more detailed visual design 1:28 beyond a simple wireframe like we have here. 1:33 And secondly, we want this website to be responsive, 1:36 so a high-fidelity mockup will allow us to do precise, pixel-based measurements 1:40 that we can later do fluid grid calculations with. 1:47 So let's go ahead and switch over to Photoshop. 1:51 Here, I have a very basic grid layout 1:54 and this is actually just a modified version of the Photoshop document 1:58 that comes with the Blueprint framework. 2:03 You can go ahead and download this Photoshop document 2:06 from blueprintcss.org. 2:10 So let's get into it. 2:14 First, I want to just go ahead and design an Easy Jobs! logo 2:16 and we'll go ahead and position that a little bit later on. 2:21 The Easy Jobs! logo will help us to establish 2:25 some of the visual design for the rest of the site. 2:28 So we'll go ahead and adjust a few things here. 2:33 We'll make this font size larger. 2:38 Actually, much larger--there we go. 2:45 And then we can go ahead and pick out a font, 2:52 so we'll go ahead and scroll through a few fonts here. 2:58 This doesn't have to be anything terribly fancy. 3:07 There we go--we'll just go with regular old brush script there. 3:11 You can always change this later. 3:18 And then, we can go ahead and apply a few visual effects to this, 3:21 so let's go ahead and pop into the Layer Style panel 3:25 and I want to put maybe a gradient on this. 3:31 And actually, I think we should go ahead and give this a little bit of color 3:41 so we can just go ahead and freely experiment with a few different colors here. 3:52 We'll maybe try some sort of orange 4:00 and make it fade into maybe a darker red color. 4:06 And then, let's go ahead and apply some sort of dark color around this; 4:17 maybe even a shadow or a stroke. 4:23 Just go ahead and let the lighter colors stand out from the background 4:26 because I think the background is probably going to be white 4:30 or at least some sort of light color. 4:34 So first let's just go ahead and try a stroke and see what that looks like. 4:37 That looks okay. 4:43 Now let's just go ahead and just try a drop shadow 4:47 and we'll go ahead and try to size this appropriately. 4:56 That actually kind of looks terrible, so maybe we should just try an inner shadow 5:06 and maybe give this like an impressed letter effect. 5:14 That doesn't look too bad. 5:23 And then, maybe if we apply just a light stroke, just to be super sure 5:26 that this actually stands out from the background. 5:31 So we can decrease the opacity on this, or actually, we can go ahead 5:36 and just change the color to one of the colors that we're using; 5:42 so maybe like a dark brown color, just to sort of make it pop from the background 5:49 but also match the colors that we're using. 5:55 So we'll go ahead and do that and I think that looks okay. 5:57 And again, we can always change any one of these things, 6:05 so we'll just go ahead and keep moving. 6:07 So if we go ahead and open up the paragraph and character palettes here, 6:12 we can go ahead and adjust this font even further. 6:17 I think I would like to bring in these letters a little bit closer together. 6:21 That's maybe a little bit too much. 6:29 That looks pretty good. 6:32 And now that we have all of these layer styles applied, 6:35 let's go ahead and cycle through a few more fonts 6:38 just to see what a couple different fonts might look like. 6:42 So instead of a brush script, I think I'm going to go ahead and settle on Courier, 6:53 which has sort of a typewriter look to it, 6:58 and I'll bring in these letters a little bit more. 7:01 That's pretty good. 7:05 Then, I'm actually going to continue to play with these layer styles, 7:10 so let's go ahead and jump back in here. 7:13 And for the gradient, I think I'm going to go more red, 7:18 so we'll pick a dark red color for our dark side of the gradient 7:25 and we'll carry that over into the lighter side 7:35 and then we'll adjust our shadow accordingly, 7:51 maybe put a little bit more distance on there. 7:58 That looks good. 8:04 And again, I'm just going to go ahead and continue to play with this gradient, 8:06 maybe make it a little lighter still, 8:12 and a little bit more red. 8:15 That's looking good. 8:20 And then for the stroke color, we'll go ahead and set that to a nice dark red color. 8:23 And let's see what a larger stroke looks like. 8:33 No, I think I am going to keep that at 1 pixel. 8:36 In fact, let's just see what it looks like without a stroke. 8:41 That's a little bit too light. 8:45 We'll go ahead and keep the stroke on there. 8:47 So that looks good. 8:49 And the logo is going to go in the upper left, so we'll just go ahead 8:51 and keep it in that general spot for now 8:56 and zoom out a little bit here. 8:59 And I think the logo is pretty huge right now, 9:04 so let's go ahead and just size that down a bit 9:07 and we can go ahead and position it there and I think that looks pretty good. 9:18 We might be able to add a little bit more flair to this logo if we just rotate it slightly. 9:24 There we go. 9:34
You need to sign up for Treehouse in order to download course files.Sign up