All language subtitles for 081 Web Design Rules 8_ Visual Hierarchy.en_US

In this lecture,

we bring together many of the things

that we have learned so far in the section

in order to create something that we call visual hierarchy.

So let's see what visual hierarchy is all about.

And essentially, visual hierarchy is all about establishing

which elements of a certain design

are the most important ones.

So that's exactly what hierarchy means, right?

So essentially, we need to establish a hierarchy of elements

in order to draw attention to the most important ones

of these elements.

And doing this is actually one of the best ways

to make a layout actually look designed.

So oftentimes, an interface looks way more pleasing

simply because the visual hierarchy

is very well thought out and conveyed to the user.

But before moving on,

let's quickly look at an example here.

Now, even without having learned anything

about visual hierarchy,

we can kind of intuitively see that the photos in the top

and the booking box draw the most attention on this page,

right?

And so again, establishing visual hierarchy

is basically giving more prominence

to these more important elements.

And the reason why it is this way

is that the visual hierarchy

has been correctly established

by a combination of position, colors, shadow,

border, and other elements.

And so that's why I also said

that this lecture is basically gonna be a culmination

of everything that we have learned before.

But anyway, moving on a little bit,

visual hierarchy is also about defining a path for our users

in order to guide them through the page in an intuitive

and kind of automatic way.

So imagine that a user enters this page,

the attention will probably immediately fall

on this big block of images here.

Then after that,

the attention will go to this other important element

such as we had highlighted to before, right?

Then from there, it might go to this button

because of the very bright color,

and only then the attention of the user might jump

here to the center part.

So to the top, probably off this part,

and then here going down a little bit further

reading all this text and only then in the very end,

the attention might jump finally to this very small element

that is here at the very bottom and with a small text.

So as I had briefly mentioned already,

what we do in order to establish

a meaningful visual hierarchy

is to use a combination of position, size, colors,

spacing, borders, and shadows.

And so the goal of this lecture is basically to show you

how you can do exactly that.

So establishing a good visual hierarchy

between elements and components.

Now just as another example,

imagine that we didn't have borders and shadows

in this example.

So then, it would look like this,

and all of a sudden, the flow that we had before

would be kind of lost.

So the user maybe wouldn't really know anymore

where to look after scanning the images.

However, we do want our user to go to that reserve box.

And so that's why this element was before

featured so prominently.

But anyway, we can even take it one step further

by even removing the color from this component.

And so now the visual hierarchy is completely lost

and the interface, all of a sudden

doesn't look so well designed anymore, right?

So just two or three simple changes that we did here,

and suddenly, the design has a completely different look

and feel.

But of course, we want to avoid that

when creating our own designs,

and so let's now go learn how.

So starting with the very fundamentals,

the first guideline that I have for you

is that you should position important elements

closer to the top of the page

because that is where they get the most attention.

So people usually read a page from top to bottom,

and so therefore elements that appear first on a page,

so closer to the top will naturally get more attention.

Now of course, there are many other factors involved

in drawing attention,

so not just the position related to the top of the page,

but in general, attention flows from the top to bottom,

so basically just like a river,

and that applies to the overall page,

but also to individual components.

So in this example here,

the first thing that the user might maybe notice

is that logo there, then the navigation

and then immediately it will go for this main heading here.

And so since this is the most important heading,

it should be as close as possible to the top of the page.

Then from there, attention will of course keep flowing down.

And here we also see that we have this really important

call-to-action button.

And so your very first call to action button

should also be as close as possible to the top of the page.

Now, next up, it's important to be aware of the fact

that images draw a lot of attention,

and so therefore, you need to use them mindfully.

So in this small component,

the attention will probably immediately fall on the image

and only then go here to this heading

and then to the button.

And so if we really, really wanted our user

to read the text,

then maybe we should consider not using the image at all

or making a smaller image,

because smaller images draw a little bit less attention.

Then the next one here is from Instagram

where probably this first profile picture

draws the most attention,

and then from there,

it will immediately go down here to these images,

and maybe Dan from there,

the attention might flow back up to these other information

like followers, description and so on and so forth.

Another way to emphasize elements or groups of elements

is to use whitespace strategically.

So as we learned before,

whitespace creates separation between elements

or groups of elements,

and so therefore, it is also extremely important

in order to correctly define a visual hierarchy.

So for example, in these two designs,

they have a lot of whitespace around

this most important part of this page.

So on the left especially, there is a ton of whitespace

basically around the sign up form,

while on the right side,

there is a huge amount of whitespace between the two rows

and also really around these five feature blocks.

Now I don't mean of course,

that you should always surround everything

with this much whitespace,

just follow the rules that we learned previously

about whitespace and you're gonna be fine.

The point here is just that we can use whitespace

strategically in order to make it important elements

stand out.

Okay.

And now, we're gonna start focusing only on text elements,

so learning how and when we can make different text elements

more or less prominent,

because this is actually one of the most important things

of doing visual hierarchy on a smaller level.

So for example, inside of a component.

So for text elements,

we can use a combination of font size, font weight,

color and whitespace to give elements

different levels of importance.

And by color, I mean both text color and background color,

like for example, on buttons.

And let's study again, the example from the beginning,

so this one here.

And so at the very beginning, we have no hierarchy at all,

all the texts has the same size, the same weight and color,

only a little bit of whitespace has already been added.

Now as a first step of improving this,

we can increase the font size a little bit on the title,

which is the most important piece of content here.

Next up, we can increase the font weight,

for example, on the location, the heading again,

and also the rating of 5.0.

So this is looking quite nice already,

there is definitely a lot more visual hierarchy than before,

but we can even make this better to make it perfect.

So basically the final step is to lighten some of the colors

in order to give them a little bit less importance.

So here, the superhost label, the location,

and also the number of ratings has actually been lightened

in order to give them less prominence

than the rest of the content.

And let's check out another example here,

which is this one where at the beginning,

all the text is at 20 pixels

and there is no hierarchy at all,

there is no whitespace, no color, no font weight,

and really nothing.

So in order to improve this,

we can change the font sizes a little bit

and add some whitespace.

So now there are a lot of different font sizes here

according to the importance of each of the elements.

So already looking a lot better, but to make it perfect,

we can also add some font weight and some color.

So what we did here was to emphasize some of these elements

by making them bold,

then we added also some color to emphasize this link,

and finally, we once again made some less important texts

a little bit lighter.

And so with this, it becomes de-emphasized

which is a technique that we use all the time

to build a nice visual hierarchy like this one.

So the content is the same,

but compared to left with the right design,

it's really all about using these techniques

in order to establish a visual hierarchy,

nothing more and nothing less than that.

And all of a sudden, it looks really well-designed,

doesn't it?

And since this is so important,

let's look at a couple of other examples,

but this time analyzing only the flow.

So here it's probably, again,

the image who is going to draw the most attention

and only then our eyes are going to move

to that headline here,

and followed then by this colored button here

in the bottom.

So this has this eye-catching background color,

and therefore, it draws a lot more attention than the text

that is between the headline and this button.

Then we might look at the price

and the other pieces of content that are here.

Now of course, these flows will be different

for different people,

but I'm just describing what I think

makes more sense for the average user.

Then another example of a well-designed visual hierarchy

is this one, where again, we start at the very top,

but then our bright blue button here in the bottom

will draw our attention.

From there, we might move to this bold text here.

So again, the different weight is used here

in order to draw attention, right?

And only then in the end,

we might go to this de-emphasized text,

which is a bit lighter and also has less font weight.

Then another one where we have a more classical

top to bottom flow,

however it gets small and light sub-title

that says work-03, is not really drawing any attention

because it's so light and so thin and small.

So that's why we skipped it because I think that many users

will actually skip that and jump straight into the headline

with their attention.

Now here then we have this nice and subtle background color

which makes this piece of content stand out a little bit,

so otherwise, maybe the attention would immediately go

to that image.

But like this, maybe we will first stop here,

and then after that, we might look at the image

and then the rest of the content here.

Finally, just another one,

and, well here we just start here with this really big text,

then probably, we might go to this text

that is a little bit smaller,

and then here we have this bright color,

which I think draws a lot of attention,

and so I think detention might jump there next,

and only then, we go to this small text

followed by this other even smaller text

that's right here at the bottom.

So here in this example, once again,

you can really start seeing now why designers

took the decisions that they did with the size,

weight color, and also whitespace.

So all of these components are really well-designed

and therefore the visual hierarchy is also top-notch.

And so again, nothing here is a random,

all the design decisions make sense

because the designer wanted to establish a visual hierarchy

to guide the user.

But now you might ask,

what elements should we actually emphasize?

Well, we should emphasize contents like titles,

sub-titles, links, buttons, data points, and icons.

And as we already saw in all the previous examples,

we can also, de-emphasize less important texts,

so things like labels or simply secondary information.

So again, that example that we worked on previously,

here, we have to title, which is really emphasized,

we have an icon, which is emphasized by the color,

then we have a really important data point,

which is this rating, and that's why it is bold.

Here is a link,

and finally, there is some less important text here.

So some additional information that on purpose,

we made lighter in order to de-emphasize it, all right?

So these are basically the types of texts

that are important to think about

when we create visual hierarchy.

And let's take a look at a couple of more examples.

So again, I can sub-title and link.

And here, we have sub-title and a title and the icon,

and also the sub-title here.

And I'm going through these examples a lot faster now

because as I mentioned before,

I actually want you to download these lectures as PDF slides

so that you can then study them on your own

and get a lot of inspiration

for when you start building your own designs.

So you shouldn't just watch this video and call it a day.

It's very important to also really analyze

all of these examples one by one,

because I did choose them very, very carefully

with tens or probably hundreds of hours of research,

all right?

But anyway, let's take a look at a couple more.

So here again, we have a sub-title

and a couple of very important data points,

so in this case that's prices,

and so therefore, they are bold and bigger

than the rest of the text,

and I think they're even darker.

Then here, we also have some additional information

once again,

so just telling customers that this is for European cards,

and therefore this text is a lot lighter and also smaller.

Then here, these icons are apparently quite important,

which is why they got this nice attention-grabbing color.

And then finally, there is this very subtle button,

so a button with a very subtle background color,

because if this was for example, green,

like the rest of the text here,

then that button would get all the attention.

But in this case apparently,

the designers wanted to focus to be on the prices

and not on the button,

and so that's why they basically took out

the green background color

and replaced it with is very subtle gray.

Now another one here are some icons,

some important data points,

and then this here is very nicely de-emphasized

by being super small, but still with this uppercase text,

which I think looks amazing actually.

Then here again, on Instagram,

there is a data point and then these buttons here

are actually really noticeable de-emphasized.

And the reason for that is that Instagram

doesn't want to take any attention away

from the photos, all right?

That's also why the mobile application

is completely white, basically,

except of course for all the pictures.

All right, so that was a lot to take in

about visual hierarchy for text elements,

but we're not done yet,

because now we need to talk visual hierarchy

between components,

so that's also super important.

And by components, essentially I mean groups of elements

or big areas of content.

So let's focus now on establishing visual hierarchy

between components,

and the way we do that is through a combination

of background colors, shadows, and border.

So let's take a look at an example.

And so here in this design,

this really bright background color

really makes this section completely stand out

from the rest of the page, right?

And the same is true here on this website.

So again, one big standout section

which is going to take all the attention right here,

and of course, that is on purpose.

So that's why they chose this color right here,

because that is where they want the user's attention to go.

And this second one actually not only uses background color,

but also a nice shadow,

you see that?

Then this one here also use a shadow

and it uses border as well.

So border and shadow, but no background color,

while this next one uses once again,

exclusively background color

to highlight this most important role of this table.

Now another common technique of emphasizing a component A

over a component B is by simply de-emphasizing

the component B.

So let's say right here, we have component A and B,

and we want to have component A stand out more.

So we could of course add maybe a border

or a shadow to the left one, so to component A,

but what we can also do is to simply de-emphasize

component B.

So it lost its background color,

and now component A has been made more prominent

by simply removing dead background color from component B.

And by the way, notice also that arrow that says free

close to the start now button.

So that is yet another way to basically emphasize

that start now button, right?

So that's not a technique I'm mentioning here

in this lecture, but it's still just another way

of drawing attention to that important button.

So here are some more examples of de-emphasizing

one component in order to emphasize the actual component

that we want the user to focus on.

Now, finally, just like with text elements,

you now might be wondering, what kinds of components

you should actually draw the attention to

when you're building your own designs?

Well, here I have a big list of some components

that we usually want to stand out

from the rest of our page's content.

And so let's not take a look at an example of each of them.

So this is an example of a testimonial,

so if someone talking about your own product,

basically by trying to advertising it,

then we have call to action sections,

which many times websites have like on the end of a page

so that the user signs up for their product

or their service.

Then, there are also highlight sections as I call them,

which are essentially big sections

in the middle of your content,

which we kind of want to stand out,

and so we simply can give them, for example,

a different background color like this design here does.

And here are two more examples of highlight sections,

and again, they use some different background color

than the rest of the page to really stand out there.

Then we also have preview cards,

which I had mentioned before already.

So basically previewing some kind of product,

for example, that you're trying to sell.

And so these again, many times should stand out

from the rest of the content

by using shadow or some kind of border.

Then there are also forms which can look like this,

or pricing tables where many times,

there are different pricing options,

and then the designer usually highlights the one

that they actually want the user to choose.

So that can be done using a background color,

but there are also many other options

that you can choose from

as I will show you a little bit later.

Because actually, we have an entire big lecture

all about different components.

And finally, as we already saw it a bit earlier,

we can also highlight or emphasize an important role

or an important column in a table.

And of course, this list of examples is not exhaustive,

there are many, many components

which can use some emphasizing, all right?

But this lecture is already running quite long,

and so let's actually implement some of these things

in the next lecture.

So I see you there after you hopefully finished studying

this lecture some more.