The mood board is something I always did, but I wouldn't share it with a client. 1
I kept it as my internal design process. In the beginning, I thought of design as an artistic process 2
where you lock yourself in the room and week later you come up with amazing designs that completely wow's 3
your clients. 4
But that's far from reality. 5
Often your clients have certain websites and style in their mind. And if you just go without agreeing 6
on this common ground and come up with something out of nowhere. 7
Chances are you're gonna miss their expectations. And you might come up with something better, 8
but if you're missing their expectations then you are disappointing them. 9
And if you agree on the mood board, then the designs that you create chances are, are going to look like 10
what your clients expected. 11
Keeping them happy and coming for more. 12
You've already practiced creating a mood board. 13
So we're going to skip that part, where you gather inspiration. Instead, we'll use a mood board that I've 14
already created for the Team Collaboration product. 15
I've just removed and added a couple more shots. In the Figma file, you'll find this mood board. 16
If you want a little more challenge, you can use the mood board that you have created in the same assignment. 17
Although, I'd recommend using this one and following along. 18
Let's imagine, that we have already agreed this mood board with a client. 19
Let's take a look at these examples and we can start noticing sections and elements that we like. These 20
we're going to use as a hero section, I like how the green contrasts with the image in the background. 21
I also like these card layouts, similar to this. From here, I really like this section, 22
similar to what we've already done in the remix exercise. 23
I also quite like these testimonial cards and I love that blue color, 24
so maybe we'll use that one. 25
It's a nice vibrant blue and looks great on a picture. 26
Plus it really fits the team collaboration theme. 27
Companies, especially bigger ones, like blue a lot. Blue is an excellent color because it demonstrates 28
cleanness, transparency and proper conduct. But of course, they have to be good colors, because there are 29
some that suck. 30
Here, I like these split sections and also I like how interface elements are incorporated with the photography. 31
Brings more life to the photos. 32
I've also added this footer shot. 33
I like this dark style, so I'm going to do a dark footer, like this. 34
Sharing a mood board using Figma is very easy. 35
It's a great tool for collaborating. Unlike other tools, like Sketch or Photoshop, who require the use of 36
3rd party apps. In Figma, 37
collaboration is integrated inside. 38
Here is how. On top right corner you have this Share button. 39
Make sure to enable Public Link Access, otherwise, they won't be able to see the file. And then click Copy Link. 40
And then just share this file with your clients. 41
They won't be able to edit or do anything with it, except commenting. 42
But this is a good way to share the mood board that you wanted to show to them. And you can ask them 43
to comment on certain things that they like and certain things they don't. 44
Here's a little trick. 45
Open a browser in incognito window and paste your link there. 46
You'll be able to make sure they can access the file and see what they can do with it. 47
I hate it when I share something with someone and they tell me they can't see it. 48
That's just bad user experience and makes me feel ashamed when that happens. 49
As web designers, good user experience has to become the way of our lives. 50
We should try our best to make sure that clients, teammates and obviously users have a good experience 51
with everything that we share or create. Because if not us, then who? By checking it inside the Incognito 52
browser, you are able to see it exactly the way they would see it. 53
Because if you just paste it inside your regular browser where you are logged in inside Figma, then you're 54
just seeing your own personal view. 55
OK. 56
They can see the board. And from this menu, they can access other pages on the file. 57
However, they cannot comment, unless they sign in or sign up. 58
And if they are signed in, they will get this sort of view. 59
This looks just like our regular view. 60
They can see all the pages and layers on the left. But on the right there is only the code tab. This code 61
tab is when we are collaborating with developers. For example, if we were designing a website or an app. 62
But instead of building it ourselves, we were working with developers, then we would share our designs 63
with them and they would be able to see the details for each element. 64
The commenting feature is very handy when you work with projects. To comment, 65
we have to click on this Add/Show Comment option. 66
You'll see the mouse cursor changes to this little balloon. 67
We can drop a comment anywhere on a page. 68
So when you share a mood board with your clients, instruct them on how to make comments and get their 69
feedback on the examples. 70
They can tell you what styles they like, commenting on specific parts, instead of entire screenshots. Inside 71
your view, 72
you will see these comments reflect instantly. 73
Just enable the comment option. 74
They will even show on the right side. 75
There is no assignment following this video since you'll be using the same exact mood board. 76
You can find this in the same file, where the project brief was, it's just on a different page. 77
Up next, we're going to create wireframes. 78
Stick around.