0
1
00:00:02,730 --> 00:00:05,540
And we're back continuing with our wireframe below the fold.
1

2
00:00:05,580 --> 00:00:09,210
Let's see which one of the inspirations could work for our next section.
2

3
00:00:09,240 --> 00:00:15,450
It'll be a good idea to demonstrate the product by showing some screens. A section like this could work.
3

4
00:00:15,480 --> 00:00:18,120
Have the screens on one side and the text next to it.
4

5
00:00:25,380 --> 00:00:30,270
We could steal some content from Slack. Using content from the competitors is a valid option.
5

6
00:00:30,270 --> 00:00:33,140
This is how your clients will try to get ideas anyways.
6

7
00:00:33,150 --> 00:00:37,710
But make sure to put a comment on it, telling where you grabbed the content from. You don't want them
7

8
00:00:37,710 --> 00:00:42,570
to think that you came up with this content and then at some point find out that, you know, it was grabbed
8

9
00:00:42,570 --> 00:00:45,940
from the competitor, because they're just gonna think that you just stole it, right?
9

10
00:01:08,810 --> 00:01:14,510
Here we can add "Learn More" link to the other potential pages that will explain the specific features
10

11
00:01:14,540 --> 00:01:17,040
in more detail, like they have done it here.
11

12
00:01:17,060 --> 00:01:22,820
It's a good way to direct visitors on different pages of the website. And also it brings a little more
12

13
00:01:23,150 --> 00:01:25,170
detail to the text block.
13

14
00:01:25,190 --> 00:01:26,620
We already have a link in style.
14

15
00:01:26,630 --> 00:01:36,250
Just change the color to your primary color.
15

16
00:01:36,350 --> 00:01:40,130
We can also add a little arrow to this link. Inside the components
16

17
00:01:40,130 --> 00:01:43,530
we can search for an icon and grab that and put it next to it.
17

18
00:02:13,990 --> 00:02:16,220
And that's all for the section.
18

19
00:02:18,910 --> 00:02:21,830
Now let's create rest of the sections in the body.
19

20
00:02:21,850 --> 00:02:24,010
I was thinking of split sections like this.
20

21
00:02:32,840 --> 00:02:36,920
Content is the same style as to what we just did, so we can just copy that.
21

22
00:02:46,100 --> 00:02:49,790
And for the graphic, we're just going to put the image place holder for now.
22

23
00:02:49,970 --> 00:02:55,430
Although for our clients we'll explain our vision about these images. That we are going to create a sort
23

24
00:02:55,430 --> 00:03:00,110
of an Augmented Reality View. Adding mockups from the platform onto real photos.
24

25
00:03:09,680 --> 00:03:12,510
Let's see. Some content for simple task management.
25

26
00:03:12,530 --> 00:03:14,390
I'm gonna write this on my own.
26

27
00:03:14,390 --> 00:03:15,140
Don't judge me.
27

28
00:03:19,080 --> 00:03:20,010
Not so shabby.
28

29
00:03:26,990 --> 00:03:30,280
Let's have one more of the same layout with the photo.
29

30
00:03:30,830 --> 00:03:32,310
Let's just duplicate this.
30

31
00:03:32,330 --> 00:03:33,080
I'm holding on
31

32
00:03:33,080 --> 00:03:34,600
Alt/Option key here.
32

33
00:03:34,610 --> 00:03:37,130
So it duplicates when I drag the whole thing.
33

34
00:03:37,130 --> 00:03:43,100
But you should know that by now. Wanna see a cool Figma trick? To reverse the layout of the section, group
34

35
00:03:43,100 --> 00:03:44,080
the content first,
35

36
00:03:47,840 --> 00:03:49,030
then select everything.
36

37
00:03:49,060 --> 00:03:52,370
And these 2 pink circles should appear in the middle.
37

38
00:03:52,400 --> 00:03:55,160
Just hold it and move the content on the other side.
38

39
00:03:56,120 --> 00:03:57,680
So simple, a baby could do it.
39

40
00:04:16,170 --> 00:04:18,200
Let's now add a testimonial section.
40

41
00:04:18,240 --> 00:04:20,010
I really like this one here.
41

42
00:04:20,010 --> 00:04:25,530
I'm going to recreate it nearly as is. From a marketing standpoint, having testimonials on product or
42

43
00:04:25,530 --> 00:04:27,840
service websites is a great idea.
43

44
00:04:27,840 --> 00:04:32,670
It increases trust in the brand and audience gets a better feel for the product by reading real people
44

45
00:04:32,670 --> 00:04:33,620
experiences.
45

46
00:05:04,040 --> 00:05:08,960
One great way to design testimonials is by adding 5-stars, just like they've done here.
46

47
00:05:08,990 --> 00:05:12,360
People love to see how someone has rated the product.
47

48
00:05:12,380 --> 00:05:18,290
It's more powerful and simply seeing 5 stars on the page, instantly brings people positive feelings
48

49
00:05:18,290 --> 00:05:22,220
about the product. Because there is a strong association in people's brains
49

50
00:05:22,210 --> 00:05:24,500
linked to those 5 little icons.
50

51
00:05:24,500 --> 00:05:26,140
It's a little psychological technique.
51

52
00:05:26,150 --> 00:05:29,300
Your employers will appreciate your understanding of such things.
52

53
00:06:48,700 --> 00:06:53,890
So, I have just tried to match it roughly to the inspiration, not using any specific colors or anything
53

54
00:06:54,250 --> 00:06:57,100
in real designs we'll use golden stars and the white card.
54

55
00:06:57,130 --> 00:07:01,600
But here we got to keep the grey color, so we don't want to worry about the shadows to make the white
55

56
00:07:01,600 --> 00:07:03,300
card visible on a white background.
56

57
00:07:03,310 --> 00:07:07,320
Now just group the whole thing and duplicate it in a similar way as our inspiration.
57

58
00:07:14,510 --> 00:07:16,460
And the last one to go off the frame.
58

59
00:07:19,660 --> 00:07:22,460
One thing to note here, we don't want this whole card visible.
59

60
00:07:22,570 --> 00:07:25,120
We want it clipped like it's an inspiration.
60

61
00:07:25,450 --> 00:07:26,580
So how do we do that?
61

62
00:07:26,590 --> 00:07:30,900
The reason it's not clipping is because it's not part of the frame anymore.
62

63
00:07:30,910 --> 00:07:37,340
You can see that in the layers panel. When you move something off the frame a little, Figma looks at
63

64
00:07:37,350 --> 00:07:42,330
your cursor and decides if you want it on the frame or off the frame, based on that.
64

65
00:07:42,360 --> 00:07:48,060
You see how that group gets clipped when the cursor moves inside the frame? Or becomes fully visible
65

66
00:07:48,090 --> 00:07:49,620
when moves outside of the frame.
66

67
00:07:49,920 --> 00:07:55,830
So to move it back, just make sure your cursor is inside the frame. Then position with arrow keys or in
67

68
00:07:55,830 --> 00:07:58,120
a way that you don't move the cursor outside.
68

69
00:07:58,140 --> 00:07:58,770
Fantastic.
69

70
00:08:01,860 --> 00:08:04,560
We can keep the dummy text inside testimonials.
70

71
00:08:04,590 --> 00:08:09,180
Those are something our clients would need to ask their users and produce it that way.
71

72
00:08:09,180 --> 00:08:11,970
And let's add those slider arrows, just like in the design.
72

73
00:09:01,800 --> 00:09:04,240
Lastly let's add footer and be done with it.
73

74
00:09:04,480 --> 00:09:09,610
As I often do in my projects, I'm going to copy the footer content from our previous exercise.
74

75
00:09:09,610 --> 00:09:13,220
Since we use the same 12-point grid, columns fit just right.
75

76
00:09:13,270 --> 00:09:19,030
This reusing different components from, between different projects, comes from, a little bit from laziness,
76

77
00:09:19,390 --> 00:09:21,010
but works out really well,
77

78
00:09:21,010 --> 00:09:26,350
at the end of the day. You start to master these common elements, as you use it in different projects.
78

79
00:09:26,350 --> 00:09:32,020
And start understanding benefits and limitations of the layout. And at some point, you refine it until
79

80
00:09:32,020 --> 00:09:34,930
you have a near perfect personal template.
80

81
00:10:10,670 --> 00:10:30,210
Now let's update the colors and text styles.
81

82
00:10:47,160 --> 00:10:50,690
Later in the design stage, I'm thinking to use a dark footer, like this.
82

83
00:10:50,850 --> 00:10:57,120
And since we know from our project brief that we need a Newsletter Signup form, we can add a similar
83

84
00:10:57,120 --> 00:11:54,820
email Form right here, in the footer.
84

85
00:12:29,920 --> 00:12:31,660
And there. That's our footer.
85

86
00:12:31,690 --> 00:12:33,850
All right, wireframes for the home page is done.
86

87
00:12:33,850 --> 00:12:37,270
Next we're going to wireframe the article page for the blog.