Colors and Contrast

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