Usually, my website project starts by client emailing me a one paragraph of description of what they want. 1
And usually, it goes like "Oh hey Vako, we would like a website for our app and we don't have 2
screens, or content, or anything else yet." 3
It's very difficult to create an entire website out of no content, no project brief, no app screens, or 4
no real valuable information that I can use for the website. 5
That's real life. 6
That's how things work usually. And you don't get a perfect project with all the content, and photos, and 7
apps screens, or whatever ready for you to start designing. In the beginning, 8
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
it goes. 10
This was a terrible idea for 3 reasons. First, I would get stuck. 11
I would be staring at the screen without having any idea of what to do and what to design and thinking 12
I just have a creative block or something like that. 13
But no wonder. 14
How can you design something, when there is nothing to be designed? 15
The second problem was big for me, because I would spend a lot of time designing something and creating 16
and at least getting to liking a page, or maybe a half a page and I would send this result to my client 17
to sort of agree on the creative direction and look and feel, that I was going towards. 18
And then often I would get a complete rejection and that would be like, you know, "No we don't like this 19
style, we want something more like this." 20
This was very frustrating for me, in the beginning, because I'll get a little agitated, and I'll start 21
telling myself, "Oh these guys don't know what they're talking about, they don't have a good design taste" 22
and just bullshitting myself. And I would just say, "Okay, fine". And just get back to work and grumpily for 23
a new look. 24
The third problem was this. 25
So I'd start my work. And I'd get to some sort of final result with, you know, going through different 26
iterations and finally agreeing on design. But often the content was dummy content inside. So, 27
the text was dummy content, 28
the photos weren't sometimes real. Because maybe I needed the photos of users for testimonials or 29
reviews, or photos of team members, or something like that. 30
And then I'd give my client the homework to provide me, and write, and gather all that content that 31
I needed. But often client would come back with a different structure for their content. 32
So for example, if I designed a section with 3 columns, the client would come back with a copy for 33
2 or maybe 5 columns. 34
But this sort of content is optimal 35
if we have 3 or 4 columns. For 2, it just not very nice and for 5 it's just too much content 36
to fit in one row. 37
This was absolutely not my client's fault, it was mine. Because I didn't have a process, I didn't have 38
a proper design or project process to go through. And I was just winging it. But the moment I figured this 39
one out and created a proper design process and project process for me. Things have changed dramatically. 40
Projects just moved smoother and nicer, faster, less iterations to go through. 41
And this is funny, but designing actually became easier. In the past, 42
I was just trying to take the whole project in one go. And just like stuffing myself with a full frickin 43
burrito in one go. And it was too much to handle. 44
I wasn't guiding my clients through different steps that we had to go through. And my plan was just, 45
you know, go into the room, lock myself and then one week later, emerge with this brilliantly well designed 46
website. And then just hope and pray that clients loved it. 47
So here's a 3 step process that great designers go through before they even paint the first pixel. 48
The first step is to define a project brief. 49
It's a short description of goals and details of the project. A project brief asks important questions 50
like, "What is the goal of the website?" and, "Who is it for?". And answer to these questions will align both 51
you and your client on the same page, 52
making sure that everyone is headed towards the same direction. 53
The second step is creating a mood board and getting your client's feedback on it. 54
This is something we already know how to do. And we've done it to gather inspiration for ourselves. 55
But if we share this mood board with our clients, then we can get more benefit from it. By sharing a mood 56
board with your client you can nail down a taste, and a look, and feel of your project. Because there is 57
many different styles that you can go with, right? 58
You can go a bit more photography heavy for your website, you can go a bit more illustration heavy, 59
a bit more colorful, less colorful. Right? 60
So, there is many different avenues you can take with your project and your designs. And often clients 61
have very specific taste. So, you don't want to find out some information, because they do have a hard 62
time explaining themselves, and they don't know you're the designer and you have access to all the inspiration 63
in the world, you know these websites like Dribbble, and Pinterest, and Lapa, and Land-book. And you go 64
there and you find inspiration, you gather this, and you work this, so you have access to these sort of 65
inspiration, but they don't. The websites they do see, 66
they might not be that much, 67
they're busy with doing other things. Right? 68
And by sharing this information to them you can nail down and kind of meet on the same page of 69
the look and feel. Because if you don't, then what you're doing is - you have to go through iterations until 70
you get to their sort of taste. 71
And that's just so much more work to do, Right? 72
Why would I go through different iterations to finally nail down the taste, and just general look, and 73
feel of the site? Where we can just grab examples from other websites and other inspiration and show 74
them. 75
Okay, 76
"Which one do you like? This or this?". The third step of this process is to create wireframes. Wireframes 77
are sort of a rough sketch of the site, a skeleton. 78
We don't worry about colors, or typography, or any nitty-gritty of design. 79
This is for example a wireframe of Youtube. 80
It shows what goes where and what's the content. 81
Very simple. 82
Not much design going on there, it looks like a child drew it. But wireframing has a huge benefit. Because 83
you are able to discuss with your client a very important part of the website. 84
What's the content? 85
Because design always has to accommodate the content. Because design of a small two-line paragraph is 86
going to be very different, from a design of a 5000 word document. 87
Right? 88
So you have to nail down the content. What sort of photos? Where does the buttons go? And everything. 89
And doing this during the design process, going through these iterations during the design process, is 90
just much more work and more wasteful. Because you have to worry about every single pixel and color and 91
shades of different colors, and shadows, and all that stuff, which is absolutely unimportant, when discussing 92
the content. And when content changes, and a structure changes, then you have to dump everything that you 93
have designed already, and waste your time, and then start over from scratch. 94
But during the wireframing is very simple, because there is not much to design. 95
You don't have to worry about making everything aligned or pixel perfect, right? 96
And you don't get frustrated, if client decides that they want to restructure the entire content of the 97
page. Keeps everyone happy and on the same direction to the final goal. 98
So, the 3 stages of good design process are Project Brief, Moodboarding and Wireframing. At the end 99
of each stage you have to share the results with your client and agree with them and sign that off. Because 100
if you don't do that, then it sort of beats the purpose. You need to get the feedback off the client, to 101
make sure that you're not going to a wrong direction. When you keep your clients in the loop, 102
first of all, they feel like they're in control of the project, and they love that idea, 103
they want to know how things are going. 104
Second of all, it shows you're a professional, that you have a project process going on and they 105
know, they understand that they are in the great hands. 106
And once you've finalized all those three steps, that's when you move to the design process. And design 107
results that you produce are going to be much more appreciated and liked by your clients. Because they 108
were part of the process. And this is exactly what we are going to do in the upcoming lessons. Stick 109
around.