0 1 00:00:00,150 --> 00:00:02,370 We've got the mood board, we've got the wireframe. 1 2 00:00:02,490 --> 00:00:04,290 We're ready to design our home page. 2 3 00:00:04,290 --> 00:00:09,840 Let's create a new page and name it "Design". And copy the wireframe in here, because it's going to be easier 3 4 00:00:09,840 --> 00:00:15,290 for us to follow the wireframe, instead of going back and forth between pages. Next to it, 4 5 00:00:15,320 --> 00:00:18,200 let's add a new frame and our usual 12-point grid. 5 6 00:00:30,270 --> 00:00:30,570 OK. 6 7 00:00:30,580 --> 00:00:38,100 Let's find a background photo for our hero section. I quite like this photo, because it looks non-stock 7 8 00:00:38,140 --> 00:00:44,730 a bit more realistic. Shows that she's working remotely and she's happy because our team collaboration 8 9 00:00:44,730 --> 00:00:46,360 platform is just that good. 9 10 00:00:46,380 --> 00:00:52,590 The only problem is that she's centered. And we want to have a layout, where we can put content on the 10 11 00:00:52,590 --> 00:00:55,040 left and it's not overlapping with her face. 11 12 00:00:55,050 --> 00:01:00,060 If the photo is a good quality, then we are able to move her around and position her on the right side. 12 13 00:01:00,420 --> 00:01:06,510 I'm going to create a new rectangle, so we can mask the photo inside it and position it exactly the way 13 14 00:01:06,510 --> 00:01:09,250 we want it. 14 15 00:01:09,450 --> 00:01:12,520 I have included all the photos and assets in the project file. 15 16 00:01:12,520 --> 00:01:18,370 So if you want to reuse same photos, you can do that and you can find that on the Assets page. But if 16 17 00:01:18,370 --> 00:01:24,070 you want to, go for your own interpretation. And I would definitely recommend you to do that, find your 17 18 00:01:24,070 --> 00:01:26,340 own photos and use that one instead. 18 19 00:01:43,730 --> 00:01:44,360 Looks pretty good. 19 20 00:01:44,360 --> 00:01:49,930 There is a good amount of space, so we can put our content on the left. 20 21 00:01:50,000 --> 00:01:52,510 Now let's choose typography. This time, 21 22 00:01:52,520 --> 00:01:56,580 let's try to find a typeface that can work both on headlines and paragraph. 22 23 00:01:56,600 --> 00:02:01,220 Not for any specific reason, but just to practice. For these, we need to find something that is neutral 23 24 00:02:01,250 --> 00:02:06,040 because we're going to use it for a paragraph. And something that has a lot of weight variations. 24 25 00:02:06,080 --> 00:02:12,110 We can narrow that down in Google using number of styles. 6 styles, in reality, means 3 different 25 26 00:02:12,110 --> 00:02:15,640 weights. Because each weight has an Italic version with it. 26 27 00:02:15,680 --> 00:02:16,810 So that's not really enough. 27 28 00:02:16,820 --> 00:02:23,290 I'm going to go with at least 8 styles. 28 29 00:02:23,350 --> 00:02:26,860 This one is actually called Work Sans, might be a good option. 29 30 00:02:30,110 --> 00:02:31,480 Cabin isn't bad either. 30 31 00:02:36,050 --> 00:02:41,870 On the bottom here, you can switch this around, to see how it looks in a paragraph as well. I don't like 31 32 00:02:41,870 --> 00:02:46,940 Work Sans, how it looks inside the paragraph, it's quite nice in the headline but in a paragraph, it seems 32 33 00:02:46,940 --> 00:02:50,230 a little clumsy. Let's check Cabin. 33 34 00:02:54,700 --> 00:02:57,220 Yeah, paragraph looks much better on Cabin . 34 35 00:02:57,220 --> 00:03:03,010 Just a quick double check of the typeface manual. Remember? We always read the font manual, to avoid embarrassing 35 36 00:03:03,010 --> 00:03:04,210 choices. 36 37 00:03:04,290 --> 00:03:04,690 Excellent. 37 38 00:03:04,690 --> 00:03:06,470 All safe in the description. 38 39 00:03:06,480 --> 00:03:08,890 And now let's go apply that font to our page. 39 40 00:03:12,560 --> 00:03:14,150 Instead of creating it from scratch. 40 41 00:03:14,150 --> 00:03:16,640 I'm going to copy it from the wireframe in here. 41 42 00:03:16,640 --> 00:03:18,500 No need to reinvent the wheel every time. 42 43 00:03:35,240 --> 00:03:41,530 I'm just playing around here, mindlessly, to see what works the best. I think this will do. Since we're 43 44 00:03:41,530 --> 00:03:45,930 not using a heavier weight, then line height doesn't need to come closer. 44 45 00:03:45,940 --> 00:03:48,880 Less mass means less gravitational pull. 45 46 00:03:48,880 --> 00:03:53,230 Hope you've been paying attention to your physics class in school. And the paragraph 46 47 00:03:53,230 --> 00:03:53,710 text. 47 48 00:04:14,350 --> 00:04:18,940 We need to add a dark overlay on the image, otherwise content won't be visible much. 48 49 00:04:32,720 --> 00:04:34,630 Now for the call to action form, 49 50 00:05:04,230 --> 00:05:06,470 I'm going to use the blue from this design. 50 51 00:05:09,440 --> 00:05:20,110 But I'm actually going to brighten it up a little to make it even more vibrant. 51 52 00:05:20,360 --> 00:05:23,870 They also have this yellow on their page so let's copy that too. 52 53 00:05:23,870 --> 00:05:25,630 Maybe we'll find a use for it. 53 54 00:05:25,670 --> 00:05:28,190 You're free to choose different colors if you'd like. 54 55 00:05:28,190 --> 00:05:30,890 Up to you how closely you want to follow along with me. 55 56 00:05:30,920 --> 00:05:33,770 Pixel by pixel or maybe remix a little. 56 57 00:05:33,770 --> 00:05:35,000 It's fine either way. 57 58 00:05:35,000 --> 00:06:19,290 There is a learning value in both of the approaches. 58 59 00:06:20,020 --> 00:06:24,310 I'm just eyeing the margins and distances here, not really going by the grid, as you can see. 59 60 00:06:24,370 --> 00:06:30,220 Always trust your eyes over any design guidelines and rules. Blindly following them sometimes will render 60 61 00:06:30,220 --> 00:06:35,820 far from optimal results. 61 62 00:06:35,820 --> 00:06:41,130 I'm also trying to avoid that corner of the furniture. The objects in the photo and our interface elements 62 63 00:06:41,130 --> 00:06:43,430 sometimes can interact with each other. 63 64 00:06:43,440 --> 00:06:51,010 This can be good interaction. But sometimes it can create unnecessary tension. This, for example, is a bad 64 65 00:06:51,040 --> 00:06:51,650 tension. 65 66 00:06:51,700 --> 00:06:55,560 That corner in the gap between the button and the field, makes me cringe. 66 67 00:07:00,810 --> 00:07:02,710 Alright, looking sweet so far. 67 68 00:07:05,220 --> 00:07:06,540 Let's put a navigation bar. 68 69 00:08:05,550 --> 00:08:09,630 Let's make margins 12 on the top end and bottom and 20 on the sides. 69 70 00:08:14,100 --> 00:08:16,560 If you want to do a ghost button here, you can. 70 71 00:08:16,590 --> 00:08:18,420 Or even to make this blue as well. 71 72 00:08:18,420 --> 00:08:48,430 Feel free to remix. 72 73 00:08:50,120 --> 00:08:50,350 ♫ 73 74 00:08:54,240 --> 00:09:02,860 ♫ 74 75 00:09:07,350 --> 00:09:09,030 ♫ 75 76 00:09:11,650 --> 00:09:12,880 Let's add a logo too. 76 77 00:09:13,420 --> 00:09:15,610 Here's another simple and quick way to make a logo. 77 78 00:09:17,010 --> 00:09:21,780 Just write the name in small caps and add a dot at the end with some contrasting color. 78 79 00:09:40,330 --> 00:09:41,980 And there you've got a brand new logo. 79 80 00:09:59,270 --> 00:10:00,360 So far looking good. 80 81 00:10:03,080 --> 00:10:06,870 One thing I want to fix though is that dark overlay on the image. 81 82 00:10:06,950 --> 00:10:12,320 Right now we are using a full overlay but the model doesn't actually have to be sitting under a dark 82 83 00:10:12,350 --> 00:10:15,530 overlay. Because we don't have any content in front of her. 83 84 00:10:15,530 --> 00:10:19,100 Now how do we brighten her up, but keep other parts dark? 84 85 00:10:19,130 --> 00:10:22,030 We'll use a gradient fill instead of a solid fill. 85 86 00:10:22,040 --> 00:10:27,200 So go to the fill that we created and switch that to a radial gradient. 86 87 00:10:27,200 --> 00:10:28,510 This time not linear. 87 88 00:10:28,520 --> 00:10:28,850 Why? 88 89 00:10:28,850 --> 00:10:32,390 Because with radial we can create sort of a spotlight on her. 89 90 00:10:32,420 --> 00:10:36,980 You see how the black color starts in the center and fades in all directions. 90 91 00:10:36,980 --> 00:10:38,420 That's not the direction we want. 91 92 00:10:38,420 --> 00:10:44,120 We want exact opposite of that. To start transparent and darken on all directions. 92 93 00:10:44,240 --> 00:10:47,000 We need to reverse the Start and End colors. 93 94 00:10:52,360 --> 00:10:54,400 There we have exact the direction we need. 94 95 00:10:54,400 --> 00:11:00,760 Now we can position that spotlight exactly where we want it to be. This handle on the left decreases 95 96 00:11:00,790 --> 00:11:03,710 the radius of that circle. 96 97 00:11:03,900 --> 00:11:06,990 You can play with other handles too to achieve exact result 97 98 00:11:06,990 --> 00:11:07,560 you want. 98 99 00:11:11,150 --> 00:11:11,390 OK. 99 100 00:11:11,400 --> 00:11:15,190 Now back to 40% opacity. 100 101 00:11:15,370 --> 00:11:16,390 And there you go. 101 102 00:11:16,390 --> 00:11:19,640 Her face isn't dark anymore and looks better overall. 102 103 00:11:19,780 --> 00:11:24,620 This is a great way to utilize images that have too much detail and too much going on in them. 103 104 00:11:24,670 --> 00:11:29,170 You can create spotlights on your focal points and then dark and rest of the image. 104 105 00:11:29,170 --> 00:11:29,470 All right. 105 106 00:11:29,490 --> 00:11:32,500 Let's pause here and continue the rest in the next video.