0
1
00:00:00,180 --> 00:00:01,110
And we're back.
1

2
00:00:01,110 --> 00:00:03,170
I'm going to use rounded buttons as well.
2

3
00:00:03,180 --> 00:00:07,290
You can feel free to remix here, if you want to, and use rectangular buttons.
3

4
00:00:10,350 --> 00:00:14,430
To make buttons round, just increase corner radius until they are completely round.
4

5
00:00:21,220 --> 00:00:21,900
For the font,
5

6
00:00:21,910 --> 00:00:25,210
it looks like they are using smaller paragraph text, but a thicker style.
6

7
00:00:39,670 --> 00:00:41,290
OK, that looks about right.
7

8
00:00:41,330 --> 00:00:43,940
The second button is what's called a Ghost Button.
8

9
00:00:43,940 --> 00:00:49,760
This sort of button combination is a great approach because remember what we talked about in the visual hierarchy?
9

10
00:00:49,880 --> 00:00:53,690
You want to guide your audience visually from one element to another.
10

11
00:00:53,810 --> 00:00:59,060
If you have two buttons next to each other and use the same style on them, the audience won't be able
11

12
00:00:59,060 --> 00:01:04,790
to tell which one is the primary button that leads to the primary action of this site. To create this 
12

13
00:01:04,790 --> 00:01:08,450
Ghost Button, we need to remove the color fill and add a stroke to the shape.
13

14
00:01:11,820 --> 00:01:13,860
Then change the color of the stroke.
14

15
00:01:17,690 --> 00:01:18,610
Let's check the grid.
15

16
00:01:21,840 --> 00:01:23,490
The buttons aren't aligned with the grid,
16

17
00:01:23,490 --> 00:01:24,760
but that's not a big deal.
17

18
00:01:24,770 --> 00:01:28,940
Buttons and text elements are flexible and they shrink and grow based on the text inside.
18

19
00:01:28,950 --> 00:01:32,880
So we don't have to squeeze them into a grid. And sometimes it's better not to.
19

20
00:01:32,910 --> 00:01:36,850
But in this case, it's quite close and shrinking buttons a little, won't hurt.
20

21
00:01:36,870 --> 00:01:38,790
So I'll snap those bad boys to a grid.
21

22
00:01:54,440 --> 00:01:56,340
Let's move to our hero shot.
22

23
00:01:56,480 --> 00:01:58,340
It's quite an interesting collage.
23

24
00:01:58,340 --> 00:02:02,470
Do you notice one of the design tricks we covered? The overlapping trick.
24

25
00:02:02,510 --> 00:02:04,020
Let's create a similar art.
25

26
00:02:04,020 --> 00:02:07,460
We need to find and add a couple of similar photo shots like those.
26

27
00:02:29,370 --> 00:02:29,720
All right.
27

28
00:02:29,730 --> 00:02:33,060
This should do. Some of these images work, but some don't.
28

29
00:02:33,060 --> 00:02:36,780
When you combine images, always remember the lesson about consistency.
29

30
00:02:36,780 --> 00:02:42,150
So combine images that are very similar in style. Like these two are similar.
30

31
00:02:42,150 --> 00:02:46,920
They are not facing the camera or looking at it and they are proportional to each other.
31

32
00:02:47,130 --> 00:02:51,200
Meaning the photos were taken from a similar distance.
32

33
00:02:51,230 --> 00:02:53,170
You don't want to match these two together.
33

34
00:02:53,210 --> 00:02:55,170
Looks like they have nothing to do with each other.
34

35
00:02:55,190 --> 00:03:01,430
The right one is looking into the camera, facing straight and she she is much closer to the camera, making
35

36
00:03:01,430 --> 00:03:02,900
her face bigger in size.
36

37
00:03:08,770 --> 00:03:09,050
All right.
37

38
00:03:09,050 --> 00:03:10,450
These two look good.
38

39
00:03:10,510 --> 00:03:15,930
Free photo options are quite limited generally and finding the matching style is a little more challenging.
39

40
00:03:15,950 --> 00:03:16,970
So keep that in mind.
40

41
00:03:24,360 --> 00:03:26,760
Now let's create that dotted background shape.
41

42
00:03:26,760 --> 00:03:29,840
Just draw a circle.
42

43
00:03:29,880 --> 00:03:36,990
Choose Ellipse from the shapes or just hit O. When you draw an ellipse hold SHIFT to draw a perfect circle.
43

44
00:03:39,880 --> 00:03:46,210
Then just start duplicating the circle, so horizontally and vertically to create that sort of dotted
44

45
00:03:46,220 --> 00:03:46,660
grid.
45

46
00:04:07,770 --> 00:04:08,790
Select them all.
46

47
00:04:11,200 --> 00:04:15,570
Right-click, and Group Selection. Or use a shortcut
47

48
00:04:15,580 --> 00:04:15,970
Control (or Command) + G.
48

49
00:04:26,500 --> 00:04:31,660
When you position your dot's behind the image, make sure to not have an odd overlap with an image.
49

50
00:04:33,810 --> 00:04:36,510
See how the dots are neatly sitting around the image?
50

51
00:04:42,790 --> 00:04:44,620
And try to use equal spacing.
51

52
00:04:44,620 --> 00:05:02,160
You don't want to create an unnecessary tension by doing something like this.
52

53
00:05:02,210 --> 00:05:08,030
Now, let's find some mockup screens for our imaginary product. Just like they have it here. And also something
53

54
00:05:08,030 --> 00:05:13,010
that we can later use down below. What we're going to do is find some free mockup. A good way is to find
54

55
00:05:13,010 --> 00:05:16,950
such resources for Scetch, which then can be imported into Figma.
55

56
00:05:16,970 --> 00:05:21,680
Of course, we could search for Figma resources directly but as this is a relatively new tool,
56

57
00:05:21,680 --> 00:05:27,560
the resources aren't as plentiful. Sketchappsources.com is one such place. And also a SketchRepo.com
57

58
00:05:27,560 --> 00:05:29,420
is a good place.
58

59
00:05:29,450 --> 00:05:35,030
I'm thinking to use some sort of Chat or Team Collaboration application as our product. Doesn't really
59

60
00:05:35,030 --> 00:05:35,330
matter.
60

61
00:05:35,330 --> 00:05:38,240
Anything that will fit our designs will do.
61

62
00:05:38,240 --> 00:05:40,970
I found this one previously, which is pretty good.
62

63
00:05:40,970 --> 00:05:49,660
Download and Unzip. Now go to Figma's dashboard. And click this Import File link. And once it's done importing
63

64
00:05:49,660 --> 00:05:50,860
just open up the file.
64

65
00:06:03,140 --> 00:06:08,390
It's done a pretty good job, but you'll notice some things are a little off. Like this corner seems like
65

66
00:06:08,390 --> 00:06:10,580
it's been messed up a little. But that's okay,
66

67
00:06:10,610 --> 00:06:15,440
we're just gonna grab what we need from here and we can fix those messy parts later if we need to.
67

68
00:06:15,790 --> 00:06:18,940
I've saved this screen in the Figma file on one of the pages.
68

69
00:06:19,040 --> 00:06:23,930
If you're going to reuse the same chat screen, then you can just grab it from there. So you don't have
69

70
00:06:23,930 --> 00:06:25,610
to go through the process.
70

71
00:06:25,610 --> 00:06:28,690
I think these chat bubbles will be nice to use in our hero shot.
71

72
00:06:29,030 --> 00:06:33,050
Let's copy it in our document and see how are we going to use them.
72

73
00:06:34,620 --> 00:06:39,690
I think I'll grab a couple of smaller ones and sprinkle them around, to create a sort of chat experience
73

74
00:06:39,690 --> 00:06:41,400
between these girls.
74

75
00:06:59,190 --> 00:07:03,900
I use yellow here because I'm going to put it directly on the blue background, so blue wouldn't work.
75

76
00:07:08,430 --> 00:07:11,940
And also change the profile photos to the girls.
76

77
00:07:27,030 --> 00:08:04,620
♫
77

78
00:08:11,400 --> 00:08:12,930
♫ 
78

79
00:08:16,550 --> 00:08:17,170
♫ 
79

80
00:08:26,840 --> 00:08:45,040
♫
80

81
00:08:54,220 --> 00:08:56,730
That came out quite nice actually.
81

82
00:08:56,760 --> 00:08:58,640
And I'm going to add that dashed line.
82

83
00:08:58,650 --> 00:09:02,900
It's enough like this. Too many elements can add to the noise.
83

84
00:09:02,910 --> 00:09:05,400
One thing I don't like though is the yellow button.
84

85
00:09:05,400 --> 00:09:07,160
It was nice and prominent before,
85

86
00:09:07,190 --> 00:09:13,500
but now that hero art has yellow in it, the button is fighting for attention and sort of trying to visually
86

87
00:09:13,500 --> 00:09:14,970
connect with the art.
87

88
00:09:15,000 --> 00:09:16,530
The shape doesn't help either.
88

89
00:09:16,530 --> 00:09:21,440
The bottom is rounded and those message boxes are rounder too, so way too much similarity.
89

90
00:09:21,450 --> 00:09:23,830
Changing the color to white should fix this issue.
90

91
00:09:32,020 --> 00:09:36,500
That's much better. Now the art looks separate and the content on the left seems like its own thing.
91

92
00:09:36,520 --> 00:09:41,140
It was sort of merging before. Now that our hero art gained a lot of visual importance,
92

93
00:09:41,170 --> 00:09:46,760
it's the focal point of the section. But a very large headline is fighting for the first place too.
93

94
00:09:46,780 --> 00:09:52,420
So either we have to increase the headline and make it number one or make it smaller to give the stage
94

95
00:09:52,420 --> 00:09:53,310
to the art.
95

96
00:09:53,320 --> 00:09:59,040
It doesn't make sense to make a headline focal point, because the art is way too interesting. So headline
96

97
00:09:59,060 --> 00:10:00,220
has to become smaller.
97

98
00:10:04,480 --> 00:10:05,710
75 looks good.
98

99
00:10:09,300 --> 00:10:11,250
And increase the line height a little bit.
99

100
00:10:14,360 --> 00:10:14,600
There.
100

101
00:10:14,610 --> 00:10:15,570
That's much better.
101

102
00:10:15,570 --> 00:10:18,020
The headline is still prominent, but it's not in the way.
102

103
00:10:18,030 --> 00:10:22,240
And we have gained more whitespace and given everything more room to breathe.
103

104
00:10:22,290 --> 00:10:26,630
If you notice, now the buttons look a little too oversized in comparison to the headline.
104

105
00:10:26,640 --> 00:10:27,660
So we've got to fix that.
105

106
00:10:36,650 --> 00:10:42,410
Decrease the text size in buttons as well. And make sure to center them. Double-check it by eye, see if it
106

107
00:10:42,410 --> 00:10:43,450
looks centered or not.
107

108
00:10:46,580 --> 00:10:46,820
Okay.
108

109
00:10:46,870 --> 00:10:48,040
Let's check our grid.
109

110
00:10:49,220 --> 00:10:54,030
Usually hero shots are part of the background canvas and they don't need to be aligned with the grid.
110

111
00:10:54,140 --> 00:10:59,190
But in this case, I'm going to align the edge of the second image to the end of the grid.
111

112
00:10:59,270 --> 00:11:04,310
The straight line of the picture creates a nice edge for me to align it with a grid.