Designing a Website Logo

[?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:06 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, we can get to the show view 0:21 and really, this is just to make sure that the website works on a very basic level 0:26 and to prototype some of the functionality. 0:32 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:52 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:04 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:24 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:39 that we can later do fluid grid calculations with. 1:46 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 from blueprintcss.org. 2:06 So let's get into it. 2:13 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 First, I want to go ahead and design just a basic Easy Jobs! logo 2:25 and we can go ahead and position it into our layout later on. 2:30 The Easy Jobs! logo will help us to establish some of the visual design 2:35 for the rest of the site. 2:40 So we'll go ahead and adjust a few things here. 2:44 We'll make this font size larger. 2:48 Actually, much larger. There we go. 2:56 And then we can go ahead and pick out a font 3:01 so we'll go ahead and scroll through a few fonts here. 3:09 This doesn't have to be anything terribly fancy. 3:17 There we go--we'll just go with regular old Brush Script there. 3:21 You can always change this later. 3:27 And then we can go ahead and apply a few visual effects to this, 3:30 so let's go ahead and pop into the Layer Style panel 3:35 and I want to put maybe a gradient on this 3:41 and actually, I think we should go ahead and give this a little bit of color. 3:51 So we can just go ahead and freely experiment with a few different colors here; 4:01 we'll maybe try some sort of orange and make it fade into maybe a darker red color. 4:11 And then, let's go ahead and apply some sort of dark color around this, 4:27 maybe even a shadow or a stroke, 4:34 just to go ahead and let the lighter color stand out from the background 4:36 because I think the background is probably going to be white 4:40 or at least some sort of light color. 4:44 So first, let's just go ahead and try a stroke and see what that looks like. 4:47 That looks okay. 4:52 Now let's go ahead and just try a drop-shadow 4:57 and we'll go ahead and try to size this appropriately. 5:06 That actually kind of looks terrible, so maybe we should just try an inner shadow 5:17 and maybe give this like an impressed letter effect. 5:24 That doesn't look too bad. 5:33 And then, maybe if we apply just a light stroke just to be super sure 5:35 that this actually stands out from the background. 5:41 So we can decrease the opacity on this, 5:46 or actually, we can go ahead and just change the color to one of the colors that we're using. 5:50 So maybe like a dark brown color, just to sort of make it pop from the background 5:59 but also match the colors that we're using. 6:05 So we'll go ahead and do that 6:07 and I think that looks okay. 6:10 And again, we can always change any one of these things, 6:14 so we'll just go ahead and keep moving. 6:18 So if we go ahead and open up the Paragraph and Character palettes here, 6:21 we can go ahead and adjust this font even further. 6:27 I think I would like to bring in these letters a little bit closer together. 6:31 That's maybe a little bit too much. 6:39 That looks pretty good. 6:42 And now that we have all of these layer styles applied, 6:45 let's go ahead and cycle through a few more fonts 6:48 just to see what a couple different fonts might look like. 6:52 So instead of a brush script, I think I'm going to go ahead and settle on Courier, 7:03 which has sort of a typewriter look to it. 7:08 And I'll bring in these letters a little bit more. 7:12 That's pretty good. 7:16 Then, I'm actually going to continue to play with these layer styles, 7:19 so let's go ahead and jump back in here 7:24 and for the gradient, I think I'm going to go more red 7:28 so we'll pick a dark red color for our dark side of the gradient 7:35 and we'll carry that over into the lighter side. 7:45 And then, we'll adjust our shadow accordingly, 8:01 maybe put a little bit more distance on there. 8:07 That looks good. 8:14 And again, I'm just going to go ahead and continue to play with this gradient, 8:16 maybe make it a little lighter still and a little bit more red. 8:21 That's looking good. 8:31 And then for the stroke color, we'll go ahead and set that to a nice dark red color 8:33 and let's see what a larger stroke looks like. 8:42 No, I think I am going to keep that at 1 pixel. 8:46 In fact, let's just see what it looks like without a stroke. 8:51 That's a little bit too light. 8:54 We'll go ahead and keep the stroke on there. 8:56 So that looks good 8:59 and the logo is going to go in the upper left, 9:01 so we'll just go ahead and keep it in that general spot for now 9:05 and zoom out a little bit here. 9:08 And I think the logo is pretty huge right now, so let's go ahead and just size that down a bit. 9:14 And we can go ahead and position it there 9:27 and I think that looks pretty good. 9:31 We might be able to add a little bit more flair to this logo 9:34 if we just rotate it slightly. 9:38 There we go. 9:45