-: 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 gonna 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?
This 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.
Alright, 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 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 gonna experiment with those two.
So let's say 81st.
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 put it even further
to 96 pixels.
And this is even better like this.
So also there's 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 not right here.
So there's the margin top of 48
and let's put that to the next value, which was I think 64.
So 64 or maybe 80 and 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 where 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, 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 gonna 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 year.
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 would 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,
I copied and I'll 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 we need 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 best selling 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 cart 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 the 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 flex box
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 had 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 have seemed a little bit
unnecessary or too much, but if we add everything together
then all these 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.