This 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.

At the top, let's get this login

link to line up with the other links in the nav bar.

When text like this shares vertical alignment and has the same colors and

fonts, it can implicitly indicate a relationship without the use

of a literal bar or box that separates them from other page elements.

So let's select this and I'm just going to move it up, and

that looks like it is lined up with write a review and forums, so there we go.

We'll work on the horizontal alignment a little bit later.

Next, I feel like the font size on these is a little bit large,

their links and they're not labeling anything below them.

But, they're large enough that they could look like headers.

So, let's reduce the size of these from it looks like they're 18 down to about 16.

So, all change this to 16 and inspector,

and I'll select forms there, and write a review.

And then finally, we'll select sign up there, make that a little smaller and

then let's make sure it still is perfectly centered inside of its button there.

There we go.

Another way to indicate hierarchical relationships with text is

to have a difference in font weight.

Along the search bar, the example text is the same color and

font weight as the label.

So, let's change them from bold to just regular,

so we'll do that on both pieces of example text,

And, we'll adjust the colors later on.

Working our way down the page, there is two headers,

New in Your City and From the Blog.

Which barely look like headers at all because of their placement and

font weight.

On the right side, From the Blog, should be bold, and the texts should be larger.

So, let's select that text and let's set it too bold,

and also the font size to 18 and hit enter.

That's much better, now it matches the New in Your City text,

Which is also size 18 in bold.

And with the New in Your City text selected, let's move that up.

And to the left, So

that it sits on the same horizontal line as From the blog.

Now looks like I'm not getting a smart guide here, so I'm going to zoom out.

And, one thing we can do in Adobe XD is we can drag guides from the top and

left side of the art board.

So I'm going to drag a guide from the top, and

I'm going to zoom in really close to From the Blog.

Just to try to get that guide right on the baseline of the font.

And then I'll zoom back into New in Your City and

we can move that down until it sits on the same line there.

There we go, that looks good to me.

And now, we can just drag that guide back to the top to get rid of it.

Finally this, Review text in each one of these boxes needs to be smaller.

Right now, it's even larger than the name of the restaurant,

which is the most important piece of information.

Generally, the most important thing should be the largest.

And to create a visual hierarchy, your font sizes and weights should start larger

at the top of a content section, and get smaller as they work their way down.

Just like the relationship between From the Blog and the actual blog post text.

So, let's put into that Review text, and

lets set the font size to 13.

So I'll change that.

And I'll change, That.

And of course, normally,

you would have to do some realignment when you adjust font sizes like this.

But I've actually aligned these already and

we just had to change a font size, so let's zoom back out.

And, I think this is looking a lot better.

So, that's it for our font adjustments.

When you're done, save your work.

Some of the most obvious design issues are resolved.

But, as we'll see in the next video, there's

actually more problems with this layout and one of them is actually quite major.