Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
The layout is better than when we started, but it's unclear how some elements relate to one another. Some fonts are too large, others are too small, and their placement could be better to indicate a visual hierarchy.
This layout is better
than when we started but
0:04
it's unclear how some elements
relate to one another.
0:07
Some fonts are too large,
others are too small and
0:10
their placement could be better
to indicate a visual hierarchy.
0:13
At the top, let's get this login
0:18
link to line up with the other
links in the nav bar.
0:21
When text like this shares vertical
alignment and has the same colors and
0:26
fonts, it can implicitly indicate
a relationship without the use
0:31
of a literal bar or box that separates
them from other page elements.
0:36
So let's select this and
I'm just going to move it up, and
0:42
that looks like it is lined up with write
a review and forums, so there we go.
0:48
We'll work on the horizontal
alignment a little bit later.
0:57
Next, I feel like the font size
on these is a little bit large,
1:01
their links and
they're not labeling anything below them.
1:06
But, they're large enough that
they could look like headers.
1:11
So, let's reduce the size of these from it
looks like they're 18 down to about 16.
1:16
So, all change this to 16 and inspector,
1:22
and I'll select forms there,
and write a review.
1:28
And then finally, we'll select sign up
there, make that a little smaller and
1:36
then let's make sure it still is perfectly
centered inside of its button there.
1:42
There we go.
1:49
Another way to indicate hierarchical
relationships with text is
1:50
to have a difference in font weight.
1:55
Along the search bar,
the example text is the same color and
1:58
font weight as the label.
2:03
So, let's change them from
bold to just regular,
2:06
so we'll do that on both
pieces of example text,
2:12
And, we'll adjust the colors later on.
2:20
Working our way down the page,
there is two headers,
2:24
New in Your City and From the Blog.
2:28
Which barely look like headers at
all because of their placement and
2:30
font weight.
2:35
On the right side, From the Blog, should
be bold, and the texts should be larger.
2:36
So, let's select that text and
let's set it too bold,
2:43
and also the font size to 18 and
hit enter.
2:50
That's much better,
now it matches the New in Your City text,
2:57
Which is also size 18 in bold.
3:02
And with the New in Your City text
selected, let's move that up.
3:07
And to the left, So
3:12
that it sits on the same
horizontal line as From the blog.
3:16
Now looks like I'm not getting a smart
guide here, so I'm going to zoom out.
3:23
And, one thing we can do in Adobe XD
is we can drag guides from the top and
3:31
left side of the art board.
3:37
So I'm going to drag a guide from the top,
and
3:40
I'm going to zoom in really
close to From the Blog.
3:45
Just to try to get that guide
right on the baseline of the font.
3:48
And then I'll zoom back
into New in Your City and
3:53
we can move that down until it
sits on the same line there.
3:58
There we go, that looks good to me.
4:02
And now, we can just drag that guide
back to the top to get rid of it.
4:05
Finally this, Review text in each one
of these boxes needs to be smaller.
4:11
Right now, it's even larger than
the name of the restaurant,
4:18
which is the most important
piece of information.
4:23
Generally, the most important
thing should be the largest.
4:26
And to create a visual hierarchy, your
font sizes and weights should start larger
4:30
at the top of a content section, and
get smaller as they work their way down.
4:36
Just like the relationship between From
the Blog and the actual blog post text.
4:41
So, let's put into that Review text, and
4:47
lets set the font size to 13.
4:52
So I'll change that.
4:56
And I'll change, That.
4:59
And of course, normally,
5:04
you would have to do some realignment
when you adjust font sizes like this.
5:06
But I've actually aligned
these already and
5:12
we just had to change a font size,
so let's zoom back out.
5:16
And, I think this is looking a lot better.
5:23
So, that's it for our font adjustments.
5:26
When you're done, save your work.
5:29
Some of the most obvious
design issues are resolved.
5:33
But, as we'll see in the next video,
there's
5:36
actually more problems with this layout
and one of them is actually quite major.
5:39
You need to sign up for Treehouse in order to download course files.
Sign up