Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Designing Layouts!
You have completed Designing Layouts!
Preview
The last thing we need to work on is 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.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up