And we're back with the final part 4. This here is a call to action section. 1
It's where you directly tell the audience, to take some action. Sort of summarizing the entire page. 2
It usually has buttons on it, or directly the sign up form. 3
They're using the same purple, but with decreased opacity. Let's do the same with our blue. It's quite nice. 4
10% looks quite good. 5
Lock the layer so it doesn't get in the way. 6
I'm actually going to shrink this headline here, so the word "Small" jumps to the next line. 7
It will look better. 8
They're using a white button here, but I'm going to stick to the ghost button. 9
I like their stars rating and a small copy here. 10
This is called social proof. 11
Great idea to include something like this on Call to Action sections. Makes deciding easier for the users. 12
OK. 13
We need a star icon. 14
Let's go to flaticon.com and search for a star icon. We can download it for free from there. 15
Icons here are free for personal use, but if you're going to use it somewhere then you must credit 16
the author. Or buy their subscription. 17
Thank you Smashicons. 18
We need SVG format, which is editable in Figma. 19
We're going to be able to change color if we want to. And then just place it, as with any image. 20
Now, here's the beauty of using SVG file format. 21
I want to use our own yellow, so I can simply change the color like with any other shape in Figma. 22
Remember that Tidy Up trick? 23
Now I can adjust that spacing from here. 24
♫ 25
♫ 26
♫ 27
All right. 28
Looking sharp. Instead of a desk with computers, 29
I'm actually going to use a photo here. Maybe a photo of a team, office or a small business owner, to represent 30
what the headline says. 31
This photo looks quite good. 32
Sort of like a startup with a team that works in different places, so they need a good communication 33
platform. 34
♫ 35
♫ 36
I'm just playing around here to see what works. 37
We could put this image like a split section background like we've done in other assignments. But also, 38
I can stick with the same style because consistency will be rewarded. 39
And do something like this and add those dots behind the image. 40
That looks pretty good actually. 41
The footer, and that's it! We're close to the finish line. 42
Let's copy the logo and give it a blue color. 43
There is some micro-copy underneath the logo. 44
We can do the same. Their footer is divided into 4 columns. 45
We can easily arrange a similar layout for us, using our own layout grid. 46
We have 12 columns in our grid. 47
If we divide it into 4, we're going to get 3-point blocks. 48
Given the small length, 3 columns might be too much. 49
So, let's use 2 columns for each block. 50
Splitting it into 6 blocks will even fit more in one line. 51
That's the beauty of using 12-point grid, it divides into many flexible variations. 52
I'm gonna leave these two columns empty. Having this gap between footer links and logo often looks 53
very good. 54
It creates this visual separation between the two. 55
Which makes sense because the logo is different than the footer links. 56
All right now, let's fill out these links with some random text. In places like this, 57
it's always best to use realistic example text, rather than Lorem Ipsum dummy text. Because depending 58
on the text line, you might end up needing to rearrange the layout a little. 59
Also, repeating the same text just looks ugly. 60
Let's skip the social icons and other links on the footer. 61
We've already done a lot. 62
Let's just add the copyright text and that's all. 63
There. 64
Now let's just fix those empty gaps. 65
I'm pressing an Alt or Option key here to see the distances between objects. 66
I'm using a 180 pixels as a margin. 67
There is no rule with this really. It's based on how it looks. But the important part is to be consistent 68
when you can. 69
For example, I used 90-pixel margin on the midsection. So I'm gonna try to reuse the same value with 70
other margins. But sometimes it's too much, or not enough. 71
In such cases, I'll try to use multiples of the same value. Either half it. Or double it. 72
Hence, the 180 pixels. 73
If that's not right, then I'll use a new margin. 74
Sometimes you might need to be a little inconsistent, as long as it feels right. 75
On the hero, I have to do exactly that. 76
190 seems too big, and 90 seems too small. So, gotta go in between. Now let's trim the excess space on the 77
bottom. Don't forget to hold Control or Command while you do this or it might distort the content inside. 78
Once you're done, select a frame and press the play icon. 79
We can now see the presentation of our design. 80
Looking great. 81
And that's it. By choosing an excellent inspiration, we have designed and created a fabulous looking home 82
page. 83
This is the power of good inspiration. 84
Hope you have enjoyed the process. 85
I'm very keen on seeing your submission. In the upcoming part of this course, we're going to build this 86
exact page in Webflow. 87
Stick around.