In this and upcoming videos we'll practice remixing. 1
And this is going to be your first, sort of, full project 2
from design to development. First, we'll design a home page. And then we'll take that home page and we'll 3
build it and develop it inside 4
Webflow. 5
We're going to take an inspiration and instead of copying it, just like we did with Figma's home page, 6
we're going to remix it. And we're going to use our own content, our own photos and our own colors. 7
And change some things if we want to and if we can. I found this really nice design by Filip Justic 8
and Balkan Brothers on Dribbble. 9
Thank you Filip for sharing. Outstanding work. 10
We're going to use Filip's designs as our inspiration, remix it a little and design a new home page 11
based on it. 12
This time I'm going to demonstrate the full process, so I can show you new things that you will need 13
to learn in Figma. 14
It's going to be interesting. 15
This demonstration is long, and it's split in four parts. 16
It's best to follow along so fire up your Figma. As always the Figma file is in the resources. 17
First, let's set up our frame. 18
You'll see that the width of this screenshot is 1440 pixels. 19
This is the same size as a Desktop frame in Figma. 20
Now let's add our grid to the frame. 21
I'm not sure what exact grid they are using on it, but we're going to use our own 12-point grid. 22
With our usual settings, although let's match their margins on the edges. Not the margin on the top 23
nawbar, but the one on the content. To measure anything in Figma, just draw a rectangle and then check the 24
dimensions of that rectangle. 25
it's 140 pixels wide, 26
so we will use this as our margin for the grid. 27
There. 28
Now it's a close match to their layout. 29
There are some differences in their layout, like the nawbar sits outside of the grid and some other 30
elements seem to have different logic too. 31
But for us, we're going to stick to our grid as much as possible. 32
Good. 33
We're going to start designing the hero. First, the background. Pulling in our own custom colors, 34
is a great way to remix a work. 35
Let's find some color inspiration on Dribbble. For your designs, 36
I want you to source your own colors, just like I'm about to do. 37
I'm going to grab a couple of options. Just screenshot your inspiration or save the images by right-clicking 38
and Save As. We'll place them into Figma later. 39
I really like this. Blue-yellow or blue-orange combinations are exciting color pairs. 40
Now, just place your screenshots into Figma, so we can sample colors from there. 41
You can place multiple images like this. 42
What I like to do is, to put one color as a background and another as a button on it. And then see how 43
the combo works together. Some colors might work well next to each other, but if you put one on top of 44
the other, they might have a very low contrast. 45
They're both quite nice. But I'm gonna go with the blue option. 46
You can lock the background layer from the layers panel, so it doesn't get in the way when designing 47
other objects on top of it. 48
Now let's add the content. 49
First, we have to choose our fonts. The fonts, like colors, are a good place to do an easy remix. 50
But sometimes, we might really like the typography that they are using. And we might want to use the same 51
or similar fonts. If we know the font they're using, great. 52
But if we don't or if it's paid font and we don't want to pay, then we have to find a similar alternative. 53
That's what I'm going to do here, so you can learn how to look for font alternatives. 54
I don't know exactly what they're using in their designs, but let's head to Google fonts and see if we 55
can find something similar looking. 56
So I'm gonna narrow down the results. 57
It's clearly a Sans Serif font and a little on a thicker side, at least Bold. 58
And I'm going to use the same text as a sample because that's going to make it easier, to find similar 59
fonts. 60
Notice how symmetric are the letters. 61
The letter "O" is a perfect circle, instead of the usual oval. And that's a good hint. 62
The biggest tell is the letter "A". 63
It's not that usual "A" that you get in most fonts. It's a handwritten sort of style. 64
Those are enough hints to find similar fonts. Look, Montserrat is quite similar. 65
The "O" is circle as well but the As are different. 66
I can use this if I don't find something closer. But there, 67
Poppins is a really close match. 68
The "O" is a circle and the "A" is the same style as well. 69
There are some differences, but this is good enough. 70
In your case, you can either use the same font, pick your own, or source the font from another inspiration. 71
Up to you. 72
Let's match the style. 73
It seems like the weight is something like Semi-Bold. 74
The line-height is tighter than a default value. And that's a great design decision. On big headlines 75
like these, 76
you need a tighter line-height. Remember what we learned about the gravity of font-weights? 77
Also, if you look closer, you'll see that letters stand closer to each other. 78
This might be the default value for their particular typeface, but it's highly likely they decreased 79
letter spacing. 80
This again is a good idea. 81
Heavy, big font like this, 82
looks best with a tighter space. 83
We can decrease letter spacing from here. 84
As for the body text, if you zoom in, you'll see that they're not using the same typeface as the headline. 85
And that's probably a good idea because the same font might not be the best choice for paragraph text. 86
It's too symmetrical. 87
The paragraph text looks more neutral and generic, sort of like like Roboto. Might even be the same. 88
So we can use that.