Colors and Contrast12:48 with Nick Pettit
The last thing we need to work on are some colors that fit the brand a little better. Additionally, there are some areas that have low contrast and are difficult to read, either literally or visually.
The last thing we need to work on are some colors that fit the brand a little 0:00 bit better. 0:04 Additionally, there are some areas that have low contrast and 0:05 are difficult to read either literally or visually. 0:09 Let's finish this. 0:13 This background photo is really nice and colorful but there's 0:15 some areas that are very light, like the white frosting and the background. 0:20 And then there's some areas that are very dark, 0:26 like the chocolate portion of the cupcake. 0:30 This kind of image is almost a worst case scenario because whether 0:34 you make the text black white or some other color, it could be difficult to 0:39 read depending on what part of the image serves as the background in that area. 0:45 As a designer you often have to plan around these worst cases because you 0:51 can't always guarantee that a photograph will work perfectly with your design. 0:56 For example, if other people in a larger organization swap out these images using, 1:02 say a content management system, 1:08 they might not have the same design sensibilities as you. 1:11 So you may need to make sure that a background 1:15 image area like this can work with any photo. 1:20 Furthermore, in a real browser, the width of the browser could 1:24 change depending on the device or just the size of the browser window. 1:29 So the page elements might move around on top of this image. 1:34 To account for variable backgrounds, we're going to recolor 1:40 the photo itself by adding a transparent layer on top. 1:45 First, I'll draw a box using the smart guides to line it up with the photo area. 1:50 So let's Select the box or square tool, 1:56 rectangle tool, and we'll just draw a box here, and 2:00 there it's hitting the bottom edge and the right edge. 2:05 Let's zoom into this corner to make sure it's hitting the top. 2:11 And it looks like it is because it has a border, so let's uncheck that. 2:20 And we need to pop into the Layers 2:27 panel to put this in the background, 2:31 but above the photo. 2:37 So let's zoom back out and it is indeed behind everything else but 2:40 above the photo, that's what we want. 2:45 And then back in the inspector, we've already removed the border. 2:48 But let's change the opacity here to 50%. 2:53 So, type that in and hit Enter to accept. 2:57 And then for the fill, We're 3:01 actually going to use a linear gradient so that we can color this a little bit. 3:07 So instead of solid color up here, hit the drop down and choose linear gradient. 3:12 And right here is the color at the top. 3:21 This is the color down at the bottom. 3:24 So at the top here, we'll use, 3:27 Just pure black to increase the contrast and 3:34 readability of the navigation bar, and 3:39 then let's click slightly toward the middle here. 3:43 We'll just line this up, and you can see that it is aligning here as well, 3:48 we want this to be just above the logo, maybe about there. 3:54 And we'll use a yellow color complement so 3:59 that it's the same, oops. 4:06 So that it complements the purple underneath the logo here. 4:13 So, let's zoom back out. 4:20 Let's get back into that fill. 4:21 So we have this yellow here, can adjust the position. 4:24 And I actually have a specific hexadecimal color I'd like to use. 4:32 I'll just type that in, 4:38 it's 7D6940. 4:42 Click Enter to accept that, there we go, that's much more saturated. 4:46 In fact, it's more of an orange-y color, looks nice. 4:52 And then finally, at the end here toward the bottom, 4:57 I want to bring that purple color back in because it's 5:02 on the logo and it's also darker, like the black. 5:07 So let's just type in a hex value, I have that picked out as well. 5:12 It's 65008F, and I'll hit Enter to accept. 5:17 And of course you can choose your own colors, but I like how this looks. 5:24 We've got the black there to contrast with the nav bar, 5:30 we've got the yellow, that is a nice color complement to the logo. 5:34 And then, we bring that purple-y color from the logo back in at the bottom. 5:40 Which kind of ties the brand together, I like it. 5:47 Next, this search icon is really hard to see. 5:51 In fact, the gray tone makes the button look like it might be inactive. 5:56 Let's set its background color to something a little bit darker. 6:02 So I'll double-click that so that I have selected, see this input here, and 6:08 then I want to actually select this rectangle just below it. 6:15 You can use the Layers panel to do this, And let's change the Fill color. 6:20 And of course you can choose all manner of fill colors for 6:27 this, as long as it's a little darker. 6:32 I'm actually going to once again type in a specific hex value. 6:36 It's 1790C6, Enter. 6:41 It's a nice kind of desaturated, bluish green there. 6:49 Looks nice, and that's much better. 6:55 Now, let's zoom back out, and 6:59 let's make this example text a little bit lighter. 7:02 It will make it more difficult to read, but it should actually look like 7:08 it's inactive, giving the user a hint that if they click here, 7:13 the example text will disappear and move out of their way. 7:17 So let's select this cake, donuts, and popsicles, 7:21 and we'll change the Fill color over here from 3s down to, 7:27 let's say, 9s, so 999, 999, 7:33 6 nines, and then same thing for City and ZIP. 7:38 Here we go. 7:49 Moving down the page, the text for the blog and the two headers looks too light. 7:50 Let's make those darker to match the color of the labels Find and 7:57 Near in the Search bar, so Select New in your City, 8:03 and let's change the fill to 3s, 1, 2, 3, 4, 5, 6. 8:08 And same thing from the blog text, change that to 3s. 8:15 1, 2, 3, 4, 5, 6. 8:21 Here we go. 8:24 That's much better, much easier to read. 8:29 And in fact, this text looks too light as well. 8:31 I'm going to change that. 8:36 Much better, that's much easier to read. 8:41 Finally, this footer works well enough. 8:43 It could have a little bit more contrast, but what it really is 8:47 missing is some kind of coloring that brings this branding into it. 8:52 So it's pretty bland right now, and it feels disconnected from the rest 8:57 of the site, which is now more colorful and fun, like dessert should be. 9:01 So let's pick up, maybe say some of that purple color from 9:06 the logo text down the bottom of this gradient. 9:11 So I'll select this footer, and 9:15 in the Layers panel I am just going to open up this footer, and 9:17 let's scroll down to this rectangle here that's behind all these other text layers. 9:20 And let's change this Fill color to a purple-y in color. 9:25 Once again I have a hex value picked out. 9:33 I'll type 7A5695, 9:35 and hit Enter. 9:41 There we go. 9:45 It's a nice dissaturated purple color. 9:46 Now let's zoom out, and I'll close the Layers panel. 9:50 And when you're done, save your work. 9:57 Now, let's compare this to where we started. 10:00 I'm going to open up the original starting document, and 10:05 I'll switch back and forth for you. 10:09 So this is where we're at right now, And 10:20 this is where we started. 10:26 So I'm going to switch back again. 10:28 And it's always good to just kind of review everything, 10:31 make sure you're happy with how everything is laid out. 10:36 I feel like forums, looking at it now, is a little far away from right of review. 10:40 I probably put it there just because the grid made it look like it was 10:46 further away than it really was. 10:51 So let's adjust that a little bit. 10:53 So that looks good. 10:59 There, actually I'm going to move it just a little closer. 11:01 There we go, that looks like the same spacing there. 11:04 And I'm rereading this again, and 11:08 we actually introduced another mistake while we were fixing a mistake. 11:11 Have you ever enjoyed great dinner? 11:17 We should actually say have you ever enjoyed a great dinner, 11:21 only to be disappointed by the lack of dessert options? 11:25 Or worse, no dessert menu at all? 11:29 That's why we're launching ZERTS, the first search engine and 11:31 restaurant review site that focuses exclusively on dessert. 11:35 Okay, there we go. 11:39 So let's Save that, and we'll flip back again. 11:41 Let me make sure the zoom level is the same here. 11:50 So that's where we started, And here's where we're at now. 11:53 Looks a lot better. 11:58 Notice how after our adjustments, the site has a lot more clarity, 12:00 both in terms of a clean, hierarchical layout, and 12:06 in terms of legibility and color contrast. 12:10 What fascinates me about design is that often times small 12:15 changes can make a huge impact. 12:19 It doesn't seem like we did a whole lot and mechanically we really didn't. 12:21 We wrote a little bit of text, we moved some things around, and 12:26 we changed some colors. 12:30 But the impact is pretty huge. 12:31 That's because design is more than the sum of its individual parts. 12:33 Cohesive fonts, colors and elements that are aligned with 12:38 one another on a grid all come together to form a complete picture. 12:43
You need to sign up for Treehouse in order to download course files.Sign up