Lecturer: In this lecture we bring together
many of the things that we have learned
so far in this 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 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 of 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'll 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 then 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 white space strategically.
So as we learned before,
white space 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 white space around
this most important part of this page.
So on the left especially,
there is a ton of white space
basically around this sign up form.
While on the right side
there is a huge amount of white 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 white space.
Just follow the rules
that we learned previously about white space
and you're gonna be fine.
The point here is just
that we can use white space strategically
in order to make 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 white space
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 text has the same size, the same weight and color.
Only a little bit of white space 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 super host 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 white space, 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 white space.
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 text
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 compare the 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 font 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, that small and light subtitle 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 the attention 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 white space.
So all these components are really well designed
and therefore the visual hierarchy is also top notch.
And so again, nothing here is 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, subtitles,
links, buttons, data points, and icons.
And as we already saw in all the previous examples
we can also de-emphasize less important text
so things like labels or simply secondary information.
So again, that example that we worked on previously,
here we have the 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 text
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, icon, subtitle and link.
And here we have subtitle and the title and the icon.
And also the subtitle 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 subtitle
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 the 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 this very subtle gray.
Now, another one here are some icons,
some important data points,
and then this label 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 about 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 uses 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 row 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 that 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 now take a look at an example of each of them.
So this is an example of a testimonial
so of 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 this, 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 a bit earlier,
we can also highlight or emphasize an important row
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.