1
00:00:00,000 --> 00:00:04,863
The last thing we need to work on are some
colors that fit the brand a little

2
00:00:04,863 --> 00:00:05,756
bit better.

3
00:00:05,756 --> 00:00:09,948
Additionally, there are some
areas that have low contrast and

4
00:00:09,948 --> 00:00:13,519
are difficult to read either literally or
visually.

5
00:00:13,519 --> 00:00:15,088
Let's finish this.

6
00:00:15,088 --> 00:00:20,155
This background photo is really nice and
colorful but there's

7
00:00:20,155 --> 00:00:26,380
some areas that are very light, like
the white frosting and the background.

8
00:00:26,380 --> 00:00:30,611
And then there's some
areas that are very dark,

9
00:00:30,611 --> 00:00:34,434
like the chocolate portion of the cupcake.

10
00:00:34,434 --> 00:00:39,629
This kind of image is almost a worst
case scenario because whether

11
00:00:39,629 --> 00:00:45,484
you make the text black white or
some other color, it could be difficult to

12
00:00:45,484 --> 00:00:51,734
read depending on what part of the image
serves as the background in that area.

13
00:00:51,734 --> 00:00:56,793
As a designer you often have to plan
around these worst cases because you

14
00:00:56,793 --> 00:01:02,622
can't always guarantee that a photograph
will work perfectly with your design.

15
00:01:02,622 --> 00:01:08,657
For example, if other people in a larger
organization swap out these images using,

16
00:01:08,657 --> 00:01:11,122
say a content management system,

17
00:01:11,122 --> 00:01:15,298
they might not have the same
design sensibilities as you.

18
00:01:15,298 --> 00:01:20,036
So you may need to make
sure that a background

19
00:01:20,036 --> 00:01:24,913
image area like this can
work with any photo.

20
00:01:24,913 --> 00:01:29,614
Furthermore, in a real browser,
the width of the browser could

21
00:01:29,614 --> 00:01:34,762
change depending on the device or
just the size of the browser window.

22
00:01:34,762 --> 00:01:40,016
So the page elements might move
around on top of this image.

23
00:01:40,016 --> 00:01:45,412
To account for variable backgrounds,
we're going to recolor

24
00:01:45,412 --> 00:01:50,107
the photo itself by adding
a transparent layer on top.

25
00:01:50,107 --> 00:01:56,802
First, I'll draw a box using the smart
guides to line it up with the photo area.

26
00:01:56,802 --> 00:02:00,721
So let's Select the box or square tool,

27
00:02:00,721 --> 00:02:05,908
rectangle tool, and
we'll just draw a box here, and

28
00:02:05,908 --> 00:02:11,338
there it's hitting the bottom edge and
the right edge.

29
00:02:11,338 --> 00:02:16,936
Let's zoom into this corner to
make sure it's hitting the top.

30
00:02:20,876 --> 00:02:27,176
And it looks like it is because it
has a border, so let's uncheck that.

31
00:02:27,176 --> 00:02:31,812
And we need to pop into the Layers

32
00:02:31,812 --> 00:02:37,136
panel to put this in the background,

33
00:02:37,136 --> 00:02:40,245
but above the photo.

34
00:02:40,245 --> 00:02:45,448
So let's zoom back out and
it is indeed behind everything else but

35
00:02:45,448 --> 00:02:48,671
above the photo, that's what we want.

36
00:02:48,671 --> 00:02:53,582
And then back in the inspector,
we've already removed the border.

37
00:02:53,582 --> 00:02:57,844
But let's change the opacity here to 50%.

38
00:02:57,844 --> 00:03:01,408
So, type that in and hit Enter to accept.

39
00:03:01,408 --> 00:03:07,702
And then for the fill, We're

40
00:03:07,702 --> 00:03:12,703
actually going to use a linear gradient so
that we can color this a little bit.

41
00:03:12,703 --> 00:03:19,200
So instead of solid color up here, hit
the drop down and choose linear gradient.

42
00:03:21,497 --> 00:03:24,256
And right here is the color at the top.

43
00:03:24,256 --> 00:03:27,090
This is the color down at the bottom.

44
00:03:27,090 --> 00:03:32,729
So at the top here, we'll use,

45
00:03:34,793 --> 00:03:39,149
Just pure black to
increase the contrast and

46
00:03:39,149 --> 00:03:43,152
readability of the navigation bar, and

47
00:03:43,152 --> 00:03:48,343
then let's click slightly
toward the middle here.

48
00:03:48,343 --> 00:03:54,764
We'll just line this up, and you can
see that it is aligning here as well,

49
00:03:54,764 --> 00:03:59,851
we want this to be just above the logo,
maybe about there.

50
00:03:59,851 --> 00:04:06,121
And we'll use a yellow color complement so

51
00:04:06,121 --> 00:04:10,310
that it's the same, oops.

52
00:04:13,191 --> 00:04:20,051
So that it complements the purple
underneath the logo here.

53
00:04:20,051 --> 00:04:21,804
So, let's zoom back out.

54
00:04:21,804 --> 00:04:24,646
Let's get back into that fill.

55
00:04:24,646 --> 00:04:32,195
So we have this yellow here,
can adjust the position.

56
00:04:32,195 --> 00:04:38,228
And I actually have a specific
hexadecimal color I'd like to use.

57
00:04:38,228 --> 00:04:42,925
I'll just type that in,

58
00:04:42,925 --> 00:04:46,955
it's 7D6940.

59
00:04:46,955 --> 00:04:52,953
Click Enter to accept that, there we go,
that's much more saturated.

60
00:04:52,953 --> 00:04:57,288
In fact, it's more of an orange-y color,
looks nice.

61
00:04:57,288 --> 00:05:02,288
And then finally,
at the end here toward the bottom,

62
00:05:02,288 --> 00:05:07,291
I want to bring that purple
color back in because it's

63
00:05:07,291 --> 00:05:12,088
on the logo and it's also darker,
like the black.

64
00:05:12,088 --> 00:05:17,142
So let's just type in a hex value,
I have that picked out as well.

65
00:05:17,142 --> 00:05:24,149
It's 65008F, and I'll hit Enter to accept.

66
00:05:24,149 --> 00:05:30,205
And of course you can choose your own
colors, but I like how this looks.

67
00:05:30,205 --> 00:05:34,911
We've got the black there to
contrast with the nav bar,

68
00:05:34,911 --> 00:05:40,633
we've got the yellow, that is a nice
color complement to the logo.

69
00:05:40,633 --> 00:05:47,024
And then, we bring that purple-y color
from the logo back in at the bottom.

70
00:05:47,024 --> 00:05:51,272
Which kind of ties the brand together,
I like it.

71
00:05:51,272 --> 00:05:56,990
Next, this search icon
is really hard to see.

72
00:05:56,990 --> 00:06:02,463
In fact, the gray tone makes the button
look like it might be inactive.

73
00:06:02,463 --> 00:06:08,041
Let's set its background color to
something a little bit darker.

74
00:06:08,041 --> 00:06:15,002
So I'll double-click that so that I
have selected, see this input here, and

75
00:06:15,002 --> 00:06:20,389
then I want to actually select
this rectangle just below it.

76
00:06:20,389 --> 00:06:27,453
You can use the Layers panel to do this,
And let's change the Fill color.

77
00:06:27,453 --> 00:06:32,580
And of course you can choose
all manner of fill colors for

78
00:06:32,580 --> 00:06:36,302
this, as long as it's a little darker.

79
00:06:36,302 --> 00:06:41,507
I'm actually going to once again
type in a specific hex value.

80
00:06:41,507 --> 00:06:49,115
It's 1790C6, Enter.

81
00:06:49,115 --> 00:06:55,256
It's a nice kind of desaturated,
bluish green there.

82
00:06:55,256 --> 00:06:59,371
Looks nice, and that's much better.

83
00:06:59,371 --> 00:07:02,758
Now, let's zoom back out, and

84
00:07:02,758 --> 00:07:08,284
let's make this example
text a little bit lighter.

85
00:07:08,284 --> 00:07:13,100
It will make it more difficult to read,
but it should actually look like

86
00:07:13,100 --> 00:07:17,435
it's inactive, giving the user
a hint that if they click here,

87
00:07:17,435 --> 00:07:21,402
the example text will disappear and
move out of their way.

88
00:07:21,402 --> 00:07:27,428
So let's select this cake,
donuts, and popsicles,

89
00:07:27,428 --> 00:07:33,978
and we'll change the Fill color
over here from 3s down to,

90
00:07:33,978 --> 00:07:38,432
let's say, 9s, so 999, 999,

91
00:07:38,432 --> 00:07:43,688
6 nines, and then same thing for
City and ZIP.

92
00:07:49,423 --> 00:07:50,375
Here we go.

93
00:07:50,375 --> 00:07:57,602
Moving down the page, the text for the
blog and the two headers looks too light.

94
00:07:57,602 --> 00:08:03,920
Let's make those darker to match
the color of the labels Find and

95
00:08:03,920 --> 00:08:08,951
Near in the Search bar, so
Select New in your City,

96
00:08:08,951 --> 00:08:15,152
and let's change the fill to 3s,
1, 2, 3, 4, 5, 6.

97
00:08:15,152 --> 00:08:21,706
And same thing from the blog text,
change that to 3s.

98
00:08:21,706 --> 00:08:24,962
1, 2, 3, 4, 5, 6.

99
00:08:24,962 --> 00:08:26,067
Here we go.

100
00:08:29,500 --> 00:08:31,910
That's much better, much easier to read.

101
00:08:31,910 --> 00:08:36,384
And in fact,
this text looks too light as well.

102
00:08:36,384 --> 00:08:38,955
I'm going to change that.

103
00:08:41,126 --> 00:08:43,694
Much better, that's much easier to read.

104
00:08:43,694 --> 00:08:47,570
Finally, this footer works well enough.

105
00:08:47,570 --> 00:08:52,066
It could have a little bit more contrast,
but what it really is

106
00:08:52,066 --> 00:08:57,007
missing is some kind of coloring
that brings this branding into it.

107
00:08:57,007 --> 00:09:01,853
So it's pretty bland right now, and
it feels disconnected from the rest

108
00:09:01,853 --> 00:09:06,793
of the site, which is now more colorful
and fun, like dessert should be.

109
00:09:06,793 --> 00:09:11,448
So let's pick up,
maybe say some of that purple color from

110
00:09:11,448 --> 00:09:15,257
the logo text down
the bottom of this gradient.

111
00:09:15,257 --> 00:09:17,193
So I'll select this footer, and

112
00:09:17,193 --> 00:09:20,719
in the Layers panel I am just
going to open up this footer, and

113
00:09:20,719 --> 00:09:25,788
let's scroll down to this rectangle here
that's behind all these other text layers.

114
00:09:25,788 --> 00:09:33,250
And let's change this Fill
color to a purple-y in color.

115
00:09:33,250 --> 00:09:35,895
Once again I have a hex value picked out.

116
00:09:35,895 --> 00:09:41,774
I'll type 7A5695,

117
00:09:41,774 --> 00:09:45,252
and hit Enter.

118
00:09:45,252 --> 00:09:46,169
There we go.

119
00:09:46,169 --> 00:09:50,422
It's a nice dissaturated purple color.

120
00:09:50,422 --> 00:09:57,063
Now let's zoom out, and
I'll close the Layers panel.

121
00:09:57,063 --> 00:10:00,796
And when you're done, save your work.

122
00:10:00,796 --> 00:10:05,545
Now, let's compare this
to where we started.

123
00:10:05,545 --> 00:10:09,955
I'm going to open up the original
starting document, and

124
00:10:09,955 --> 00:10:12,747
I'll switch back and forth for you.

125
00:10:20,761 --> 00:10:26,039
So this is where we're at right now, And

126
00:10:26,039 --> 00:10:28,943
this is where we started.

127
00:10:28,943 --> 00:10:31,747
So I'm going to switch back again.

128
00:10:31,747 --> 00:10:36,344
And it's always good to just
kind of review everything,

129
00:10:36,344 --> 00:10:40,955
make sure you're happy with
how everything is laid out.

130
00:10:40,955 --> 00:10:46,374
I feel like forums, looking at it now,
is a little far away from right of review.

131
00:10:46,374 --> 00:10:51,327
I probably put it there just because
the grid made it look like it was

132
00:10:51,327 --> 00:10:53,813
further away than it really was.

133
00:10:53,813 --> 00:10:56,436
So let's adjust that a little bit.

134
00:10:59,096 --> 00:11:01,376
So that looks good.

135
00:11:01,376 --> 00:11:04,905
There, actually I'm going to
move it just a little closer.

136
00:11:04,905 --> 00:11:08,800
There we go,
that looks like the same spacing there.

137
00:11:08,800 --> 00:11:11,518
And I'm rereading this again, and

138
00:11:11,518 --> 00:11:17,054
we actually introduced another mistake
while we were fixing a mistake.

139
00:11:17,054 --> 00:11:21,252
Have you ever enjoyed great dinner?

140
00:11:21,252 --> 00:11:25,591
We should actually say have you
ever enjoyed a great dinner,

141
00:11:25,591 --> 00:11:29,599
only to be disappointed by
the lack of dessert options?

142
00:11:29,599 --> 00:11:31,853
Or worse, no dessert menu at all?

143
00:11:31,853 --> 00:11:35,986
That's why we're launching ZERTS,
the first search engine and

144
00:11:35,986 --> 00:11:39,983
restaurant review site that
focuses exclusively on dessert.

145
00:11:39,983 --> 00:11:41,606
Okay, there we go.

146
00:11:41,606 --> 00:11:48,368
So let's Save that, and
we'll flip back again.

147
00:11:50,283 --> 00:11:53,081
Let me make sure the zoom
level is the same here.

148
00:11:53,081 --> 00:11:58,984
So that's where we started,
And here's where we're at now.

149
00:11:58,984 --> 00:12:00,769
Looks a lot better.

150
00:12:00,769 --> 00:12:06,030
Notice how after our adjustments,
the site has a lot more clarity,

151
00:12:06,030 --> 00:12:10,090
both in terms of a clean,
hierarchical layout, and

152
00:12:10,090 --> 00:12:13,521
in terms of legibility and color contrast.

153
00:12:15,043 --> 00:12:19,459
What fascinates me about design
is that often times small

154
00:12:19,459 --> 00:12:21,949
changes can make a huge impact.

155
00:12:21,949 --> 00:12:26,750
It doesn't seem like we did a whole
lot and mechanically we really didn't.

156
00:12:26,750 --> 00:12:30,262
We wrote a little bit of text,
we moved some things around, and

157
00:12:30,262 --> 00:12:31,664
we changed some colors.

158
00:12:31,664 --> 00:12:33,221
But the impact is pretty huge.

159
00:12:33,221 --> 00:12:38,100
That's because design is more than
the sum of its individual parts.

160
00:12:38,100 --> 00:12:43,150
Cohesive fonts, colors and
elements that are aligned with

161
00:12:43,150 --> 00:12:48,809
one another on a grid all come
together to form a complete picture.