0
1
00:00:00,240 --> 00:00:02,820
In this and upcoming videos we'll practice remixing.
1

2
00:00:02,820 --> 00:00:05,400
And this is going to be your first, sort of, full project
2

3
00:00:05,400 --> 00:00:11,040
from design to development. First, we'll design a home page. And then we'll take that home page and we'll
3

4
00:00:11,040 --> 00:00:12,660
build it and develop it inside
4

5
00:00:12,680 --> 00:00:13,020
Webflow.
5

6
00:00:13,230 --> 00:00:18,390
We're going to take an inspiration and instead of copying it, just like we did with Figma's home page,
6

7
00:00:18,660 --> 00:00:24,060
we're going to remix it. And we're going to use our own content, our own photos and our own colors.
7

8
00:00:24,060 --> 00:00:29,670
And change some things if we want to and if we can. I found this really nice design by Filip Justic 
8

9
00:00:29,700 --> 00:00:31,660
and Balkan Brothers on Dribbble.
9

10
00:00:31,980 --> 00:00:34,340
Thank you Filip for sharing. Outstanding work.
10

11
00:00:34,350 --> 00:00:40,020
We're going to use Filip's designs as our inspiration, remix it a little and design a new home page
11

12
00:00:40,050 --> 00:00:41,070
based on it.
12

13
00:00:41,070 --> 00:00:45,720
This time I'm going to demonstrate the full process, so I can show you new things that you will need
13

14
00:00:45,720 --> 00:00:46,690
to learn in Figma.
14

15
00:00:46,960 --> 00:00:48,180
It's going to be interesting.
15

16
00:00:48,210 --> 00:00:51,270
This demonstration is long, and it's split in four parts.
16

17
00:00:51,270 --> 00:00:56,840
It's best to follow along so fire up your Figma. As always the Figma file is in the resources.
17

18
00:00:57,060 --> 00:00:58,920
First, let's set up our frame.
18

19
00:00:58,920 --> 00:01:02,450
You'll see that the width of this screenshot is 1440 pixels.
19

20
00:01:02,460 --> 00:01:08,300
This is the same size as a Desktop frame in Figma.
20

21
00:01:08,310 --> 00:01:09,900
Now let's add our grid to the frame.
21

22
00:01:09,900 --> 00:01:15,330
I'm not sure what exact grid they are using on it, but we're going to use our own 12-point grid.
22

23
00:01:15,330 --> 00:01:20,970
With our usual settings, although let's match their margins on the edges. Not the margin on the top
23

24
00:01:20,970 --> 00:01:26,490
nawbar, but the one on the content. To measure anything in Figma, just draw a rectangle and then check the
24

25
00:01:26,490 --> 00:01:27,930
dimensions of that rectangle.
25

26
00:01:35,650 --> 00:01:37,350
it's 140 pixels wide,
26

27
00:01:37,350 --> 00:01:39,940
so we will use this as our margin for the grid.
27

28
00:01:54,460 --> 00:01:54,710
There.
28

29
00:01:54,720 --> 00:01:56,690
Now it's a close match to their layout.
29

30
00:01:56,690 --> 00:02:01,400
There are some differences in their layout, like the nawbar sits outside of the grid and some other
30

31
00:02:01,400 --> 00:02:03,920
elements seem to have different logic too.
31

32
00:02:04,070 --> 00:02:07,790
But for us, we're going to stick to our grid as much as possible.
32

33
00:02:07,820 --> 00:02:08,090
Good.
33

34
00:02:08,090 --> 00:02:13,210
We're going to start designing the hero. First, the background. Pulling in our own custom colors,
34

35
00:02:13,200 --> 00:02:15,410
is a great way to remix a work.
35

36
00:02:15,620 --> 00:02:19,040
Let's find some color inspiration on Dribbble. For your designs,
36

37
00:02:19,040 --> 00:02:22,460
I want you to source your own colors, just like I'm about to do.
37

38
00:02:22,460 --> 00:02:28,310
I'm going to grab a couple of options. Just screenshot your inspiration or save the images by right-clicking
38

39
00:02:28,310 --> 00:02:31,650
and Save As. We'll place them into Figma later.
39

40
00:02:31,700 --> 00:02:36,560
I really like this. Blue-yellow or blue-orange combinations are exciting color pairs.
40

41
00:02:50,700 --> 00:02:54,870
Now, just place your screenshots into Figma, so we can sample colors from there.
41

42
00:02:58,480 --> 00:03:00,640
You can place multiple images like this.
42

43
00:03:10,050 --> 00:03:16,080
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

44
00:03:16,080 --> 00:03:21,150
the combo works together. Some colors might work well next to each other, but if you put one on top of
44

45
00:03:21,150 --> 00:03:52,980
the other, they might have a very low contrast.
45

46
00:03:53,080 --> 00:03:55,510
They're both quite nice. But I'm gonna go with the blue option.
46

47
00:04:00,540 --> 00:04:05,250
You can lock the background layer from the layers panel, so it doesn't get in the way when designing
47

48
00:04:05,280 --> 00:04:07,500
other objects on top of it.
48

49
00:04:07,500 --> 00:04:08,910
Now let's add the content.
49

50
00:04:08,910 --> 00:04:14,060
First, we have to choose our fonts. The fonts, like colors, are a good place to do an easy remix.
50

51
00:04:14,130 --> 00:04:19,050
But sometimes, we might really like the typography that they are using. And we might want to use the same
51

52
00:04:19,080 --> 00:04:22,980
or similar fonts. If we know the font they're using, great.
52

53
00:04:22,980 --> 00:04:29,430
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

54
00:04:29,430 --> 00:04:34,050
That's what I'm going to do here, so you can learn how to look for font alternatives.
54

55
00:04:34,050 --> 00:04:38,940
I don't know exactly what they're using in their designs, but let's head to Google fonts and see if we
55

56
00:04:38,940 --> 00:04:41,010
can find something similar looking.
56

57
00:04:41,010 --> 00:04:42,680
So I'm gonna narrow down the results.
57

58
00:04:42,690 --> 00:04:47,130
It's clearly a Sans Serif font and a little on a thicker side, at least Bold.
58

59
00:04:51,430 --> 00:04:55,930
And I'm going to use the same text as a sample because that's going to make it easier, to find similar
59

60
00:04:55,930 --> 00:04:56,500
fonts.
60

61
00:04:59,730 --> 00:05:01,760
Notice how symmetric are the letters.
61

62
00:05:01,760 --> 00:05:07,620
The letter "O" is a perfect circle, instead of the usual oval. And that's a good hint.
62

63
00:05:07,680 --> 00:05:09,760
The biggest tell is the letter "A".
63

64
00:05:09,780 --> 00:05:15,210
It's not that usual "A" that you get in most fonts. It's a handwritten sort of style.
64

65
00:05:15,270 --> 00:05:20,850
Those are enough hints to find similar fonts. Look, Montserrat is quite similar.
65

66
00:05:20,940 --> 00:05:24,660
The "O" is circle as well but the As are different.
66

67
00:05:24,660 --> 00:05:29,820
I can use this if I don't find something closer. But there,
67

68
00:05:29,820 --> 00:05:32,610
Poppins is a really close match.
68

69
00:05:32,670 --> 00:05:36,100
The "O" is a circle and the "A" is the same style as well.
69

70
00:05:36,150 --> 00:05:38,350
There are some differences, but this is good enough.
70

71
00:05:38,460 --> 00:05:43,860
In your case, you can either use the same font,  pick your own, or source the font from another inspiration.
71

72
00:05:43,950 --> 00:05:44,480
Up to you.
72

73
00:05:53,930 --> 00:05:55,140
Let's match the style.
73

74
00:05:55,160 --> 00:05:57,590
It seems like the weight is something like Semi-Bold.
74

75
00:06:05,650 --> 00:06:10,630
The line-height is tighter than a default value. And that's a great design decision. On big headlines
75

76
00:06:10,630 --> 00:06:11,290
like these,
76

77
00:06:11,290 --> 00:06:16,800
you need a tighter line-height. Remember what we learned about the gravity of font-weights?
77

78
00:06:16,810 --> 00:06:21,300
Also, if you look closer, you'll see that letters stand closer to each other.
78

79
00:06:21,310 --> 00:06:27,120
This might be the default value for their particular typeface, but it's highly likely they decreased
79

80
00:06:27,130 --> 00:06:28,250
letter spacing.
80

81
00:06:28,270 --> 00:06:29,550
This again is a good idea.
81

82
00:06:29,560 --> 00:06:31,360
Heavy, big font like this,
82

83
00:06:31,360 --> 00:06:33,230
looks best with a tighter space.
83

84
00:06:33,370 --> 00:06:39,010
We can decrease letter spacing from here.
84

85
00:06:39,050 --> 00:06:44,060
As for the body text, if you zoom in, you'll see that they're not using the same typeface as the headline.
85

86
00:06:44,420 --> 00:06:50,350
And that's probably a good idea because the same font might not be the best choice for paragraph text.
86

87
00:06:50,420 --> 00:06:51,910
It's too symmetrical.
87

88
00:06:51,980 --> 00:06:57,880
The paragraph text looks more neutral and generic, sort of like like Roboto. Might even be the same.
88

89
00:06:57,890 --> 00:06:58,970
So we can use that.