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