And we're back 1
Finally, let's add the navbar and we're done with our hero section. 2
Let's create the logo for our fake chat application. And let's give it some original name. 3
Something like ChatApp. We can use Poppins as our typeface and create that similar contrast of thin 4
and thick. Just like they have it on their logo. 5
Remember this trick from the contrast lesson? Combine thick and thin and bam! 6
You have an interesting element. Let's add some navigation links and a button at the end. 7
Here's another cool Figma trick. 8
Select all links and in the alignment panel click Tidy Up. 9
This will usually distribute objects equally between them. But we can go step further and set exact margin 10
between the elements right from here. 11
Let's use 30 pixels because that's our default margin of the grid. 12
We need a button. 13
Let's create a button out of one of these links. 14
When we put a button in the navbar, it's usually best to use the same text style as the navigation link. 15
Looks better. 16
Let's use the same 30 pixel margin from the top. And we're going to align everything in the navigation 17
bar horizontally in the center. 18
Always check your designs in 100% view. Because those are the real sizes and dimensions that 19
are gonna go on the actual site. 20
Now for the middle section. I'm gonna do it a little simpler. Just with a headline, paragraph and just 21
one screen of our ChatApp that we already have. 22
I'm going to use exactly their font color. 23
It's what you would call off-black. Black but not as saturated and sharp as a usual black. And I'm going 24
to add that black to our palette. 25
It's a good choice for our palette as well because it has some blue inside, like a blue hue. You can 26
see that inside the color map. 27
Let's remove the letter-spacing. Because this headline isn't as big and heavy anymore. So we don't need 28
as much tight space. 29
Let's do the same for the paragraph 30
text. 31
I think they're using light version here, but I'm not a fan of thinner paragraph fonts, because they are 32
sometimes harder to read on lower definition screens. On phones, tablets and retina display laptops it's 33
fine. 34
But on desktop screens with less pixel density, they are not going to be as sharp. 35
Do you notice the visual hierarchy they have created here? 36
The paragraph is smaller, thinner and lighter color. 37
We'll do the same with a color. 38
We can just decrease the opacity of our text. And that's enough. 70% is good. 39
I won't bother filling this one out with real text. 40
Let's head to Google and generate some dummy text. 41
There are websites that can do that for us. 42
This is one website for example. 43
Yeah, we can specify amount of text we want and it can generate it for us. 44
And then copy the text and paste it in our designs. 45
Center, 46
and let's snap it to our grid. 47
It's a little tight. 48
Let's give it a little more line spacing. 49
That's about right. 50
I'll skip the button. And add the mockup of our imaginary ChatApp here. 51
Now, instead of copying this whole thing in our document, I'm actually going to export it as an image. 52
And place that image instead. Will make it easier to work with and we won't overload our page with unnecessary 53
elements. To export anything from Figma selected it and in the properties, panel go to export and click 54
plus. You can pick a different file format. JPG is 55
good for us. 56
This here that says 1x, lets you change the size of the export. If it says 1x, then it will export 57
in its exact dimensions. If it's 2x then it will double. 58
So, if your designs are 200 pixels by 300 pixels, the export is going to be 400 by 600 pixels. 59
What's this for? Is to make our assets looking nice and crisp on HD screens. 60
More about this later. 61
Let's not get ahead of ourselves, for now, 1x will do just fine. 62
Let's place our mockup in our designs. 63
As you can see here, they are using this browser bar on it and also a shadow behind the mockup. 64
Let's pass the browser bar, but add a similar shadow to our image. 65
Shadows are under Effects. Click plus icon. 66
The first thing is usually the shadow. 67
It added the small shadow, 68
this doesn't look very nice. 69
Click the sun icon to edit the shadow properties. 70
Let's use our black as the base of our shadow. 71
And it has this little blue in it, which will make it look more like part of our designs. 72
When you add color with 100% opacity, you get this weird shadow. Never do this. 73
This isn't really a shadow. Figma's default 74
25% is generally the maximum opacity you'd want to use for your shadows. Blur is basically 75
how the shadow spreads. How it feathers out. Play with it, 76
so you understand how it works. 77
They're using a heavy blur and low opacity on their shadow. 78
I quite like that and we'll do something similar. X and Y is the offset of the shadow. Meaning which way 79
the shadow falls. X for a horizontal offset and Y for vertical. When they are on 0, it falls equally 80
on all four sides. 81
If we add horizontal offset, 82
notice how shadow moves towards the right. 83
And if we add a vertical offset, it moves down. 84
Or if you go negative values, then it moves up. 85
Good design practice is to add positive Vertical Y-offset. Because light most of the time comes from the top. 86
Be it outdoors in the sun, or indoors the ceiling lights. And if the light comes from the top, then 87
it will cast shadow pointing downwards. 88
This just looks weird, it doesn't even look like a shadow. 89
Often I see websites use no offset at all. 90
And that's not very natural. 91
That means light source is coming directly from the front. Like someone is pointing a flashlight at an 92
object. 93
Not a very common scenario. Adding horizontal offset isn't very common. 94
Some designers do it, but it's not my thing. 95
And I don't think it's a wrong thing to do. 96
But for elements that are part of the interface, like this and image, the buttons, cards and so on, shadow 97
with only the vertical offset looks the best. 98
So, keep X to 0 and add some vertical offset only. That looks about right. 99
I'm eye-balling here. Not using any particular guidelines with shadows. Just looking what looks the best, 100
most natural and nearly unnoticeable. That usually is the best thing for shadows. That it doesn't 101
feel like it's there. Otherwise, it creates extra shapes that our eyes need to digest. They're using rounded 102
shapes on their mockup. 103
It's quite nice. Rounded shapes are usually the nicest in web design. 104
They feel like finished object, rather than unfinished. 105
Of course, strict edges have their benefits as well. 106
Again, no rules with a rounding the corners. 107
But if we match it with a roundness of the shapes within the mockup itself, we'll achieve a more consistent 108
look. 109
And that's quite nice. 110
Let's have those dotted patterns behind it. Using shapes like these dots or other sort of shapes are 111
a good idea. 112
They add an extra level of dimension. And all those other benefits we have learned in the overlapping 113
trick. Because that's what this is. 114
Overlapping. It doesn't have to be the dots. It can be circles, rectangles, triangles or any other sort 115
of shape. But obviously it has to make sense. Then when we repeat these dots across our pages, we get the 116
benefits of repetition trick. 117
It creates this rhythm of the design, just like a beat in a song. And ties the whole design together. 118
Okay, I'm gonna pass these boxes here. 119
I'm not going to do them. And go to the next section right away.