0
1
00:00:00,180 --> 00:00:05,380
And we're back with the final part 4. This here is a call to action section.
1

2
00:00:05,470 --> 00:00:11,180
It's where you directly tell the audience, to take some action. Sort of summarizing the entire page.
2

3
00:00:11,190 --> 00:00:14,410
It usually has buttons on it, or directly the sign up form.
3

4
00:00:14,430 --> 00:00:30,680
They're using the same purple, but with decreased opacity. Let's do the same with our blue. It's quite nice.
4

5
00:00:32,590 --> 00:00:34,640
10% looks quite good.
5

6
00:00:34,880 --> 00:00:37,830
Lock the layer so it doesn't get in the way.
6

7
00:01:12,710 --> 00:01:17,610
I'm actually going to shrink this headline here, so the word "Small" jumps to the next line.
7

8
00:01:17,750 --> 00:01:19,260
It will look better.
8

9
00:01:19,530 --> 00:01:23,060
They're using a white button here, but I'm going to stick to the ghost button.
9

10
00:01:50,690 --> 00:01:53,740
I like their stars rating and a small copy here.
10

11
00:01:53,760 --> 00:01:55,350
This is called social proof.
11

12
00:01:55,350 --> 00:02:01,860
Great idea to include something like this on Call to Action sections. Makes deciding easier for the users.
12

13
00:02:01,880 --> 00:02:02,110
OK.
13

14
00:02:02,130 --> 00:02:03,390
We need a star icon.
14

15
00:02:03,390 --> 00:02:10,630
Let's go to flaticon.com and search for a star icon. We can download it for free from there.
15

16
00:02:10,900 --> 00:02:16,450
Icons here are free for personal use, but if you're going to use it somewhere then you must credit
16

17
00:02:16,450 --> 00:02:18,870
the author. Or buy their subscription.
17

18
00:02:18,880 --> 00:02:20,150
Thank you Smashicons.
18

19
00:02:20,170 --> 00:02:23,830
We need SVG format, which is editable in Figma.
19

20
00:02:23,860 --> 00:02:37,670
We're going to be able to change color if we want to. And then just place it, as with any image.
20

21
00:02:37,670 --> 00:02:40,670
Now, here's the beauty of using SVG file format.
21

22
00:02:40,700 --> 00:02:47,250
I want to use our own yellow, so I can simply change the color like with any other shape in Figma.
22

23
00:02:58,410 --> 00:02:59,780
Remember that Tidy Up trick?
23

24
00:03:02,860 --> 00:03:05,140
Now I can adjust that spacing from here.
24

25
00:03:37,510 --> 00:03:57,530
♫
25

26
00:04:02,320 --> 00:04:02,500
♫
26

27
00:04:16,500 --> 00:04:20,680
♫
27

28
00:04:21,070 --> 00:04:21,460
All right.
28

29
00:04:21,460 --> 00:04:25,080
Looking sharp. Instead of a desk with computers,
29

30
00:04:25,090 --> 00:04:31,750
I'm actually going to use a photo here. Maybe a photo of a team, office or a small business owner, to represent
30

31
00:04:31,780 --> 00:04:36,750
what the headline says.
31

32
00:04:37,100 --> 00:04:38,300
This photo looks quite good.
32

33
00:04:38,300 --> 00:04:43,520
Sort of like a startup with a team that works in different places, so they need a good communication
33

34
00:04:43,520 --> 00:04:44,140
platform.
34

35
00:05:00,000 --> 00:05:00,080
♫
35

36
00:05:06,600 --> 00:05:15,160
♫
36

37
00:05:17,270 --> 00:05:19,620
I'm just playing around here to see what works.
37

38
00:05:19,670 --> 00:05:24,470
We could put this image like a split section background like we've done in other assignments. But also,
38

39
00:05:24,470 --> 00:05:28,570
I can stick with the same style because consistency will be rewarded.
39

40
00:05:33,180 --> 00:05:36,250
And do something like this and add those dots behind the image.
40

41
00:06:08,410 --> 00:06:10,130
That looks pretty good actually.
41

42
00:06:10,240 --> 00:06:13,290
The footer, and that's it! We're close to the finish line.
42

43
00:06:13,360 --> 00:06:15,460
Let's copy the logo and give it a blue color.
43

44
00:06:33,170 --> 00:06:35,450
There is some micro-copy underneath the logo.
44

45
00:06:35,450 --> 00:06:39,810
We can do the same. Their footer is divided into 4 columns.
45

46
00:06:39,810 --> 00:06:44,280
We can easily arrange a similar layout for us, using our own layout grid.
46

47
00:06:44,300 --> 00:06:45,920
We have 12 columns in our grid.
47

48
00:06:45,920 --> 00:06:49,260
If we divide it into 4, we're going to get 3-point blocks.
48

49
00:06:49,280 --> 00:06:51,860
Given the small length, 3 columns might be too much.
49

50
00:06:51,860 --> 00:06:54,380
So, let's use 2 columns for each block.
50

51
00:06:54,380 --> 00:06:58,550
Splitting it into 6 blocks will even fit more in one line.
51

52
00:06:58,550 --> 00:07:03,390
That's the beauty of using 12-point grid, it divides into many flexible variations.
52

53
00:07:03,440 --> 00:07:08,210
I'm gonna leave these two columns empty. Having this gap between footer links and logo often looks
53

54
00:07:08,210 --> 00:07:09,080
very good.
54

55
00:07:09,100 --> 00:07:11,650
It creates this visual separation between the two.
55

56
00:07:11,660 --> 00:07:15,580
Which makes sense because the logo is different than the footer links.
56

57
00:07:15,710 --> 00:07:19,460
All right now, let's fill out these links with some random text. In places like this,
57

58
00:07:19,460 --> 00:07:24,860
it's always best to use realistic example text, rather than Lorem Ipsum dummy text. Because depending
58

59
00:07:24,860 --> 00:07:29,440
on the text line, you might end up needing to rearrange the layout a little.
59

60
00:07:29,450 --> 00:07:32,980
Also, repeating the same text just looks ugly.
60

61
00:07:52,680 --> 00:07:55,620
Let's skip the social icons and other links on the footer.
61

62
00:07:55,650 --> 00:07:57,220
We've already done a lot.
62

63
00:07:57,270 --> 00:07:59,870
Let's just add the copyright text and that's all.
63

64
00:08:26,580 --> 00:08:26,910
There.
64

65
00:08:26,910 --> 00:08:29,660
Now let's just fix those empty gaps.
65

66
00:08:35,530 --> 00:08:40,420
I'm pressing an Alt or Option key here to see the distances between objects.
66

67
00:08:40,500 --> 00:08:42,970
I'm using a 180 pixels as a margin.
67

68
00:08:42,970 --> 00:08:48,220
There is no rule with this really. It's based on how it looks. But the important part is to be consistent
68

69
00:08:48,220 --> 00:08:48,790
when you can.
69

70
00:08:48,790 --> 00:08:54,760
For example, I used 90-pixel margin on the midsection. So I'm gonna try to reuse the same value with
70

71
00:08:54,790 --> 00:08:58,200
other margins. But sometimes it's too much, or not enough.
71

72
00:08:58,210 --> 00:09:03,180
In such cases, I'll try to use multiples of the same value. Either half it. Or double it.
72

73
00:09:03,190 --> 00:09:05,450
Hence, the 180 pixels.
73

74
00:09:05,530 --> 00:09:08,060
If that's not right, then I'll use a new margin.
74

75
00:09:08,110 --> 00:09:12,000
Sometimes you might need to be a little inconsistent, as long as it feels right.
75

76
00:09:12,120 --> 00:09:13,800
On the hero, I have to do exactly that.
76

77
00:09:13,830 --> 00:09:20,080
190 seems too big, and 90 seems too small. So, gotta go in between. Now let's trim the excess space on the
77

78
00:09:20,080 --> 00:09:25,870
bottom. Don't forget to hold Control or Command while you do this or it might distort the content inside.
78

79
00:09:29,250 --> 00:09:32,250
Once you're done, select a frame and press the play icon.
79

80
00:09:35,650 --> 00:09:37,830
We can now see the presentation of our design.
80

81
00:09:40,620 --> 00:09:41,330
Looking great.
81

82
00:09:45,610 --> 00:09:51,590
And that's it. By choosing an excellent inspiration, we have designed and created a fabulous looking home
82

83
00:09:51,590 --> 00:09:52,010
page.
83

84
00:09:52,010 --> 00:09:54,070
This is the power of good inspiration.
84

85
00:09:54,080 --> 00:09:55,280
Hope you have enjoyed the process.
85

86
00:09:55,280 --> 00:09:59,570
I'm very keen on seeing your submission. In the upcoming part of this course, we're going to build this
86

87
00:09:59,570 --> 00:10:01,200
exact page in Webflow.
87

88
00:10:01,220 --> 00:10:01,730
Stick around.