All language subtitles for 082 Implementing Whitespace and Visual Hierarchy.en_US

So let's now analyze and improve

the visual hierarchy in our small design

project by using white space

and also some other techniques that we just learned about.

Now, this is actually just a very small project,

and therefore we're not going to be able to do

all of the things that we just learned

over the last two lectures.

But, we can still analyze our visual hierarchy here

a little bit.

And then as I mentioned, also try to improve it.

So right, now there's already, of course,

some hierarchy going on.

For example, if you take a look here at this component,

so this header here.

Immediately, our attention goes here

to this big and bright image.

And then probably here to this big heading,

and then here to this button,

which has this nice background color,

which really makes this button here stand out,

and draws a lot of attention.

So a lot of the work on visual hierarchy

has already been done actually before,

simply by applying many of the other rules.

And if we move down here, it's the same.

So for example, here in this component here,

we already made this entire component here,

stand out a lot by adding this background color.

So by having this color,

it adds a nice contrast here to the rest of the elements,

so these two surrounding sections.

And so that draws a lot of attention once again,

to this more important section here.

So again, without even knowing it,

we actually already worked a lot on visual hierarchy here.

However, there is still a lot to do here

and mostly in the form of white space.

So the rules that we learned about white space,

two lectures ago,

are in many situations here not really applied yet.

For example, between the sections,

there is not a lot of white space at all.

So we have here this heading for this section down here,

but the distance between this heading and the content

of the section and the previous section,

which ends here, is kind of the same.

So the distance between this one here,

and this one, is kind of the same.

And so this is quite ambiguous spacing.

So, we don't really know

where this heading here belongs to.

And the same here, right?

Just kind of hangs in the middle

of these two pieces of content.

And so, that's not good at all.

And so remember that one of the very easy guidelines

in white space is that we should add a lot

or even a ton of white space between sections.

All right.

So let's go here to our CSS.

And so somewhere here,

we already have some rules about this white space.

And so that's right here.

So after the header and after the section,

there is a margin bottom of 48.

So, let's check that out here quickly,

just so we all know what we're talking about.

So, we have a header, right?

So, there's some space there,

and then we have the section.

And so, all of these then have a different spacing

to the bottom

now, right.

But now, let's actually dramatically increase this.

And so, just as we also learned

in a lecture about white space,

it is a good idea to use a fixed system,

so that we don't have to constantly choose, like,

random spacing values,

right.

So, we have 48 pixels right now.

So, all of this here is the spacing system

that I mentioned before.

And so let's increase that to 80 or even 96.

So, I'm going to experiment with those two.

So let's say 80 first.

Now, I need to manually reload this time.

And, yeah.

That looks better already.

So here it's really visible that there now

is a lot more space here,

and now this heading really belongs more to this section.

But, I think, we can actually push it

even further to 96 pixels.

And this is even better like this.

So also, there is now a nice space between this section

and the footer, and here as well, and here.

So that looks definitely a lot better.

However, if we now scroll up,

then there's a lot of space here below this image,

but not here on top of the image.

So, we should actually add some space here, as well.

So basically, at the top of this header.

So, let's see where that is.

Now, right here.

So there's a margin top of 48,

and let's put that to the next value,

which was, I think, 64.

So 64 or maybe 80,

and oh yeah, 64.

So that looks better.

Let's try 80,

but I think it will be too much.

Yeah.

So, it looks okay like this

because our page is actually quite tall,

but usually the browser

would be a little bit smaller, probably.

And then this would look maybe not so nice

because it wouldn't be vertically centered.

So let's put it back to 64.

And, I think that looks okay.

So that is space between sections,

which remember,

that's the way we want to add a ton of white space.

And so now let's take a look at white space

between different elements.

So here, we already also have some white space

to establish some hierarchy

because this button here kind of belongs

to this block of text, I would say.

And so therefore, the space here is less than here.

However, I think we could add some more space here

below this heading

to make it stand out even more.

So basically if there's more white space around it,

then it will stand out more from the rest of the content.

So that's 24 right now, and the next one would be 32.

So, that's probably good.

And again, of course, when you code on your own,

you'll have the system maybe somewhere else on your screen.

And then you don't have to scroll up and down

to see these values all the time.

So, that's even better now.

And so, let's move on to the next section and here again,

we have some ambiguous spacing.

So the space between the icon and the heading,

or this text here, is the same as

between this heading and this text.

And so that doesn't make a lot of sense

because this text here,

this heading, belongs more to this text

than to this element.

So that's the law of proximity there.

Remember that?

And so what I'm going to do is to add some more space

here to these icons.

So, here it is.

It is at 16 right now

and the same for the features title.

And so that's why it kind of sits here in the middle.

So let's push that up to the next value, which is 24,

as I know by heart.

And so, that is actually a lot nicer

simply by adding eight pixels of space.

And moving on, here we have our next section.

And here we can also add some more visual hierarchy

between these three text elements.

So actually there's already some hierarchy going on

with the most important part here, bigger and bolder.

And then the name of these two ladies, Mary and Sarah,

this text is already smaller than the testimonial itself.

Right?

However, we can also try to make it a little bit darker.

And remember actually the technique that I mentioned

way back when we talked about colors,

where we can make the color of text inside a,

like a bright colors block, like this one here,

basically adapt to that background color.

So what I mean is to basically give this white text here,

some very, very light green color.

And so then the contrast between this bright green here

in the background and the white will not be as big,

and it will look a little bit more natural.

So hopefully, you still remember that trick

that I mentioned before.

But of course, you can always go back and check that out.

Now in order to actually get that very light green color,

we should go back to open colors

where we got that color in the first place.

So open color, I don't know if that will be enough,

but it is.

And anyway, if you didn't find it this way,

as always, you can just go to my resources page.

But anyway, let's not try out this very first tier.

So this teal zero,

which as you see here is really, really light.

So, the difference will be very subtle.

But these small subtle effects can make all the difference

if you want to create a very polished looking design.

So, that will be in the testimonial text,

I think.

Let's see.

Yeah, so that's the one.

So let's give it a color that we just copied.

And, now take a close look here at that text.

And while it does look almost the same as before,

but if you compare it with this one here,

then you can notice a subtle difference.

And that's going to become even more important

because now we will choose another green color

for this one here and a darker one.

And so then that will create some contrast

between these two elements

and establish a nice visual hierarchy right there.

So way to select this here testimonial author,

we don't have that yet.

Can actually double click here and copy that from here.

And then let's get here the next color.

So this one.

And.

And now let's see what happens.

And, yeah.

So here, you can actually see that this is

quite a green already.

It's not just as white as it was before.

And so this creates now, as I mentioned before,

some nice contrast between this text and this one.

And so the visual hierarchy is now even better established.

And now finally moving on here

to our card section with the bestselling chairs.

There's also some stuff that we can fix here

because once again, we have some ambiguous spacing here.

So here, inside these cards,

we have basically three parts.

We have the heading.

Then, we have these four bullet points here.

So these four pieces of information, and then down here,

we have, like, the rest of the card,

which is the price and this button.

Now, right now,

the space here between all of this

is basically all the same.

So if you take a look,

then the space here between these two pieces of information

and this section here in the end is exactly the same.

And even here, it looks very similar.

And so that doesn't make a lot of sense

in terms of visual hierarchy.

So, we want this block,

so this list here basically, to be a bit more separate

from the rest of the two pieces of content.

So this one and this one.

And so probably, we should decrease the spacing here

a little bit.

All right.

And actually, before we do that,

we should add some more padding as well

because the space here inside of this card

is really quite small.

So, we can push it to the next level,

which is 32 pixels.

And so, this looks a lot better

with one simple change of the padding.

And so now, let's decrease that spacing here

between these list items, as I was mentioning.

So, there's 24 pixels right now.

So, let's take that down to 16.

Right.

And so before, they looked a little bit detached, too.

But now, to my eye at least,

they look a little bit more related to one another.

And now finally,

let's also add some more space here

between this list and this part down here.

So, let's see

what we're actually looking for here.

So it's the chair details and a chair price.

So let's go to the chair details

and change that here a lot.

So here, we can maybe push it even to 48 pixels.

So yeah, that looks a lot better once again.

But not only does it look better, but it also works better.

So the design, like this

makes a lot more sense because the visual hierarchy

is now better established.

And so it's now easier for the user

to figure out what they can do here

in this cart.

Now, there's some alignment problem here

that I just noticed.

So, this chair price here uses flexbox.

But, we do not vertically align these, right?

So let's quickly do that in the chair price.

So let's align items, remember.

Set that to center.

Nice.

So that's fixed now.

And I think with this, we are actually done.

So if we take a look at our final product,

which at this point is actually finished,

so we applied all the design rules to this project

right now.

And so I think, that it is a whole lot of difference

between what we had in the beginning and what we have now.

And all we did was to add a couple of lines of CSS,

and followed a couple of design guidelines

that I have been showing you throughout this section.

And once more, I want to emphasize

just how big of a difference

all these small changes together can make.

So each of these individual adjustments

that we did over time here,

maybe might've seemed a little bit unnecessary

or too much.

But if we add everything together,

then all the small details make all of the difference.

And so we end up with a nice design

that makes sense and is easy to use.

So hopefully, you can take that as one of the main takeaways

from this section, as you start creating your own designs.

But anyway, this project here is now finished,

but there's actually still some more things

to learn in this web design section.

And so, let's go now to the next lecture

which is all about user experience.