0 1 00:00:02,700 --> 00:00:08,070 In this video, we're going to design the blogs home page. It's going to be quite easy since a lot of it 1 2 00:00:08,100 --> 00:00:08,650 is done. 2 3 00:00:08,670 --> 00:00:11,250 We already have wireframes and blog post page. 3 4 00:00:11,250 --> 00:00:13,560 We can reuse elements from these two pages. 4 5 00:00:13,560 --> 00:00:16,020 Let's start by duplicating the blog post page. 5 6 00:00:23,070 --> 00:00:24,680 Delete everything on it. 6 7 00:00:24,700 --> 00:00:27,180 Besides the headline. And let's enable the grid. 7 8 00:00:49,350 --> 00:00:51,750 Now just arrange the headline and the subhead. 8 9 00:01:15,890 --> 00:01:17,110 Now for the cards. 9 10 00:01:17,180 --> 00:01:20,990 I'm going to copy one from the wireframes and take it from there. 10 11 00:01:27,980 --> 00:01:32,330 If you remember, in our inspiration, cards are white on a grey background. 11 12 00:01:32,330 --> 00:01:34,040 That way card is visible. 12 13 00:01:34,050 --> 00:01:39,830 That's what I want to do here too, so we're going to paint the background grey, just like our home page. 13 14 00:01:39,830 --> 00:01:42,020 Now we can change the card color to white. 14 15 00:01:47,100 --> 00:01:47,550 Next. 15 16 00:01:47,550 --> 00:01:50,340 Let's put our post image as a thumbnail. 16 17 00:01:50,340 --> 00:01:53,160 All we need to do is put image as a fill of a rectangle. 17 18 00:01:53,250 --> 00:01:56,310 When a rectangle fill is linked to a style, to change it 18 19 00:01:56,300 --> 00:01:58,950 you need to detach it from the style first. 19 20 00:01:58,950 --> 00:02:01,130 Then you can update the fill with an image. 20 21 00:02:01,210 --> 00:02:04,380 The icon from the image place holder, we can simply hide or delete. 21 22 00:02:04,380 --> 00:02:05,550 We're not going to need it again. 22 23 00:02:09,190 --> 00:02:12,200 We need another level of headline style that we can use in this card. 23 24 00:02:12,200 --> 00:02:15,070 Right now it's heading 3, from the wireframes. 24 25 00:02:15,100 --> 00:02:18,280 Let's detach it and change it to our main font, which is Cabin. 25 26 00:02:27,940 --> 00:02:30,320 22 in size and SemiBold, 26 27 00:02:30,340 --> 00:02:32,050 I think it looks good. 27 28 00:02:32,050 --> 00:02:35,110 Also, we can enable the capitalization of the text. 28 29 00:02:35,110 --> 00:02:43,140 This will make the headline more title like. Let's have this as headline 3 style, in case we need to tweak 29 30 00:02:43,140 --> 00:02:43,890 it in the future. 30 31 00:02:53,400 --> 00:02:55,110 Now for the paragraph text. The text style 31 32 00:02:55,110 --> 00:02:59,010 here is caption, but this is from the wireframe kit as usual. 32 33 00:02:59,010 --> 00:03:04,560 We already have the similar style from our designs, which is again named Caption. 33 34 00:03:04,650 --> 00:03:08,810 You might sometimes mistaken wireframe style with local styles of this file. 34 35 00:03:08,890 --> 00:03:14,160 We are using the same naming, but if you look in the dropdown, they are grouped. And this way you can tell 35 36 00:03:14,160 --> 00:03:16,120 if you have the correct one selected. 36 37 00:03:16,200 --> 00:03:19,110 In this case, we want to change it to the other caption. 37 38 00:03:19,140 --> 00:03:23,010 The same goes from the color styles, they are grouped, so you can tell the difference. 38 39 00:03:30,560 --> 00:03:32,570 Now for the author and date block. 39 40 00:03:36,670 --> 00:03:39,710 I'd like it to be smaller than what it is right now. 40 41 00:03:39,760 --> 00:03:44,380 It's a secondary information and shouldn't have same importance as the paragraph. 41 42 00:03:44,380 --> 00:03:47,800 So I'm going to detach the text style and change it to 12 pixels. 42 43 00:03:57,250 --> 00:04:01,800 For that little separator, I'm going to use a light grey from the wireframe kit. 43 44 00:04:01,930 --> 00:04:02,830 Such dividers, 44 45 00:04:02,830 --> 00:04:05,460 I always prefer to be lighter than the text 45 46 00:04:05,470 --> 00:04:06,040 next to it. 46 47 00:04:30,610 --> 00:04:33,560 Let's detach avatar of the author from the competent. 47 48 00:04:42,260 --> 00:04:47,250 And let's make it 10 pixel smaller. 48 49 00:04:48,600 --> 00:05:05,220 We can tidy up these elements using Figma's alignment feature. Just select them all and 49 50 00:05:05,220 --> 00:05:10,200 then center horizontally. Or as Figma calls it align vertical centers. 50 51 00:05:10,200 --> 00:05:14,100 Just make sure, you don't have the layers grouped or it's not gonna work. 51 52 00:05:14,100 --> 00:05:18,980 We can also use this "tidy up" or distribute feature, to distribute them evenly. 52 53 00:05:19,410 --> 00:05:22,380 And once you do that the new field will open up. 53 54 00:05:22,440 --> 00:05:26,650 That's a distance between the objects we can change it to something like 10. 54 55 00:05:26,700 --> 00:05:30,240 And Figma will distribute the objects with 10 pixels apart. 55 56 00:05:30,300 --> 00:05:33,000 It's very handy. Once you're done styling the block, 56 57 00:05:33,000 --> 00:05:34,100 now you can group it again. 57 58 00:05:41,290 --> 00:05:45,730 I'm leaving this empty space between the paragraph and the author blog, for a reason. 58 59 00:05:45,730 --> 00:05:50,380 I'm taking into account the occasions when a headline stretches over three lines. 59 60 00:05:50,380 --> 00:05:57,380 That way we'll make sure the card doesn't need to stretch and they are all the same height. 60 61 00:05:57,480 --> 00:05:57,820 Great. 61 62 00:05:57,830 --> 00:05:59,230 The block card is ready. 62 63 00:05:59,240 --> 00:06:07,480 Now we can duplicate them to create the grid. 63 64 00:06:07,560 --> 00:06:11,990 We should put individual dummy content in these cards. Presenting it like this to the client, 64 65 00:06:12,000 --> 00:06:17,850 isn't cool. What we can do, to save ourselves time. Is to go on some blog and grab content from there. 65 66 00:06:17,910 --> 00:06:20,150 With images, paragraphs and all that. 66 67 00:06:20,190 --> 00:06:26,490 For example, we can go to medium.com. And find content there. To download images, you can either screenshot 67 68 00:06:26,490 --> 00:06:30,510 them. Or use this chrome extension called gallery Gallerify. 68 69 00:06:30,720 --> 00:06:34,020 It scans the page for images and lets you download them easily. 69 70 00:07:35,410 --> 00:07:39,900 OK. Let's do similar with authors. 70 71 00:08:02,330 --> 00:08:08,060 With their names, I'm going to use the Content Real plugin. Link in the resources. I can select all 71 72 00:08:08,060 --> 00:08:22,150 name layers and by clicking the names option it will automatically fill in with random names. 72 73 00:08:27,820 --> 00:08:32,280 Let's just make sure, the gender of names is correctly matching the photos. 73 74 00:08:32,280 --> 00:08:34,260 We don't want a girl named Arthur. 74 75 00:08:46,640 --> 00:08:48,800 There. 75 76 00:08:48,810 --> 00:08:54,060 The whole thing is so much better now. Looks real and way more impressive than just repeated content. 76 77 00:08:54,210 --> 00:09:30,130 But we need to fix the spacing on author blogs. Now names have created different gaps. 77 78 00:09:31,060 --> 00:09:35,490 Very last step, the next button. Which we can just duplicate from wireframes. 78 79 00:09:35,500 --> 00:09:36,460 Then change the color. 79 80 00:09:53,160 --> 00:09:58,140 Just like we do with secondary buttons, we can take the grey color and decrease opacity. 80 81 00:09:58,140 --> 00:10:07,800 That's a simple trick to create colors from the same palette. 81 82 00:10:09,240 --> 00:10:14,520 We didn't do this in wireframes, but it would be nice to add arrow to this button. To represent the next 82 83 00:10:14,520 --> 00:10:15,450 action. 83 84 00:10:15,450 --> 00:10:29,880 I'm going to drag the icon right from the wireframe kit. 84 85 00:10:51,470 --> 00:10:57,480 There. That looks nice. Move the footer up and all done with a blog page. 85 86 00:11:14,160 --> 00:11:16,920 All the designs for 3 pages are now ready. 86 87 00:11:16,950 --> 00:11:22,470 We would share these with the client and get their feedback and make any necessary revisions. 87 88 00:11:22,470 --> 00:11:28,140 Designs, I like to share from the presentation mode. Click "Share prototype" and send that link to the client. 88 89 00:11:28,140 --> 00:11:30,510 It will open right in the presentation mode. 89 90 00:11:30,510 --> 00:11:33,270 Just explain them how to navigate between the pages. 90 91 00:11:33,330 --> 00:11:39,620 Something that might be evident to us, often isn't and very evident to the clients. And this concludes 91 92 00:11:39,620 --> 00:11:40,430 the section. 92 93 00:11:40,430 --> 00:11:41,470 We've done a lot. 93 94 00:11:41,510 --> 00:11:47,360 We've learned the very crucial skill, which is the design process. We went from project brief, then to mood 94 95 00:11:47,360 --> 00:11:54,080 boarding, and then wireframing. And then finally we did the designs, which wasn't very difficult, because 95 96 00:11:54,080 --> 00:11:57,830 of all the baby steps that we took before it. Without those steps, 96 97 00:11:57,830 --> 00:12:00,380 designing would have been way more difficult. 97 98 00:12:00,380 --> 00:12:06,560 Your clients are not gonna know how the web design process works. And they might expect, and often 98 99 00:12:06,560 --> 00:12:10,370 they do, that you just sit down and start building the website right away. 99 100 00:12:10,370 --> 00:12:15,860 And often they even prefer that, because they will, you know, they will save time and money and they'll have 100 101 00:12:15,860 --> 00:12:18,050 a website up and running as soon as possible. 101 102 00:12:18,080 --> 00:12:22,280 But building websites without designs, it's going to bring terrible results. 102 103 00:12:22,280 --> 00:12:30,260 And usually, it's going to cost more time and money because revisions on live website are just, they 103 104 00:12:30,260 --> 00:12:37,040 take way more time than you would do revisions on the designs, or even revisions compared to wireframes. 104 105 00:12:37,070 --> 00:12:38,770 Which is just so easy to do, right? 105 106 00:12:38,790 --> 00:12:41,110 Just move things around, you don't think about anything. 106 107 00:12:41,120 --> 00:12:46,820 Now imagine everything that we do inside Webflow, build everything, all the structures and then all of a 107 108 00:12:46,820 --> 00:12:52,610 sudden we need to completely redesign something and create a new interaction, or new layout. And the same 108 109 00:12:52,610 --> 00:12:54,980 thing applies to the design phase itself. 109 110 00:12:55,100 --> 00:13:00,410 Because when you're designing, obviously you can design without wireframe and without content, but when 110 111 00:13:00,410 --> 00:13:05,300 you have wireframes, when you have that skeleton and when you have content that you are designing, things 111 112 00:13:05,300 --> 00:13:11,480 are just much simpler. And any iteration that you have to make during the phase of structuring your page 112 113 00:13:11,480 --> 00:13:14,840 and structuring the website, so much easier on the wireframes. 113 114 00:13:14,840 --> 00:13:20,330 Why do that on the design phase... So make sure to educate your clients on your design process. 114 115 00:13:20,330 --> 00:13:26,720 They will love you for your professionalism and for your confidence in your process. Even if they resist 115 116 00:13:26,720 --> 00:13:27,740 it in the beginning. 116 117 00:13:27,750 --> 00:13:31,180 All right, next section is all about building this whole thing in Webflow. 117 118 00:13:31,190 --> 00:13:31,730 Stick around.