In this video, we're going to practice visual hierarchy. 1
We're going to take the content from that Lawyer website. And apply whatever we have already learned 2
about visual hierarchy and alignment, and practice it and apply to our example. 3
It's a follow-along video so fire up your Figma. Go to the Figma file that I have linked in the resources. 4
The files that I link should automatically create a copy in your account, 5
once you log in. If next to the file name it says View Only, that means it didn't duplicate. 6
You'll need to create a copy of the file before you can edit. Next to the file name, 7
click the arrow and select Duplicate to your Drafts. That will create a copy of the file in your Figma account 8
and you'll be able to edit the file as you wish. 9
Now, let's give this design another redo. 10
We just need to apply what we've already learned so far. 11
You'll see how thinking about hierarchy and alignment is going to take care of most of the designing 12
for us. 13
Let's start with our grid. 14
Remember how to add that? We have to select the frame first and then the layout grid option will appear 15
in the properties panel. 16
Just like the last time. Columns - twelve, 30 pixel gutter, 17
but 60 pixel margin this time, because we're using a smaller MacBook frame instead of the desktop. 18
The navbar fits perfectly on the edges of this grid, because this is exactly what I was using when 19
designing the navbar. 20
For that reason, we can leave the navigation bar in its position. 21
You'll see, that links in the navigation bar don't align with grid columns, but that's all right. 22
As I said before, grid is a guideline not a forceful rule. 23
We don't always have to take it literally. If we align the button and the links to columns, 24
in this case, we wouldn't get the best results. 25
For example, one column is too small for the button and two columns are too big. 26
Let's think about the visual hierarchy. 27
Remember what's the name for the visually 28
most interesting object? The focal point. Using the photo as a focal point is a good idea. 29
When you have photos, especially of people, usually it's a great idea to make them the focal point. 30
So how do we do that? 31
Last time I used some tricks to draw more attention to it, 32
but we can go simpler than that. 33
Making it very large always works. Want something to be noticed? 34
Make it big baby. 35
Simple as that. Because it's a vertical photo, as you can see, it doesn't make a good background photo. 36
Instead we can use it on the half of the screen. 37
Ok, so this photo is covering up the navigation bar. Remember the layers panel? 38
Since it's a higher layer it covers up everything underneath. 39
We need to move it below the navbar. 40
We can do that by either dragging it in the layers panel, but easier way is to use an option that does 41
this for us. Right-click on the photo and select Send to Back. 42
This will send photo all the way to the back. 43
Now the number is on top, but because navbar text is dark we can't see anything. 44
Let's fix this. 45
I'm going to disable the grid layout, so I can see better what's going on. 46
We can turn that off for the entire document from here, but you'll see me often use a shortcut. 47
Let's now make the navbar links white. 48
Good. 49
Let's do something similar with a button. 50
It's not very visible. 51
I could, of course, flip the colors, make the button white and text dark. But a better-looking option in this case 52
is to use either a ghost button, or a semi-transparent one. 53
Change the background fill to white and decrease the opacity of the color fill to about 10% to 20% 54
percent. 55
I really like these semi-transparent buttons. 56
They have a very slick look to them. 57
You can see how our design is starting to take in much better shape with very simple modifications. 58
We have an undeniable focal point of this composition. 59
Now, let's organize our content better and create a visual hierarchy between them. 60
First, let's align them to the left and fit them into a grid. 61
Now we have to decide on what is going to be our primary message. 62
We have to start thinking a bit deeper about our goals of the website and the visitors. 63
Being a designer isn't just making things look pretty. Often it's thinking about the goals of your design 64
and how to achieve those goals most effectively. 65
A hero section of almost every website has to answer 3 questions for the user. 66
What is this website about? 67
What am I going to get out of this Web site? 68
And how do I get it? 69
The first question is: "What is this website about?" 70
Well, it's about Vincent Schwartz, who is a Boston Divorce Attorney. Now, out of this 2 information: his 71
name and Boston Divorce Attorney, 72
which one is more important? 73
This can depend on some other factors, for example, if he is a well-known lawyer then his name would 74
be more important to show first. 75
If he isn't known, then it's more important to show that this page is about Boston Divorce Attorney. 76
Let's say, we know from the client, that his name is an important information and needs to be displayed 77
as the primary info. In that case, we're going to make the name big and bold. 78
I'm going to go much bigger this time because the focal point, the photo, is so much more prominent that 79
I can afford a bigger text. In my previous example, I couldn't go too big, because the photo was 80
smaller. 81
For the headline font, I have chosen Playfair Display font and used the Black style, which is its heaviest 82
form. 83
There is an entire section of this course dedicated to typography. 84
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 85
look great. In this exercise you can choose whatever font you like, but pay attention to how you choose the 86
weights and sizes of these fonts. 87
The weight of the font can be selected from here. How many options you get here depends on the font family 88
and how many weights does it come with. 89
Ok, as I have chosen a big and heavy style for the name, I'm going to do the opposite for the Boston Divorce 90
Attorney text. 91
I'm going to keep whatever font it was and choose a light style and make it even smaller. 92
The subtitle definitely doesn't compete for the attention, the name gets all the spotlight which is 93
exactly what we want. 94
The hierarchy between the two is clear. Next, 95
let's adjust the paragraph text. 96
I'm going to decrease the text size a little more. 97
And that's it. 98
The button I will leave as it is. 99
I would just make it smaller. 100
And that's going to be enough to decrease its importance, 101
that's all. 102
It's looking pretty neat. 103
How about the hierarchy? 104
Do we have a focal point? 105
You bet we do. 106
How about the rest of the elements? 107
We have our headline, that is visually the most noticeable text. 108
And then the rest of the elements with different degrees of visual importance. And that's it. 109
If you haven't been following along, now it's your turn. 110
Feel free to deviate from our version if you prefer it. 111
The important thing is to reach two goals. Which is: A to have a focal point and B to have different levels 112
of visual importance between other elements. 113
The rest is up to you. If you want to use different colors, 114
no problem. 115
Different fonts, different arrangement or you can recreate my version pixel to pixel. 116
Doesn't matter. 117
The important thing is you start thinking like a designer and start noticing and have visual hierarchy 118
in your mind at all times.