0
1
00:00:02,650 --> 00:00:03,630
And we're back.
1

2
00:00:03,640 --> 00:00:06,180
We're going to design this section now.
2

3
00:00:06,190 --> 00:00:12,970
We're going to need to find some mockups for the product so we can showcase it. Just like the last
3

4
00:00:12,970 --> 00:00:17,800
time I'm going to search for a sketch resources and then import them inside Figma.
4

5
00:00:17,790 --> 00:00:32,270
I'm going to try different keywords like "project", or "task", or "dashboard".
5

6
00:00:32,400 --> 00:00:34,170
I've already found this mockup, which
6

7
00:00:34,200 --> 00:00:38,930
I'm going to import inside Figma and then use that. If you like to use the same thing,
7

8
00:00:38,930 --> 00:00:41,160
you can, check the assets page.
8

9
00:00:41,250 --> 00:00:42,620
I have put it there.
9

10
00:00:42,750 --> 00:00:49,020
But also if you want to find something of your own, you can do that. And you can go on a resources page,
10

11
00:00:49,020 --> 00:00:55,440
like one from Sketch or one form Figma, that I have included in the Resources page, where you can find different
11

12
00:00:55,440 --> 00:01:01,440
free mockups and templates. Or anything like that, that you could include as the product showcase. On the
12

13
00:01:01,440 --> 00:01:06,540
import, it tells me that we don't have fonts, that are part of this document. What we're going to do
13

14
00:01:06,540 --> 00:01:08,480
is replace with something else.
14

15
00:01:08,820 --> 00:01:14,580
Let's use Roboto instead. On the left side it tells you the font and on the right to tells you the weight
15

16
00:01:14,640 --> 00:01:15,670
that was used.
16

17
00:01:15,750 --> 00:01:20,460
It will automatically select the correct weight for you, but if your replacement font doesn't have the
17

18
00:01:20,460 --> 00:01:23,280
same exact weight, then select something manually.
18

19
00:01:28,700 --> 00:01:31,000
This meeting screen seems pretty good.
19

20
00:01:31,010 --> 00:01:33,920
We can bring that in and let's use our own blue.
20

21
00:02:05,530 --> 00:02:09,930
To select contents of a group hold Control or Command and select with your mouse.
21

22
00:02:09,990 --> 00:02:16,070
It will do a similar Deep Select like you do by clicking and holding the same key. And press shift
22

23
00:02:16,070 --> 00:03:13,420
in case you want to deselect any of the elements.
23

24
00:04:08,240 --> 00:04:11,230
Since this screen is quite wide, we can move it off the edge.
24

25
00:04:11,240 --> 00:04:14,870
That's also a pretty good trick.
25

26
00:04:19,930 --> 00:04:28,970
And I'm going to add a shadow to it, to make it more visible.
26

27
00:04:29,470 --> 00:04:34,580
There is a tip of foreshadows, make them subtle, like it doesn't draw any attention to it. If it draws
27

28
00:04:34,580 --> 00:04:35,960
attention then it's too much.
28

29
00:04:40,550 --> 00:04:45,460
The edges of the screen don't have a good contrast with a background white. There is a nice trick,
29

30
00:04:45,480 --> 00:04:51,590
designers use in this case, we can use off-white background, instead of a purely white one. Sort of like
30

31
00:04:51,590 --> 00:04:57,620
what they're using here. We can grab this exact off-white color and apply on the entire frame as a background
31

32
00:04:57,620 --> 00:04:58,050
fill.
32

33
00:05:43,440 --> 00:05:44,930
There, that's a huge improvement.
33

34
00:05:44,930 --> 00:05:47,220
The edges of the screen are much more clear now.
34

35
00:05:49,960 --> 00:05:51,300
Let's round the corners now.
35

36
00:05:51,370 --> 00:05:55,480
It's always a better idea to round the corner on interface elements like that.
36

37
00:05:55,540 --> 00:06:02,330
It feels more finished. Pointed corners feel like someone gave up halfway through. You know what would
37

38
00:06:02,330 --> 00:06:07,780
be nice? To do something like this. To pop some elements out of the mockup.
38

39
00:06:07,790 --> 00:06:16,230
It's going to add more dimension and will make the whole thing much more interesting.
39

40
00:06:21,770 --> 00:06:26,440
Here's a cool Figma trick. You can copy properties from one object to another one. Like the shadow we
40

41
00:06:26,450 --> 00:06:27,440
just created.
41

42
00:06:27,440 --> 00:06:33,950
Just select the property inside the panel, click on the edge here to select it properly, then Control+C
42

43
00:06:33,980 --> 00:06:37,890
to copy and then paste it on the desired element.
43

44
00:06:37,970 --> 00:06:41,230
Or you can also create the style out of it, and save that style,
44

45
00:06:41,250 --> 00:07:49,150
then reuse it on other elements.
45

46
00:07:56,670 --> 00:07:57,560
Looking good so far.
46

47
00:07:57,570 --> 00:08:09,350
Let's add the content.
47

48
00:09:03,210 --> 00:09:03,360
♫
48

49
00:09:06,310 --> 00:09:09,140
♫
49

50
00:09:11,990 --> 00:09:12,310
♫
50

51
00:09:15,090 --> 00:09:17,830
♫
51

52
00:09:41,240 --> 00:09:42,490
And all looking fine.
52

53
00:09:45,180 --> 00:09:47,720
Now let's create a section like this.
53

54
00:09:47,790 --> 00:09:51,990
Usually, the way we've done in other exercise, we had the photo on the edge,
54

55
00:09:51,990 --> 00:09:54,100
But these guys, they have it a little different.
55

56
00:09:54,360 --> 00:09:57,450
They have a gap on the edge and also in between the sections.
56

57
00:09:57,480 --> 00:10:03,210
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

58
00:10:03,210 --> 00:10:08,490
the interface elements like in the inspiration. A busy picture is not going to work.
58

59
00:10:08,490 --> 00:10:12,850
Also, what I often like to do, is to look for photos from the same author.
59

60
00:10:12,930 --> 00:10:17,260
When you use photos with different style it creates inconsistent look.
60

61
00:10:17,370 --> 00:10:22,470
It's an obvious tell that the photos are stock and weren't made as part of one photoshoot for that
61

62
00:10:22,470 --> 00:10:23,290
website.
62

63
00:10:23,310 --> 00:10:27,880
But the photos from the same contributor will often have very similar look.
63

64
00:10:27,930 --> 00:10:33,630
It will have the same style, same filtering and overall similar feel to it. Using such photos create an
64

65
00:10:33,630 --> 00:10:35,720
amazing consistency on the page.
65

66
00:10:35,820 --> 00:10:37,310
In our case, we are in luck,
66

67
00:10:37,320 --> 00:10:42,930
the contributor of our hero photo does have other photos that we could potentially use.
67

68
00:10:43,040 --> 00:10:47,930
I'm thinking of using these 2. Because they're taken in the same scene on that leather couch.
68

69
00:10:47,930 --> 00:10:53,100
So, this is an even bigger consistency. It's going to feel like we made our own photoshoot for this
69

70
00:10:53,100 --> 00:12:25,070
website.
70

71
00:12:28,210 --> 00:12:34,590
And now, I'm going to take some elements from the mockup itself of the product. And place them just like
71

72
00:12:34,590 --> 00:12:38,520
inside the inspiration, just place them over the photo somewhere.
72

73
00:13:39,590 --> 00:13:39,710
♫
73

74
00:14:29,900 --> 00:14:43,720
♫
74

75
00:15:45,790 --> 00:15:53,690
♫
75

76
00:16:00,970 --> 00:16:01,130
♫
76

77
00:16:06,510 --> 00:16:41,170
♫
77

78
00:16:42,420 --> 00:16:43,490
It's looking pretty neat.
78

79
00:16:43,510 --> 00:16:44,850
We've lucked out on these photos.
79

80
00:16:44,850 --> 00:16:50,070
They're not just same style and scene, but also both models are smiling and looking at each other's direction.