0
1
00:00:00,120 --> 00:00:06,960
Usually, my website project starts by client emailing me a one paragraph of description of what they want.
1

2
00:00:06,960 --> 00:00:14,530
And usually, it goes like "Oh hey Vako, we would like a website for our app and we don't have
2

3
00:00:14,550 --> 00:00:17,860
screens, or content, or anything else yet."
3

4
00:00:18,030 --> 00:00:24,780
It's very difficult to create an entire website out of no content, no project brief, no app screens, or
4

5
00:00:24,780 --> 00:00:28,860
no real valuable information that I can use for the website.
5

6
00:00:28,860 --> 00:00:29,600
That's real life.
6

7
00:00:29,610 --> 00:00:35,250
That's how things work usually. And you don't get a perfect project with all the content, and photos, and
7

8
00:00:35,790 --> 00:00:39,930
apps screens, or whatever ready for you to start designing. In the beginning,
8

9
00:00:39,930 --> 00:00:45,210
I didn't have a process, so my plan was to just wing it and just get going with the project and see where
9

10
00:00:45,210 --> 00:00:45,800
it goes.
10

11
00:00:45,810 --> 00:00:52,210
This was a terrible idea for 3 reasons. First, I would get stuck.
11

12
00:00:52,230 --> 00:00:56,700
I would be staring at the screen without having any idea of what to do and what to design and thinking
12

13
00:00:56,700 --> 00:00:58,820
I just have a creative block or something like that.
13

14
00:00:58,850 --> 00:00:59,480
But no wonder.
14

15
00:00:59,490 --> 00:01:04,780
How can you design something, when there is nothing to be designed?
15

16
00:01:04,780 --> 00:01:10,390
The second problem was big for me, because I would spend a lot of time designing something and creating
16

17
00:01:10,390 --> 00:01:16,480
and at least getting to liking a page, or maybe a half a page and I would send this result to my client
17

18
00:01:16,480 --> 00:01:21,350
to sort of agree on the creative direction and look and feel, that I was going towards.
18

19
00:01:21,550 --> 00:01:25,780
And then often I would get a complete rejection and that would be like, you know, "No we don't like this
19

20
00:01:25,780 --> 00:01:27,430
style, we want something more like this."
20

21
00:01:27,460 --> 00:01:31,930
This was very frustrating for me, in the beginning, because I'll get a little agitated, and I'll start
21

22
00:01:31,930 --> 00:01:35,740
telling myself, "Oh these guys don't know what they're talking about, they don't have a good design taste"
22

23
00:01:35,800 --> 00:01:40,330
and just bullshitting myself. And I would just say, "Okay, fine". And just get back to work and grumpily for
23

24
00:01:40,440 --> 00:01:43,550
a new look.
24

25
00:01:43,610 --> 00:01:44,860
The third problem was this.
25

26
00:01:44,870 --> 00:01:49,340
So I'd start my work. And I'd get to some sort of final result with, you know, going through different
26

27
00:01:49,340 --> 00:01:56,210
iterations and finally agreeing on design. But often the content was dummy content inside. So,
27

28
00:01:56,210 --> 00:01:57,540
the text was dummy content,
28

29
00:01:57,870 --> 00:02:04,310
the photos weren't sometimes real. Because maybe I needed the photos of users for testimonials or
29

30
00:02:04,310 --> 00:02:07,690
reviews, or photos of team members, or something like that.
30

31
00:02:07,730 --> 00:02:13,430
And then I'd give my client the homework to provide me, and write, and gather all that content that
31

32
00:02:13,430 --> 00:02:17,840
I needed. But often client would come back with a different structure for their content.
32

33
00:02:17,840 --> 00:02:22,820
So for example, if I designed a section with 3 columns, the client would come back with a copy for
33

34
00:02:22,820 --> 00:02:24,520
2 or maybe 5 columns.
34

35
00:02:24,560 --> 00:02:26,500
But this sort of content is optimal
35

36
00:02:26,510 --> 00:02:33,110
if we have 3 or 4 columns. For 2, it just not very nice and for 5 it's just too much content
36

37
00:02:33,110 --> 00:02:34,280
to fit in one row.
37

38
00:02:34,280 --> 00:02:38,750
This was absolutely not my client's fault, it was mine. Because I didn't have a process, I didn't have
38

39
00:02:38,750 --> 00:02:44,240
a proper design or project process to go through. And I was just winging it. But the moment I figured this
39

40
00:02:44,240 --> 00:02:51,310
one out and created a proper design process and project process for me. Things have changed dramatically.
40

41
00:02:51,340 --> 00:02:58,830
Projects just moved smoother and nicer, faster, less iterations to go through.
41

42
00:02:59,000 --> 00:03:02,860
And this is funny, but designing actually became easier. In the past,
42

43
00:03:02,870 --> 00:03:08,600
I was just trying to take the whole project in one go. And just like stuffing myself with a full frickin
43

44
00:03:08,600 --> 00:03:11,160
burrito in one go. And it was too much to handle.
44

45
00:03:11,180 --> 00:03:16,430
I wasn't guiding my clients through different steps that we had to go through. And my plan was just,
45

46
00:03:16,430 --> 00:03:22,960
you know, go into the room, lock myself and then one week later, emerge with this brilliantly well designed
46

47
00:03:23,000 --> 00:03:25,880
website. And then just hope and pray that clients loved it.
47

48
00:03:25,880 --> 00:03:31,640
So here's a 3 step process that great designers go through before they even paint the first pixel.
48

49
00:03:34,190 --> 00:03:36,270
The first step is to define a project brief.
49

50
00:03:36,440 --> 00:03:41,390
It's a short description of goals and details of the project. A project brief asks important questions
50

51
00:03:41,390 --> 00:03:46,490
like, "What is the goal of the website?" and, "Who is it for?". And answer to these questions will align both
51

52
00:03:46,490 --> 00:03:48,760
you and your client on the same page,
52

53
00:03:48,800 --> 00:03:51,800
making sure that everyone is headed towards the same direction.
53

54
00:03:54,520 --> 00:03:58,630
The second step is creating a mood board and getting your client's feedback on it.
54

55
00:03:58,630 --> 00:04:03,200
This is something we already know how to do. And we've done it to gather inspiration for ourselves.
55

56
00:04:03,280 --> 00:04:08,350
But if we share this mood board with our clients, then we can get more benefit from it. By sharing a mood
56

57
00:04:08,350 --> 00:04:14,020
board with your client you can nail down a taste, and a look, and feel of your project. Because there is
57

58
00:04:14,020 --> 00:04:16,530
many different styles that you can go with, right?
58

59
00:04:16,540 --> 00:04:22,210
You can go a bit more photography heavy for your website, you can go a bit more illustration heavy,
59

60
00:04:22,210 --> 00:04:25,410
a bit more colorful, less colorful. Right?
60

61
00:04:25,450 --> 00:04:31,690
So, there is many different avenues you can take with your project and your designs. And often clients
61

62
00:04:31,690 --> 00:04:37,510
have very specific taste. So, you don't want to find out some information, because they do have a hard
62

63
00:04:37,510 --> 00:04:43,600
time explaining themselves, and they don't know you're the designer and you have access to all the inspiration
63

64
00:04:43,600 --> 00:04:49,260
in the world, you know these websites like Dribbble, and Pinterest, and Lapa, and Land-book. And you go
64

65
00:04:49,360 --> 00:04:54,130
there and you find inspiration, you gather this, and you work this, so you have access to these sort of
65

66
00:04:54,130 --> 00:04:56,470
inspiration, but they don't. The websites they do see,
66

67
00:04:56,480 --> 00:04:57,490
they might not be that much,
67

68
00:04:57,490 --> 00:04:59,700
they're busy with doing other things. Right?
68

69
00:04:59,770 --> 00:05:04,780
And by sharing this information to them you can nail down and kind of meet on the same page of
69

70
00:05:04,810 --> 00:05:10,780
the look and feel. Because if you don't, then what you're doing is - you have to go through iterations until
70

71
00:05:10,780 --> 00:05:13,060
you get to their sort of taste.
71

72
00:05:13,540 --> 00:05:16,180
And that's just so much more work to do, Right?
72

73
00:05:16,180 --> 00:05:23,260
Why would I go through different iterations to finally nail down the taste, and just general look, and
73

74
00:05:23,260 --> 00:05:30,040
feel of the site? Where we can just grab examples from other websites and other inspiration and show
74

75
00:05:30,040 --> 00:05:30,240
them.
75

76
00:05:30,250 --> 00:05:30,420
Okay,
76

77
00:05:30,430 --> 00:05:38,620
"Which one do you like? This or this?". The third step of this process is to create wireframes. Wireframes
77

78
00:05:38,650 --> 00:05:41,920
are sort of a rough sketch of the site, a skeleton.
78

79
00:05:41,920 --> 00:05:45,910
We don't worry about colors, or typography, or any nitty-gritty of design.
79

80
00:05:45,940 --> 00:05:47,970
This is for example a wireframe of Youtube.
80

81
00:05:47,980 --> 00:05:50,330
It shows what goes where and what's the content.
81

82
00:05:50,380 --> 00:05:51,130
Very simple.
82

83
00:05:51,130 --> 00:05:56,290
Not much design going on there, it looks like a child drew it. But wireframing has a huge benefit. Because
83

84
00:05:56,350 --> 00:06:01,170
you are able to discuss with your client a very important part of the website.
84

85
00:06:01,180 --> 00:06:02,620
What's the content?
85

86
00:06:02,620 --> 00:06:10,630
Because design always has to accommodate the content. Because design of a small two-line paragraph is
86

87
00:06:10,630 --> 00:06:17,760
going to be very different, from a design of a 5000 word document.
87

88
00:06:17,770 --> 00:06:18,190
Right?
88

89
00:06:18,640 --> 00:06:24,330
So you have to nail down the content. What sort of photos? Where does the buttons go? And everything.
89

90
00:06:24,360 --> 00:06:29,650
And doing this during the design process, going through these iterations during the design process, is
90

91
00:06:29,650 --> 00:06:35,110
just much more work and more wasteful. Because you have to worry about every single pixel and color and
91

92
00:06:35,110 --> 00:06:41,590
shades of different colors, and shadows, and all that stuff, which is absolutely unimportant, when discussing
92

93
00:06:41,590 --> 00:06:47,470
the content. And when content changes, and a structure changes, then you have to dump everything that you
93

94
00:06:47,470 --> 00:06:51,200
have designed already, and waste your time, and then start over from scratch.
94

95
00:06:51,250 --> 00:06:55,270
But during the wireframing is very simple, because there is not much to design.
95

96
00:06:55,270 --> 00:06:59,120
You don't have to worry about making everything aligned or pixel perfect, right?
96

97
00:06:59,150 --> 00:07:03,670
And you don't get frustrated, if client decides that they want to restructure the entire content of the
97

98
00:07:03,670 --> 00:07:06,850
page. Keeps everyone happy and on the same direction to the final goal.
98

99
00:07:06,880 --> 00:07:13,360
So, the 3 stages of good design process are Project Brief, Moodboarding and Wireframing. At the end
99

100
00:07:13,360 --> 00:07:18,970
of each stage you have to share the results with your client and agree with them and sign that off. Because
100

101
00:07:18,970 --> 00:07:23,230
if you don't do that, then it sort of beats the purpose. You need to get the feedback off the client, to
101

102
00:07:23,230 --> 00:07:27,940
make sure that you're not going to a wrong direction. When you keep your clients in the loop,
102

103
00:07:27,940 --> 00:07:32,050
first of all, they feel like they're in control of the project, and they love that idea,
103

104
00:07:32,080 --> 00:07:34,900
they want to know how things are going.
104

105
00:07:34,900 --> 00:07:42,250
Second of all, it shows you're a professional, that you have a project process going on and they
105

106
00:07:42,250 --> 00:07:45,780
know, they understand that they are in the great hands.
106

107
00:07:45,830 --> 00:07:50,920
And once you've finalized all those three steps, that's when you move to the design process. And design
107

108
00:07:50,920 --> 00:07:57,370
results that you produce are going to be much more appreciated and liked by your clients. Because they
108

109
00:07:57,370 --> 00:08:02,920
were part of the process. And this is exactly what we are going to do in the upcoming lessons. Stick
109

110
00:08:02,920 --> 00:08:03,130
around.