And we're back. 1
I'm going to use rounded buttons as well. 2
You can feel free to remix here, if you want to, and use rectangular buttons. 3
To make buttons round, just increase corner radius until they are completely round. 4
For the font, 5
it looks like they are using smaller paragraph text, but a thicker style. 6
OK, that looks about right. 7
The second button is what's called a Ghost Button. 8
This sort of button combination is a great approach because remember what we talked about in the visual hierarchy? 9
You want to guide your audience visually from one element to another. 10
If you have two buttons next to each other and use the same style on them, the audience won't be able 11
to tell which one is the primary button that leads to the primary action of this site. To create this 12
Ghost Button, we need to remove the color fill and add a stroke to the shape. 13
Then change the color of the stroke. 14
Let's check the grid. 15
The buttons aren't aligned with the grid, 16
but that's not a big deal. 17
Buttons and text elements are flexible and they shrink and grow based on the text inside. 18
So we don't have to squeeze them into a grid. And sometimes it's better not to. 19
But in this case, it's quite close and shrinking buttons a little, won't hurt. 20
So I'll snap those bad boys to a grid. 21
Let's move to our hero shot. 22
It's quite an interesting collage. 23
Do you notice one of the design tricks we covered? The overlapping trick. 24
Let's create a similar art. 25
We need to find and add a couple of similar photo shots like those. 26
All right. 27
This should do. Some of these images work, but some don't. 28
When you combine images, always remember the lesson about consistency. 29
So combine images that are very similar in style. Like these two are similar. 30
They are not facing the camera or looking at it and they are proportional to each other. 31
Meaning the photos were taken from a similar distance. 32
You don't want to match these two together. 33
Looks like they have nothing to do with each other. 34
The right one is looking into the camera, facing straight and she she is much closer to the camera, making 35
her face bigger in size. 36
All right. 37
These two look good. 38
Free photo options are quite limited generally and finding the matching style is a little more challenging. 39
So keep that in mind. 40
Now let's create that dotted background shape. 41
Just draw a circle. 42
Choose Ellipse from the shapes or just hit O. When you draw an ellipse hold SHIFT to draw a perfect circle. 43
Then just start duplicating the circle, so horizontally and vertically to create that sort of dotted 44
grid. 45
Select them all. 46
Right-click, and Group Selection. Or use a shortcut 47
Control (or Command) + G. 48
When you position your dot's behind the image, make sure to not have an odd overlap with an image. 49
See how the dots are neatly sitting around the image? 50
And try to use equal spacing. 51
You don't want to create an unnecessary tension by doing something like this. 52
Now, let's find some mockup screens for our imaginary product. Just like they have it here. And also something 53
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
such resources for Scetch, which then can be imported into Figma. 55
Of course, we could search for Figma resources directly but as this is a relatively new tool, 56
the resources aren't as plentiful. Sketchappsources.com is one such place. And also a SketchRepo.com 57
is a good place. 58
I'm thinking to use some sort of Chat or Team Collaboration application as our product. Doesn't really 59
matter. 60
Anything that will fit our designs will do. 61
I found this one previously, which is pretty good. 62
Download and Unzip. Now go to Figma's dashboard. And click this Import File link. And once it's done importing 63
just open up the file. 64
It's done a pretty good job, but you'll notice some things are a little off. Like this corner seems like 65
it's been messed up a little. But that's okay, 66
we're just gonna grab what we need from here and we can fix those messy parts later if we need to. 67
I've saved this screen in the Figma file on one of the pages. 68
If you're going to reuse the same chat screen, then you can just grab it from there. So you don't have 69
to go through the process. 70
I think these chat bubbles will be nice to use in our hero shot. 71
Let's copy it in our document and see how are we going to use them. 72
I think I'll grab a couple of smaller ones and sprinkle them around, to create a sort of chat experience 73
between these girls. 74
I use yellow here because I'm going to put it directly on the blue background, so blue wouldn't work. 75
And also change the profile photos to the girls. 76
♫ 77
♫ 78
♫ 79
♫ 80
That came out quite nice actually. 81
And I'm going to add that dashed line. 82
It's enough like this. Too many elements can add to the noise. 83
One thing I don't like though is the yellow button. 84
It was nice and prominent before, 85
but now that hero art has yellow in it, the button is fighting for attention and sort of trying to visually 86
connect with the art. 87
The shape doesn't help either. 88
The bottom is rounded and those message boxes are rounder too, so way too much similarity. 89
Changing the color to white should fix this issue. 90
That's much better. Now the art looks separate and the content on the left seems like its own thing. 91
It was sort of merging before. Now that our hero art gained a lot of visual importance, 92
it's the focal point of the section. But a very large headline is fighting for the first place too. 93
So either we have to increase the headline and make it number one or make it smaller to give the stage 94
to the art. 95
It doesn't make sense to make a headline focal point, because the art is way too interesting. So headline 96
has to become smaller. 97
75 looks good. 98
And increase the line height a little bit. 99
There. 100
That's much better. 101
The headline is still prominent, but it's not in the way. 102
And we have gained more whitespace and given everything more room to breathe. 103
If you notice, now the buttons look a little too oversized in comparison to the headline. 104
So we've got to fix that. 105
Decrease the text size in buttons as well. And make sure to center them. Double-check it by eye, see if it 106
looks centered or not. 107
Okay. 108
Let's check our grid. 109
Usually hero shots are part of the background canvas and they don't need to be aligned with the grid. 110
But in this case, I'm going to align the edge of the second image to the end of the grid. 111
The straight line of the picture creates a nice edge for me to align it with a grid.