0
1
00:00:02,700 --> 00:00:07,820
In this video, we're going to start creating wireframes for our team collaboration home page.
1

2
00:00:07,830 --> 00:00:09,510
Inside the client project file,
2

3
00:00:23,820 --> 00:00:27,930
create a new page by clicking the plus icon and name it wireframes.
3

4
00:00:27,930 --> 00:00:34,200
We're going to add a frame and the grid, the usual way we do it. Desktop frame and our usual twelve-point
4

5
00:00:34,200 --> 00:00:34,710
grid.
5

6
00:00:46,460 --> 00:00:48,040
Now that we know how to create styles,
6

7
00:00:48,050 --> 00:00:53,630
let's save this grid style for later use in this project. Because we can, so why not. will save us time
7

8
00:00:53,630 --> 00:00:54,010
later.
8

9
00:00:56,350 --> 00:00:59,670
For us to come up with some ideas on what content and layout we should have,
9

10
00:00:59,680 --> 00:01:02,440
let's have a look at our project brief and the mood board.
10

11
00:01:02,440 --> 00:01:07,270
Because project brief is where the goal and high-level details of the project is, and in mood board
11

12
00:01:07,270 --> 00:01:12,230
we have a look and feel, which we already agreed with our imaginary client.
12

13
00:01:12,340 --> 00:01:17,890
So the website is going to be pretty standard, but the primary goal is to get early access sign-ups.
13

14
00:01:17,980 --> 00:01:19,970
That's going to be our call to action.
14

15
00:01:19,990 --> 00:01:24,960
We know, it's going to have a blog and we also need a place for people to subscribe to a newsletter.
15

16
00:01:24,970 --> 00:01:26,590
Now let's have a look at the Mood Board.
16

17
00:01:26,830 --> 00:01:31,360
So from the brief, we know that the client wants a website that is more photography based rather than
17

18
00:01:31,360 --> 00:01:32,680
illustrations.
18

19
00:01:32,680 --> 00:01:38,140
So I think, this sorts of background photo approach is something that's going to be liked by them. And
19

20
00:01:38,140 --> 00:01:40,780
a good approach overall for our target audience.
20

21
00:01:40,780 --> 00:01:44,880
We could find a photo that audience relates to, so they can see themselves in it.
21

22
00:01:44,890 --> 00:01:47,460
And that's going to help us connect with the audience.
22

23
00:01:47,470 --> 00:01:52,110
So based on that let's wireframe the hero section.
23

24
00:01:52,270 --> 00:01:55,990
We need a background photo, not a real photo, but just a place holder.
24

25
00:01:55,990 --> 00:02:04,000
So, find an image element and drag it onto the canvas and then resize to fit it to the full screen.
25

26
00:02:08,030 --> 00:02:10,200
Make it around 800 pixels in height.
26

27
00:02:10,200 --> 00:02:19,590
That's usually a decent size for the hero section.
27

28
00:02:19,610 --> 00:02:26,430
Now we need a navigation bar, a logo on the left and the links on the right. Pretty straight forward.
28

29
00:02:26,430 --> 00:02:28,890
Let's use heading 4 style, for the logo.
29

30
00:02:38,510 --> 00:02:42,560
The link style for the links and secondary button for the call to action in the navbar.
30

31
00:03:21,070 --> 00:03:26,020
I'm going to resize the button to make it smaller because we'll use a regular size for regular buttons.
31

32
00:03:40,850 --> 00:03:41,720
So far so good.
32

33
00:03:44,510 --> 00:03:45,980
Now for the headline in the subhead.
33

34
00:03:49,790 --> 00:03:55,040
We're going to choose the heading 1 style and choose the black color from the wireframe kit.
34

35
00:03:55,040 --> 00:04:00,290
It's a good idea to stick to this neutral grey color palette when creating wireframes.
35

36
00:04:00,290 --> 00:04:05,720
I really like this palette, actually, I stole it from a wireframe tool that I used in the past. And in
36

37
00:04:05,720 --> 00:04:11,030
addition to the blacks and greys, stick to one primary color from those options, or choose your own primary
37

38
00:04:11,030 --> 00:04:16,100
color, if you'd like. But stick to one. If you want to change the primary color of buttons changing the
38

39
00:04:16,100 --> 00:04:20,510
fill color on the entire component, won't work, because it has mixed content.
39

40
00:04:20,510 --> 00:04:24,860
The rectangle is blue, but text is white, so you'll have to change the rectangle only.
40

41
00:04:28,420 --> 00:04:30,310
But the better option is to change the Master.
41

42
00:04:30,320 --> 00:04:31,870
That's why we use components.
42

43
00:04:32,030 --> 00:04:32,860
Select an instance,
43

44
00:04:32,870 --> 00:04:39,890
then click to Go To Master. And in there just choose a different color for the background of that rectangle.
44

45
00:04:39,890 --> 00:04:47,650
The same goes for the secondary button, change 2 colors, one for the border and one for the text.
45

46
00:04:47,710 --> 00:04:51,240
In my case, I'm going to stick with this original primary color.
46

47
00:04:51,330 --> 00:04:53,480
All right, I already have content in my mind.
47

48
00:04:53,650 --> 00:04:58,440
I'm going to steal the headline from this one, "Instant collaboration for remote teams".
48

49
00:04:58,660 --> 00:05:03,670
As I mentioned before, we're not copywriters so we don't need to be perfect with the content, just anything
49

50
00:05:03,670 --> 00:05:21,520
we think works and will give an idea to our clients, as little dummy text as possible.
50

51
00:05:21,550 --> 00:05:25,450
I'm not worrying about distances here too much, but still making sure they're aligned.
51

52
00:05:28,680 --> 00:05:33,750
So now we need to urge users to do something, Which is our primary goal to get their emails for early
52

53
00:05:33,750 --> 00:05:34,320
access.
53

54
00:05:34,320 --> 00:05:41,070
This is commonly referred to as call-to-action or short CTA. CTA is either a form or just a button.
54

55
00:05:41,100 --> 00:05:44,310
Let's see what our inspirations are doing in this case.
55

56
00:05:54,290 --> 00:05:57,550
Many of them are using a form with a single email field.
56

57
00:05:57,560 --> 00:05:59,450
I think that's what we should do as well.
57

58
00:05:59,450 --> 00:06:04,400
We could have a pop up form, but when it's small form especially with a single field, it's a better practice
58

59
00:06:04,430 --> 00:06:06,180
because it's less threatening.
59

60
00:06:06,230 --> 00:06:07,600
It's right there are no tricks,
60

61
00:06:07,620 --> 00:06:08,600
it's very transparent.
61

62
00:06:08,600 --> 00:06:12,150
Asks user for just an email and they see what's going on.
62

63
00:06:23,660 --> 00:06:24,300
And there you go.
63

64
00:06:24,300 --> 00:06:28,330
Very simply and quickly we have a wireframe for our hero section.
64

65
00:06:28,380 --> 00:06:33,030
Thanks to this wireframe kit, didn't take as much effort and we didn't have to waste time on choosing
65

66
00:06:33,030 --> 00:06:34,350
fonts and colors.
66

67
00:06:34,350 --> 00:06:36,090
This is how you should work with wireframes.
67

68
00:06:36,090 --> 00:06:40,680
Thinking about the layout and content and not worrying about the look and feel. In your real projects,
68

69
00:06:40,680 --> 00:06:45,690
when you share the wireframe to your clients, you can add comments to different sections and different
69

70
00:06:45,690 --> 00:06:52,230
elements on your page, to show them your thought process. To do so switch to the commenting mode and by
70

71
00:06:52,230 --> 00:06:55,380
clicking anywhere on the frame you can add new comments.
71

72
00:06:55,500 --> 00:07:02,430
Clients love seeing this sort of thought process that you put behind your designs. Because when you build
72

73
00:07:02,430 --> 00:07:06,720
a website and design and design a website for a business, you're not just giving them something pretty
73

74
00:07:06,720 --> 00:07:10,760
to play with. You're giving them a solution to their problem.
74

75
00:07:10,800 --> 00:07:18,780
And often you're giving solutions to several problems like generating sales, or leads, or traffic, creating
75

76
00:07:18,810 --> 00:07:23,100
online presence, and good brand, and some reputation.
76

77
00:07:23,290 --> 00:07:29,610
A website that looks fancy and modern that, you know, is going to create a very specific image and reputation
77

78
00:07:29,820 --> 00:07:34,320
for that company. And you need to show that you have a deep understanding of their problems and you have
78

79
00:07:34,320 --> 00:07:36,540
come up with some potential solutions.
79

80
00:07:36,540 --> 00:07:39,210
In other words, you need to sell them on your designs.
80

81
00:07:39,270 --> 00:07:42,600
You made the first sale, by convincing them to hire you for your services.
81

82
00:07:42,600 --> 00:07:44,460
Now you're making another sale.
82

83
00:07:44,460 --> 00:07:48,810
You're not done there, you're making another sale, to show them that these designs that you created,
83

84
00:07:49,010 --> 00:07:53,130
their great solutions to the problems, that they face as a business.
84

85
00:07:53,160 --> 00:07:58,710
And I don't mean this to use some sort of sleazy sales pitch or techniques when you're explaining your
85

86
00:07:58,710 --> 00:07:59,130
designs.
86

87
00:07:59,130 --> 00:08:01,340
Just explain your self,
87

88
00:08:01,380 --> 00:08:06,430
like a designer, and how you thought about these elements that you created. For example,
88

89
00:08:06,520 --> 00:08:11,700
that single email field that I've put in the wireframes, I would explain this to the client something
89

90
00:08:11,700 --> 00:08:13,090
like this:
90

91
00:08:13,140 --> 00:08:18,580
"My suggestion is to use a single email field for the call to action and subscription,
91

92
00:08:18,720 --> 00:08:26,880
instead of asking first name, last name and so on, because one single email field is low commitment
92

93
00:08:27,060 --> 00:08:34,590
from the user side, it's less threatening and because it's also visible, we're able to fit it. Because
93

94
00:08:34,590 --> 00:08:40,380
If we were asking for several different things, then you would have to put probably a pop-up form,
94

95
00:08:40,380 --> 00:08:43,170
because then it would occupy too much space.
95

96
00:08:43,260 --> 00:08:47,820
But by showing the field and email field is visible, we are showing that we're transparent.
96

97
00:08:47,820 --> 00:08:53,790
This is the only thing that we are asking at this step right now. And this low commitment exchange will
97

98
00:08:53,790 --> 00:08:57,870
increase the overall subscription rate." And that's it.
98

99
00:08:58,110 --> 00:09:03,570
Now, if we didn't do that and if we didn't explain our thought process. Chances are they're just
99

100
00:09:03,570 --> 00:09:08,010
not going to know the reasoning behind one field. Because they're not designers, they haven't been building
100

101
00:09:08,010 --> 00:09:15,040
websites and they think from the business owners perspective and not from the user's perspective.
101

102
00:09:15,210 --> 00:09:15,820
Right?
102

103
00:09:15,840 --> 00:09:18,010
So they're going to think. "Wait,
103

104
00:09:18,070 --> 00:09:20,430
I'd like to have more information about the users.
104

105
00:09:20,430 --> 00:09:27,120
I'd like to know their email address, phone number, social security number, credit card details". And so
105

106
00:09:27,120 --> 00:09:27,330
on.
106

107
00:09:27,420 --> 00:09:33,200
Now, because you haven't put all these fields in there, and you just put email address, they feel that you're
107

108
00:09:33,210 --> 00:09:39,120
being neglectful. Or maybe you just didn't understand their business challenges and what they want from
108

109
00:09:39,120 --> 00:09:39,810
the business.
109

110
00:09:39,930 --> 00:09:45,090
So they're going to feel, that you're just not getting them and not offering good solutions for their
110

111
00:09:45,090 --> 00:09:45,630
business.
111

112
00:09:45,630 --> 00:09:51,120
So it is our job as designers, to educate our clients about topics like this. But you can't educate your
112

113
00:09:51,120 --> 00:09:53,630
clients, if you don't educate yourself first.
113

114
00:09:53,640 --> 00:10:01,110
So as an external reading, I would recommend you to subscribe to blogs and newsletters that share
114

115
00:10:01,110 --> 00:10:04,380
information, and latest research, and anything new
115

116
00:10:04,380 --> 00:10:08,970
basically, about design or user experience topics and things like that.
116

117
00:10:08,970 --> 00:10:13,260
For example, Nielsen Norman Group is one such place, you could subscribe to.
117

118
00:10:13,260 --> 00:10:17,930
They often publish articles and research about user experience topics.
118

119
00:10:17,970 --> 00:10:25,740
Also, Prototypr.io, which has this newsletter that includes, it's not the primary focus, but it also
119

120
00:10:25,740 --> 00:10:32,400
includes the top posts, blog posts usually, about topics of design and user experience and everything
120

121
00:10:32,400 --> 00:10:34,110
sort of web related.
121

122
00:10:34,110 --> 00:10:36,510
If you like books, I'd recommend reading
122

123
00:10:36,810 --> 00:10:42,480
"Don't Make Me Think" by Steve Krug. Which is a great book about web and mobile user experiences
123

124
00:10:42,480 --> 00:10:48,570
and usability. And another one "The Design of Everyday Things" by Don Norman.
124

125
00:10:48,570 --> 00:10:55,260
That's the same Norman guy from the Nielsen Norman Group. And it's not really about web design, but it's
125

126
00:10:55,260 --> 00:10:58,750
more about items and everyday things that we use in real life.
126

127
00:10:58,860 --> 00:11:06,090
But it's a good introduction to the journey of user experience and understanding, what you have to look
127

128
00:11:06,090 --> 00:11:12,000
for and basically sort of a philosophy behind designing things and objects and items. Which includes
128

129
00:11:12,300 --> 00:11:17,640
web, because people interact with it. And especially web because usually, it's a bit more complicated
129

130
00:11:17,670 --> 00:11:23,720
and a bit more difficult to interact with for people than regular items that we use in real world,
130

131
00:11:23,890 --> 00:11:24,530
like fork.
131

132
00:11:24,650 --> 00:11:28,300
Okay, so back to our wireframes, but we're going to continue that in the next video.