0
1
00:00:00,420 --> 00:00:01,700
And we're back
1

2
00:00:01,770 --> 00:00:05,520
Finally, let's add the navbar and we're done with our hero section.
2

3
00:00:05,520 --> 00:00:10,860
Let's create the logo for our fake chat application. And let's give it some original name.
3

4
00:00:10,860 --> 00:00:17,160
Something like ChatApp. We can use Poppins as our typeface and create that similar contrast of thin
4

5
00:00:17,160 --> 00:00:20,160
and thick. Just like they have it on their logo.
5

6
00:00:38,130 --> 00:00:42,240
Remember this trick from the contrast lesson? Combine thick and thin and bam!
6

7
00:00:42,300 --> 00:00:47,400
You have an interesting element. Let's add some navigation links and a button at the end.
7

8
00:01:24,060 --> 00:01:25,820
Here's another cool Figma trick.
8

9
00:01:25,830 --> 00:01:29,760
Select all links and in the alignment panel click Tidy Up.
9

10
00:01:29,760 --> 00:01:36,090
This will usually distribute objects equally between them. But we can go step further and set exact margin
10

11
00:01:36,090 --> 00:01:38,640
between the elements right from here.
11

12
00:01:38,640 --> 00:01:42,610
Let's use 30 pixels because that's our default margin of the grid.
12

13
00:01:42,670 --> 00:01:43,530
We need a button.
13

14
00:01:43,660 --> 00:01:46,300
Let's create a button out of one of these links.
14

15
00:01:46,300 --> 00:01:51,460
When we put a button in the navbar, it's usually best to use the same text style as the navigation link.
15

16
00:01:52,000 --> 00:02:08,830
Looks better.
16

17
00:02:28,650 --> 00:02:36,250
Let's use the same 30 pixel margin from the top. And we're going to align everything in the navigation
17

18
00:02:36,250 --> 00:02:38,380
bar horizontally in the center.
18

19
00:02:48,270 --> 00:02:53,250
Always check your designs in 100% view. Because those are the real sizes and dimensions that
19

20
00:02:53,250 --> 00:02:54,810
are gonna go on the actual site.
20

21
00:03:02,280 --> 00:03:08,040
Now for the middle section. I'm gonna do it a little simpler. Just with a headline, paragraph and just
21

22
00:03:08,040 --> 00:03:11,400
one screen of our ChatApp that we already have.
22

23
00:03:20,540 --> 00:03:22,780
I'm going to use exactly their font color.
23

24
00:03:22,790 --> 00:03:30,010
It's what you would call off-black. Black but not as saturated and sharp as a usual black. And I'm going
24

25
00:03:30,010 --> 00:03:32,150
to add that black to our palette.
25

26
00:03:32,170 --> 00:03:37,420
It's a good choice for our palette as well because it has some blue inside, like a blue hue. You can
26

27
00:03:37,420 --> 00:03:39,490
see that inside the color map.
27

28
00:04:05,080 --> 00:04:10,690
Let's remove the letter-spacing. Because this headline isn't as big and heavy anymore. So we don't need
28

29
00:04:10,690 --> 00:04:11,970
as much tight space.
29

30
00:04:18,840 --> 00:04:20,320
Let's do the same for the paragraph
30

31
00:04:20,320 --> 00:04:20,700
text.
31

32
00:04:30,590 --> 00:04:35,940
I think they're using light version here, but I'm not a fan of thinner paragraph fonts, because they are
32

33
00:04:36,140 --> 00:04:42,230
sometimes harder to read on lower definition screens. On phones, tablets and retina display laptops it's
33

34
00:04:42,230 --> 00:04:42,530
fine.
34

35
00:04:42,560 --> 00:04:47,740
But on desktop screens with less pixel density, they are not going to be as sharp.
35

36
00:04:47,750 --> 00:04:50,750
Do you notice the visual hierarchy they have created here?
36

37
00:04:50,930 --> 00:04:54,200
The paragraph is smaller, thinner and lighter color.
37

38
00:04:54,440 --> 00:04:55,820
We'll do the same with a color.
38

39
00:04:55,820 --> 00:05:00,920
We can just decrease the opacity of our text. And that's enough. 70% is good.
39

40
00:05:05,800 --> 00:05:08,140
I won't bother filling this one out with real text.
40

41
00:05:08,140 --> 00:05:11,080
Let's head to Google and generate some dummy text.
41

42
00:05:11,110 --> 00:05:17,830
There are websites that can do that for us.
42

43
00:05:17,860 --> 00:05:20,270
This is one website for example.
43

44
00:05:20,300 --> 00:05:24,930
Yeah, we can specify amount of text we want and it can generate it for us.
44

45
00:05:25,570 --> 00:05:28,770
And then copy the text and paste it in our designs.
45

46
00:05:34,470 --> 00:05:35,110
Center,
46

47
00:05:35,110 --> 00:05:36,660
and let's snap it to our grid.
47

48
00:06:04,890 --> 00:06:06,030
It's a little tight.
48

49
00:06:06,030 --> 00:06:13,000
Let's give it a little more line spacing.
49

50
00:06:13,240 --> 00:06:14,310
That's about right.
50

51
00:06:19,910 --> 00:06:24,650
I'll skip the button. And add the mockup of our imaginary ChatApp here.
51

52
00:06:24,800 --> 00:06:30,170
Now, instead of copying this whole thing in our document, I'm actually going to export it as an image.
52

53
00:06:30,260 --> 00:06:36,740
And place that image instead. Will make it easier to work with and we won't overload our page with unnecessary
53

54
00:06:36,740 --> 00:06:42,280
elements. To export anything from Figma selected it and in the properties, panel go to export and click
54

55
00:06:42,290 --> 00:06:45,480
plus. You can pick a different file format. JPG is
55

56
00:06:45,490 --> 00:06:46,420
good for us.
56

57
00:06:46,550 --> 00:06:52,790
This here that says 1x, lets you change the size of the export. If it says 1x, then it will export
57

58
00:06:52,790 --> 00:06:56,640
in its exact dimensions. If it's 2x then it will double.
58

59
00:06:56,660 --> 00:07:03,410
So, if your designs are 200 pixels by 300 pixels, the export is going to be 400 by 600 pixels.
59

60
00:07:03,410 --> 00:07:07,560
What's this for? Is to make our assets looking nice and crisp on HD screens.
60

61
00:07:07,580 --> 00:07:08,620
More about this later.
61

62
00:07:08,630 --> 00:07:12,310
Let's not get ahead of ourselves, for now, 1x will do just fine.
62

63
00:07:12,380 --> 00:07:29,030
Let's place our mockup in our designs.
63

64
00:07:50,630 --> 00:07:56,260
As you can see here, they are using this browser bar on it and also a shadow behind the mockup.
64

65
00:07:56,260 --> 00:07:59,810
Let's pass the browser bar, but add a similar shadow to our image.
65

66
00:07:59,840 --> 00:08:02,620
Shadows are under Effects. Click plus icon.
66

67
00:08:02,630 --> 00:08:05,120
The first thing is usually the shadow.
67

68
00:08:05,120 --> 00:08:06,560
It added the small shadow,
68

69
00:08:06,560 --> 00:08:07,880
this doesn't look very nice.
69

70
00:08:07,880 --> 00:08:10,910
Click the sun icon to edit the shadow properties.
70

71
00:08:10,910 --> 00:08:13,800
Let's use our black as the base of our shadow.
71

72
00:08:13,850 --> 00:08:18,470
And it has this little blue in it, which will make it look more like part of our designs.
72

73
00:08:18,500 --> 00:08:22,910
When you add color with 100% opacity, you get this weird shadow. Never do this.
73

74
00:08:22,910 --> 00:08:25,490
This isn't really a shadow. Figma's default
74

75
00:08:25,490 --> 00:08:31,400
25% is generally the maximum opacity you'd want to use for your shadows. Blur is basically
75

76
00:08:31,400 --> 00:08:34,930
how the shadow spreads. How it feathers out. Play with it,
76

77
00:08:34,930 --> 00:08:36,570
so you understand how it works.
77

78
00:08:36,590 --> 00:08:40,320
They're using a heavy blur and low opacity on their shadow.
78

79
00:08:40,340 --> 00:08:47,600
I quite like that and we'll do something similar.  X and Y is the offset of the shadow. Meaning which way
79

80
00:08:47,600 --> 00:08:54,500
the shadow falls. X for a horizontal offset and Y for vertical. When they are on 0, it falls equally
80

81
00:08:54,500 --> 00:08:55,900
on all four sides.
81

82
00:08:55,970 --> 00:08:57,440
If we add horizontal offset,
82

83
00:08:57,440 --> 00:09:00,620
notice how shadow moves towards the right.
83

84
00:09:00,620 --> 00:09:02,900
And if we add a vertical offset, it moves down.
84

85
00:09:05,990 --> 00:09:09,060
Or if you go negative values, then it moves up.
85

86
00:09:09,230 --> 00:09:15,140
Good design practice is to add positive Vertical Y-offset. Because light most of the time comes from the top.
86

87
00:09:15,140 --> 00:09:21,200
Be it outdoors in the sun, or indoors the ceiling lights. And if the light comes from the top, then
87

88
00:09:21,200 --> 00:09:23,510
it will cast shadow pointing downwards.
88

89
00:09:23,510 --> 00:09:26,000
This just looks weird, it doesn't even look like a shadow.
89

90
00:09:26,300 --> 00:09:30,130
Often I see websites use no offset at all.
90

91
00:09:30,170 --> 00:09:31,880
And that's not very natural.
91

92
00:09:31,880 --> 00:09:37,460
That means light source is coming directly from the front. Like someone is pointing a flashlight at an
92

93
00:09:37,460 --> 00:09:37,960
object.
93

94
00:09:38,000 --> 00:09:42,200
Not a very common scenario. Adding horizontal offset isn't very common.
94

95
00:09:42,200 --> 00:09:45,570
Some designers do it, but it's not my thing.
95

96
00:09:45,590 --> 00:09:47,930
And I don't think it's a wrong thing to do.
96

97
00:09:47,960 --> 00:09:53,870
But for elements that are part of the interface, like this and image, the buttons, cards and so on, shadow
97

98
00:09:53,870 --> 00:09:56,270
with only the vertical offset looks the best.
98

99
00:09:56,270 --> 00:10:01,560
So, keep X to 0 and add some vertical offset only. That looks about right.
99

100
00:10:01,610 --> 00:10:06,110
I'm eye-balling here. Not using any particular guidelines with shadows. Just looking what looks the best,
100

101
00:10:06,110 --> 00:10:12,800
most natural and nearly unnoticeable. That usually is the best thing for shadows. That it doesn't
101

102
00:10:12,800 --> 00:10:20,830
feel like it's there. Otherwise, it creates extra shapes that our eyes need to digest. They're using rounded
102

103
00:10:20,830 --> 00:10:21,910
shapes on their mockup.
103

104
00:10:21,910 --> 00:10:26,290
It's quite nice. Rounded shapes are usually the nicest in web design.
104

105
00:10:26,290 --> 00:10:29,530
They feel like finished object, rather than unfinished.
105

106
00:10:29,530 --> 00:10:32,600
Of course, strict edges have their benefits as well.
106

107
00:10:32,610 --> 00:10:34,630
Again, no rules with a rounding the corners.
107

108
00:10:34,630 --> 00:10:39,820
But if we match it with a roundness of the shapes within the mockup itself, we'll achieve a more consistent
108

109
00:10:39,820 --> 00:10:40,460
look.
109

110
00:10:40,660 --> 00:10:42,160
And that's quite nice.
110

111
00:10:42,160 --> 00:10:47,890
Let's have those dotted patterns behind it. Using shapes like these dots or other sort of shapes are
111

112
00:10:47,890 --> 00:10:49,020
a good idea.
112

113
00:10:49,150 --> 00:10:54,700
They add an extra level of dimension. And all those other benefits we have learned in the overlapping
113

114
00:10:54,700 --> 00:10:56,310
trick. Because that's what this is.
114

115
00:10:56,350 --> 00:11:01,870
Overlapping. It doesn't have to be the dots. It can be circles, rectangles, triangles or any other sort
115

116
00:11:01,870 --> 00:11:07,540
of shape. But obviously it has to make sense. Then when we repeat these dots across our pages, we get the
116

117
00:11:07,540 --> 00:11:09,240
benefits of repetition trick.
117

118
00:11:09,340 --> 00:11:38,000
It creates this rhythm of the design, just like a beat in a song. And ties the whole design together.
118

119
00:11:38,120 --> 00:11:40,280
Okay, I'm gonna pass these boxes here.
119

120
00:11:40,280 --> 00:11:43,190
I'm not going to do them. And go to the next section right away.