We've got the mood board, we've got the wireframe. 1
We're ready to design our home page. 2
Let's create a new page and name it "Design". And copy the wireframe in here, because it's going to be easier 3
for us to follow the wireframe, instead of going back and forth between pages. Next to it, 4
let's add a new frame and our usual 12-point grid. 5
OK. 6
Let's find a background photo for our hero section. I quite like this photo, because it looks non-stock 7
a bit more realistic. Shows that she's working remotely and she's happy because our team collaboration 8
platform is just that good. 9
The only problem is that she's centered. And we want to have a layout, where we can put content on the 10
left and it's not overlapping with her face. 11
If the photo is a good quality, then we are able to move her around and position her on the right side. 12
I'm going to create a new rectangle, so we can mask the photo inside it and position it exactly the way 13
we want it. 14
I have included all the photos and assets in the project file. 15
So if you want to reuse same photos, you can do that and you can find that on the Assets page. But if 16
you want to, go for your own interpretation. And I would definitely recommend you to do that, find your 17
own photos and use that one instead. 18
Looks pretty good. 19
There is a good amount of space, so we can put our content on the left. 20
Now let's choose typography. This time, 21
let's try to find a typeface that can work both on headlines and paragraph. 22
Not for any specific reason, but just to practice. For these, we need to find something that is neutral 23
because we're going to use it for a paragraph. And something that has a lot of weight variations. 24
We can narrow that down in Google using number of styles. 6 styles, in reality, means 3 different 25
weights. Because each weight has an Italic version with it. 26
So that's not really enough. 27
I'm going to go with at least 8 styles. 28
This one is actually called Work Sans, might be a good option. 29
Cabin isn't bad either. 30
On the bottom here, you can switch this around, to see how it looks in a paragraph as well. I don't like 31
Work Sans, how it looks inside the paragraph, it's quite nice in the headline but in a paragraph, it seems 32
a little clumsy. Let's check Cabin. 33
Yeah, paragraph looks much better on Cabin . 34
Just a quick double check of the typeface manual. Remember? We always read the font manual, to avoid embarrassing 35
choices. 36
Excellent. 37
All safe in the description. 38
And now let's go apply that font to our page. 39
Instead of creating it from scratch. 40
I'm going to copy it from the wireframe in here. 41
No need to reinvent the wheel every time. 42
I'm just playing around here, mindlessly, to see what works the best. I think this will do. Since we're 43
not using a heavier weight, then line height doesn't need to come closer. 44
Less mass means less gravitational pull. 45
Hope you've been paying attention to your physics class in school. And the paragraph 46
text. 47
We need to add a dark overlay on the image, otherwise content won't be visible much. 48
Now for the call to action form, 49
I'm going to use the blue from this design. 50
But I'm actually going to brighten it up a little to make it even more vibrant. 51
They also have this yellow on their page so let's copy that too. 52
Maybe we'll find a use for it. 53
You're free to choose different colors if you'd like. 54
Up to you how closely you want to follow along with me. 55
Pixel by pixel or maybe remix a little. 56
It's fine either way. 57
There is a learning value in both of the approaches. 58
I'm just eyeing the margins and distances here, not really going by the grid, as you can see. 59
Always trust your eyes over any design guidelines and rules. Blindly following them sometimes will render 60
far from optimal results. 61
I'm also trying to avoid that corner of the furniture. The objects in the photo and our interface elements 62
sometimes can interact with each other. 63
This can be good interaction. But sometimes it can create unnecessary tension. This, for example, is a bad 64
tension. 65
That corner in the gap between the button and the field, makes me cringe. 66
Alright, looking sweet so far. 67
Let's put a navigation bar. 68
Let's make margins 12 on the top end and bottom and 20 on the sides. 69
If you want to do a ghost button here, you can. 70
Or even to make this blue as well. 71
Feel free to remix. 72
♫ 73
♫ 74
♫ 75
Let's add a logo too. 76
Here's another simple and quick way to make a logo. 77
Just write the name in small caps and add a dot at the end with some contrasting color. 78
And there you've got a brand new logo. 79
So far looking good. 80
One thing I want to fix though is that dark overlay on the image. 81
Right now we are using a full overlay but the model doesn't actually have to be sitting under a dark 82
overlay. Because we don't have any content in front of her. 83
Now how do we brighten her up, but keep other parts dark? 84
We'll use a gradient fill instead of a solid fill. 85
So go to the fill that we created and switch that to a radial gradient. 86
This time not linear. 87
Why? 88
Because with radial we can create sort of a spotlight on her. 89
You see how the black color starts in the center and fades in all directions. 90
That's not the direction we want. 91
We want exact opposite of that. To start transparent and darken on all directions. 92
We need to reverse the Start and End colors. 93
There we have exact the direction we need. 94
Now we can position that spotlight exactly where we want it to be. This handle on the left decreases 95
the radius of that circle. 96
You can play with other handles too to achieve exact result 97
you want. 98
OK. 99
Now back to 40% opacity. 100
And there you go. 101
Her face isn't dark anymore and looks better overall. 102
This is a great way to utilize images that have too much detail and too much going on in them. 103
You can create spotlights on your focal points and then dark and rest of the image. 104
All right. 105
Let's pause here and continue the rest in the next video.