All language subtitles for 6. Practice Visual Hierarchy

In this video we're going to practice visual hierarchy.

We're going to take the content from that lawyer Web site and apply whatever we have already learned

about visual hierarchy and alignment and practice it and apply to our example.

It's our follow along video so fire up your bigmouth go to the FEMA file that I have linked in the resources

the files that link should automatically create a copy in your account.

Once you log in if next to the file name it says view only that means it didn't duplicate.

You'll need to create a copy of the file before you can add it next to the file name.

Click the arrow and select duplicate to your drafts that will create a copy of the file in your fig

may account and you'll be able to edit the file as you wish.

Now let's give this design another redo.

We just need to apply what we've already learned so far.

You'll see how thinking about hierarchy and alignment is going to take care of most of the designing

for us.

Let's start with our grid.

Remember how to add that we have to select the frame first and then the layout grid option will appear

in the properties panel

just like the last time columns twelve thirty pixel gutter

but 60 pixel margin this time because we're using a smaller MacBook frame instead of the desktop.

The now bar fits perfectly on the edges of this great because this is exactly what I was using when

designing the now bar.

For that reason we can leave the navigation bar in its position.

You'll see that links in the navigation bar don't align with great columns but that's all right.

As I said before creed is a guideline and a forceful rule.

We don't always have to take it literally if we align the button and end links to columns.

In this case we wouldn't get the best results.

For example one column is too small for the button and two columns are too big.

Let's think about the visual hierarchy.

Remember what's the name for the visual.

The most interesting object the focal point using the photo as a focal point is a good idea.

When you have photos especially of people usually it's a great idea to make them the focal point.

So how do we do that.

Last time I used some tricks to draw more attention to it.

But we can go simpler than that.

Making it very large always works on something to be noticed.

Make it big baby.

Simple as that because it's a vertical photo as you can see it doesn't make a good background photo.

Instead we can use it on the half of the screen.

OK so this photo is covering up the navigation bar remember the layers panel scenes.

It's a higher layer it covers up everything underneath.

We need to move it below the now bar.

We can do that by either dragging it in the layers panel but easier ways to use an option that does

this for us right click on the photo and select sand to back.

This will send photo all the way to the back.

Now the number is on top but because now about taxes dog we can't see anything.

Let's fix this.

I'm going to disable the grid layout so I can see matter what's going on.

We can turn that off for the entire document from here but you'll see me often use a shortcut.

Let's now make the now bar links White

Good.

Let's do something similar with a button.

It's not very visible.

I could of course flip the colors make the button white and text da but a better looking option this

case is to use either a ghost button or a semi transparent one.

Change the background feel to white and decrease their passive t of the color feel to about 10 to 20

percent.

I really like this semi transparent buttons.

They have a very slick look to them.

You can see how our design is starting to take in much better shape with very simple modifications.

We have an undeniable focal point of this composition.

Now let's organize our content better and create a visual hierarchy between them.

First let's align them to the left and fit them into a grid.

Now we have to decide on what is going to be our primary message here.

We have to start thinking a bit deeper about our goals of the Web site and the visitors.

Being a designer isn't just making things look pretty often it's thinking about the goals of your design

and how to achieve those goals most effectively.

A hero section of almost every Web site has to answer three questions for the user.

What is this Web site about.

What am I going to get out of this Web site.

And how do I get it.

The first question is what is this Web site about.

Well it's about Vincent Schwartz who is a Boston divorce attorney now out of this to information his

name in Boston divorce divorce attorney.

Which one is more important.

These can depend on some other factors for example if he is a well-known lawyer then his name would

be more important to show first.

If he isn't known then it's more important to show that this page is about Boston divorce attorney.

Let's say we know from the client that his name is an important information and needs to be displayed

as have as the primary info in that case we're going to make the name big and bold.

I'm going to go much bigger this time because the focal point the photo is so much more prominent that

I can afford a bigger text in my previous example I could I couldn't go too big because the photo was

smaller

for the headline font I have chosen play for a display phone and use the black style which is its heaviest

form.

There is an entire section of this course dedicated to typography.

It's a big topic in design and you'll learn a lot on how to choose fonts in a way to make your designs

look great in this exercise you can choose whatever font you like but pay attention how you choose the

weights and sizes of this fonts

the weight of the font can be selected from here how many options you get here depends on the font family

and how many weights does it come with.

Okay I have chosen a big and heavy star for the name I'm going to do the opposite for the Boston divorce

attorney text.

I'm going to keep whatever font it was and choose a lifestyle and make it even smaller

the subtitle definitely doesn't compete for their attention the name gets all the spotlight which is

exactly what we want.

The hierarchy between the two is clear next.

Let's adjust the paragraph tax.

I'm going to do decrease the tax size a little more.

And that's it.

The button I will live as it is.

I would just make it smaller.

And that's going to be enough to decrease its importance

that's all.

It's looking pretty neat.

How about the hierarchy.

Do we have a focal point.

You bet we do.

How about the rest of the elements.

We have our headline that is visually the most noticeable tax.

And then the rest of the elements with different degrees of visual importance and that's it.

If you haven't been following along now it's your turn.

Feel free to deviate from our version if you prefer it.

The important thing is to reach two goals which is a to have a focal point and b to have different levels

of visual importance between other elements.

The rest is up to you if you want to use different colors.

No problem.

Different phones different arrangement or you can recreate my version pixel to pixel.

Doesn't matter.

The important thing is you start thinking like a designer and start noticing and have visual hierarchy

in your mind at all times.