The last thing we need to work on are some colors that fit the brand a little

bit better.

Additionally, there are some areas that have low contrast and

are difficult to read either literally or visually.

Let's finish this.

This background photo is really nice and colorful but there's

some areas that are very light, like the white frosting and the background.

And then there's some areas that are very dark,

like the chocolate portion of the cupcake.

This kind of image is almost a worst case scenario because whether

you make the text black white or some other color, it could be difficult to

read depending on what part of the image serves as the background in that area.

As a designer you often have to plan around these worst cases because you

can't always guarantee that a photograph will work perfectly with your design.

For example, if other people in a larger organization swap out these images using,

say a content management system,

they might not have the same design sensibilities as you.

So you may need to make sure that a background

image area like this can work with any photo.

Furthermore, in a real browser, the width of the browser could

change depending on the device or just the size of the browser window.

So the page elements might move around on top of this image.

To account for variable backgrounds, we're going to recolor

the photo itself by adding a transparent layer on top.

First, I'll draw a box using the smart guides to line it up with the photo area.

So let's Select the box or square tool,

rectangle tool, and we'll just draw a box here, and

there it's hitting the bottom edge and the right edge.

Let's zoom into this corner to make sure it's hitting the top.

And it looks like it is because it has a border, so let's uncheck that.

And we need to pop into the Layers

panel to put this in the background,

but above the photo.

So let's zoom back out and it is indeed behind everything else but

above the photo, that's what we want.

And then back in the inspector, we've already removed the border.

But let's change the opacity here to 50%.

So, type that in and hit Enter to accept.

And then for the fill, We're

actually going to use a linear gradient so that we can color this a little bit.

So instead of solid color up here, hit the drop down and choose linear gradient.

And right here is the color at the top.

This is the color down at the bottom.

So at the top here, we'll use,

Just pure black to increase the contrast and

readability of the navigation bar, and

then let's click slightly toward the middle here.

We'll just line this up, and you can see that it is aligning here as well,

we want this to be just above the logo, maybe about there.

And we'll use a yellow color complement so

that it's the same, oops.

So that it complements the purple underneath the logo here.

So, let's zoom back out.

Let's get back into that fill.

So we have this yellow here, can adjust the position.

And I actually have a specific hexadecimal color I'd like to use.

I'll just type that in,

it's 7D6940.

Click Enter to accept that, there we go, that's much more saturated.

In fact, it's more of an orange-y color, looks nice.

And then finally, at the end here toward the bottom,

I want to bring that purple color back in because it's

on the logo and it's also darker, like the black.

So let's just type in a hex value, I have that picked out as well.

It's 65008F, and I'll hit Enter to accept.

And of course you can choose your own colors, but I like how this looks.

We've got the black there to contrast with the nav bar,

we've got the yellow, that is a nice color complement to the logo.

And then, we bring that purple-y color from the logo back in at the bottom.

Which kind of ties the brand together, I like it.

Next, this search icon is really hard to see.

In fact, the gray tone makes the button look like it might be inactive.

Let's set its background color to something a little bit darker.

So I'll double-click that so that I have selected, see this input here, and

then I want to actually select this rectangle just below it.

You can use the Layers panel to do this, And let's change the Fill color.

And of course you can choose all manner of fill colors for

this, as long as it's a little darker.

I'm actually going to once again type in a specific hex value.

It's 1790C6, Enter.

It's a nice kind of desaturated, bluish green there.

Looks nice, and that's much better.

Now, let's zoom back out, and

let's make this example text a little bit lighter.

It will make it more difficult to read, but it should actually look like

it's inactive, giving the user a hint that if they click here,

the example text will disappear and move out of their way.

So let's select this cake, donuts, and popsicles,

and we'll change the Fill color over here from 3s down to,

let's say, 9s, so 999, 999,

6 nines, and then same thing for City and ZIP.

Here we go.

Moving down the page, the text for the blog and the two headers looks too light.

Let's make those darker to match the color of the labels Find and

Near in the Search bar, so Select New in your City,

and let's change the fill to 3s, 1, 2, 3, 4, 5, 6.

And same thing from the blog text, change that to 3s.

1, 2, 3, 4, 5, 6.

Here we go.

That's much better, much easier to read.

And in fact, this text looks too light as well.

I'm going to change that.

Much better, that's much easier to read.

Finally, this footer works well enough.

It could have a little bit more contrast, but what it really is

missing is some kind of coloring that brings this branding into it.

So it's pretty bland right now, and it feels disconnected from the rest

of the site, which is now more colorful and fun, like dessert should be.

So let's pick up, maybe say some of that purple color from

the logo text down the bottom of this gradient.

So I'll select this footer, and

in the Layers panel I am just going to open up this footer, and

let's scroll down to this rectangle here that's behind all these other text layers.

And let's change this Fill color to a purple-y in color.

Once again I have a hex value picked out.

I'll type 7A5695,

and hit Enter.

There we go.

It's a nice dissaturated purple color.

Now let's zoom out, and I'll close the Layers panel.

And when you're done, save your work.

Now, let's compare this to where we started.

I'm going to open up the original starting document, and

I'll switch back and forth for you.

So this is where we're at right now, And

this is where we started.

So I'm going to switch back again.

And it's always good to just kind of review everything,

make sure you're happy with how everything is laid out.

I feel like forums, looking at it now, is a little far away from right of review.

I probably put it there just because the grid made it look like it was

further away than it really was.

So let's adjust that a little bit.

So that looks good.

There, actually I'm going to move it just a little closer.

There we go, that looks like the same spacing there.

And I'm rereading this again, and

we actually introduced another mistake while we were fixing a mistake.

Have you ever enjoyed great dinner?

We should actually say have you ever enjoyed a great dinner,

only to be disappointed by the lack of dessert options?

Or worse, no dessert menu at all?

That's why we're launching ZERTS, the first search engine and

restaurant review site that focuses exclusively on dessert.

Okay, there we go.

So let's Save that, and we'll flip back again.

Let me make sure the zoom level is the same here.

So that's where we started, And here's where we're at now.

Looks a lot better.

Notice how after our adjustments, the site has a lot more clarity,

both in terms of a clean, hierarchical layout, and

in terms of legibility and color contrast.

What fascinates me about design is that often times small

changes can make a huge impact.

It doesn't seem like we did a whole lot and mechanically we really didn't.

We wrote a little bit of text, we moved some things around, and

we changed some colors.

But the impact is pretty huge.

That's because design is more than the sum of its individual parts.

Cohesive fonts, colors and elements that are aligned with

one another on a grid all come together to form a complete picture.