0 1 00:00:02,730 --> 00:00:04,380 Now for the testimonial section. 1 2 00:00:13,410 --> 00:00:17,040 Let's actually copy the card from the wireframe and make eddits on it. 2 3 00:00:17,040 --> 00:00:18,920 That should theoretically save us time. 3 4 00:00:29,800 --> 00:00:32,950 To change the styles you have to click unlink. 4 5 00:00:33,450 --> 00:00:36,410 So they're not linked to that wireframe kit styles. 5 6 00:00:55,240 --> 00:01:00,690 ♫ 6 7 00:01:05,210 --> 00:01:31,070 ♫ 7 8 00:01:35,330 --> 00:01:36,770 ♫ 8 9 00:01:58,040 --> 00:02:11,100 ♫ 9 10 00:03:04,060 --> 00:03:06,610 Let's find some profile photos for testimonials. 10 11 00:03:11,940 --> 00:03:45,770 ♫ 11 12 00:03:51,850 --> 00:03:53,130 ♫ 12 13 00:03:57,270 --> 00:04:18,120 ♫ 13 14 00:04:19,060 --> 00:04:23,350 One thing you should never do, is share designs with your client that has repeated dummy photos like 14 15 00:04:23,350 --> 00:04:24,100 this. 15 16 00:04:24,100 --> 00:04:29,290 This doesn't look very nice and sort of ruins they impact your design can make when sharing it with 16 17 00:04:29,290 --> 00:04:34,510 the client. Even with the names, it doesn't really take much time to come up with some random names. 17 18 00:04:34,540 --> 00:04:36,880 But the visual flair is way more impressive. 18 19 00:04:36,880 --> 00:04:40,210 Looks real and can be appreciated better. 19 20 00:05:00,880 --> 00:05:05,060 There are some plugins that you could use for Figma, that can create dummy content. 20 21 00:05:05,060 --> 00:05:10,730 This one that I'm currently trying is called. Content Reel and it can actually do a pretty good job with 21 22 00:05:11,270 --> 00:05:16,730 creating dummy names. Inside the Resources page, I have put the link where you can find all the available 22 23 00:05:16,730 --> 00:05:21,650 Figma plugins. So you can go through that and find some different plugins that's going to help 23 24 00:05:21,650 --> 00:05:24,050 you sort of speed up your workflow. 24 25 00:05:27,950 --> 00:05:33,350 Similarly what I like to do with dummy paragraphs, is to use different text, instead of just having the 25 26 00:05:33,350 --> 00:05:37,960 same exact thing repeated. You see in the wireframes we didn't bother about that, because it's wireframes 26 27 00:05:37,970 --> 00:05:43,340 they are supposed to look bland. But in designs, we want things to look as real as possible. 27 28 00:07:09,500 --> 00:07:10,740 Alright. 28 29 00:07:10,750 --> 00:07:11,550 Looking swell. 29 30 00:07:14,410 --> 00:07:18,880 I'm gonna do the same thing with the footer, copy it from the wireframe and style it right there. 30 31 00:07:34,070 --> 00:07:37,070 As I mentioned before, I want to use this dark style footer. 31 32 00:07:37,130 --> 00:07:38,630 Lets try using our dark blue. 32 33 00:07:42,240 --> 00:07:44,790 It's OK. But I'm going to desaturate it a little. 33 34 00:07:44,790 --> 00:07:46,560 So, it has less blue in it. 34 35 00:07:46,630 --> 00:07:50,260 I'd like it to be a bit more subtle. More towards black or grey. 35 36 00:07:50,260 --> 00:07:52,990 Luckily we know how to fine tune colors, don't we? 36 37 00:07:52,990 --> 00:07:57,600 You can refresh your memory by watching fine tuning lesson. In the color section one more time. 37 38 00:07:57,610 --> 00:08:01,450 I've been teaching you a lot of concepts in this course, so it's natural for them to slip out of your 38 39 00:08:01,450 --> 00:08:02,010 mind. 39 40 00:08:02,140 --> 00:08:06,250 Going back to those lessons when you need it, is a great way to solidify your knowledge. 40 41 00:08:06,250 --> 00:08:11,920 We can remove some of the blue from the color, by decreasing the saturation. Change the drop down to 41 42 00:08:11,920 --> 00:08:19,840 HSB which is Hue saturation and Brightness. That makes the 2nd box to be saturation. And 42 43 00:08:20,020 --> 00:08:22,340 the percentage value, you just decrease it. 43 44 00:08:22,360 --> 00:08:23,490 It's still the same Hue. 44 45 00:08:23,520 --> 00:08:26,470 And this new color still fits well within our palette. 45 46 00:09:18,160 --> 00:09:18,300 ♫ 46 47 00:09:21,850 --> 00:09:24,000 ♫ 47 48 00:09:27,210 --> 00:09:32,740 ♫ 48 49 00:09:40,360 --> 00:09:45,450 ♫ 49 50 00:09:57,780 --> 00:09:58,220 ♫ 50 51 00:10:00,920 --> 00:10:03,240 Just playing around with colors and sizes here. 51 52 00:10:03,320 --> 00:10:36,380 I like footer links to be faded and small. 52 53 00:10:58,930 --> 00:11:04,650 ♫ 53 54 00:11:10,290 --> 00:11:14,680 ♫ 54 55 00:11:19,700 --> 00:11:49,320 ♫ 55 56 00:11:49,730 --> 00:11:50,380 And that's it. 56 57 00:11:50,470 --> 00:11:52,690 Let's have a look at it in the presentation mode. 57 58 00:12:03,730 --> 00:12:06,120 So, our home pages is done and looking pretty slick. 58 59 00:12:06,120 --> 00:12:07,650 We have two more pages left. 59 60 00:12:07,770 --> 00:12:12,280 The blog grid and the blog post page. And we'll get to that in the upcoming videos.