And we're back. 1
We're going to design this section now. 2
We're going to need to find some mockups for the product so we can showcase it. Just like the last 3
time I'm going to search for a sketch resources and then import them inside Figma. 4
I'm going to try different keywords like "project", or "task", or "dashboard". 5
I've already found this mockup, which 6
I'm going to import inside Figma and then use that. If you like to use the same thing, 7
you can, check the assets page. 8
I have put it there. 9
But also if you want to find something of your own, you can do that. And you can go on a resources page, 10
like one from Sketch or one form Figma, that I have included in the Resources page, where you can find different 11
free mockups and templates. Or anything like that, that you could include as the product showcase. On the 12
import, it tells me that we don't have fonts, that are part of this document. What we're going to do 13
is replace with something else. 14
Let's use Roboto instead. On the left side it tells you the font and on the right to tells you the weight 15
that was used. 16
It will automatically select the correct weight for you, but if your replacement font doesn't have the 17
same exact weight, then select something manually. 18
This meeting screen seems pretty good. 19
We can bring that in and let's use our own blue. 20
To select contents of a group hold Control or Command and select with your mouse. 21
It will do a similar Deep Select like you do by clicking and holding the same key. And press shift 22
in case you want to deselect any of the elements. 23
Since this screen is quite wide, we can move it off the edge. 24
That's also a pretty good trick. 25
And I'm going to add a shadow to it, to make it more visible. 26
There is a tip of foreshadows, make them subtle, like it doesn't draw any attention to it. If it draws 27
attention then it's too much. 28
The edges of the screen don't have a good contrast with a background white. There is a nice trick, 29
designers use in this case, we can use off-white background, instead of a purely white one. Sort of like 30
what they're using here. We can grab this exact off-white color and apply on the entire frame as a background 31
fill. 32
There, that's a huge improvement. 33
The edges of the screen are much more clear now. 34
Let's round the corners now. 35
It's always a better idea to round the corner on interface elements like that. 36
It feels more finished. Pointed corners feel like someone gave up halfway through. You know what would 37
be nice? To do something like this. To pop some elements out of the mockup. 38
It's going to add more dimension and will make the whole thing much more interesting. 39
Here's a cool Figma trick. You can copy properties from one object to another one. Like the shadow we 40
just created. 41
Just select the property inside the panel, click on the edge here to select it properly, then Control+C 42
to copy and then paste it on the desired element. 43
Or you can also create the style out of it, and save that style, 44
then reuse it on other elements. 45
Looking good so far. 46
Let's add the content. 47
♫ 48
♫ 49
♫ 50
♫ 51
And all looking fine. 52
Now let's create a section like this. 53
Usually, the way we've done in other exercise, we had the photo on the edge, 54
But these guys, they have it a little different. 55
They have a gap on the edge and also in between the sections. 56
So we can do the similar way. We want to find photos that have a bit of free space in it. For us to place 57
the interface elements like in the inspiration. A busy picture is not going to work. 58
Also, what I often like to do, is to look for photos from the same author. 59
When you use photos with different style it creates inconsistent look. 60
It's an obvious tell that the photos are stock and weren't made as part of one photoshoot for that 61
website. 62
But the photos from the same contributor will often have very similar look. 63
It will have the same style, same filtering and overall similar feel to it. Using such photos create an 64
amazing consistency on the page. 65
In our case, we are in luck, 66
the contributor of our hero photo does have other photos that we could potentially use. 67
I'm thinking of using these 2. Because they're taken in the same scene on that leather couch. 68
So, this is an even bigger consistency. It's going to feel like we made our own photoshoot for this 69
website. 70
And now, I'm going to take some elements from the mockup itself of the product. And place them just like 71
inside the inspiration, just place them over the photo somewhere. 72
♫ 73
♫ 74
♫ 75
♫ 76
♫ 77
It's looking pretty neat. 78
We've lucked out on these photos. 79
They're not just same style and scene, but also both models are smiling and looking at each other's direction.