0
1
00:00:00,150 --> 00:00:03,750
The mood board is something I always did, but I wouldn't share it with a client.
1

2
00:00:03,750 --> 00:00:09,570
I kept it as my internal design process. In the beginning, I thought of design as an artistic process
2

3
00:00:09,570 --> 00:00:14,850
where you lock yourself in the room and week later you come up with amazing designs that completely wow's
3

4
00:00:14,850 --> 00:00:16,200
your clients.
4

5
00:00:16,290 --> 00:00:17,850
But that's far from reality.
5

6
00:00:17,850 --> 00:00:23,190
Often your clients have certain websites and style in their mind. And if you just go without agreeing
6

7
00:00:23,190 --> 00:00:26,840
on this common ground and come up with something out of nowhere.
7

8
00:00:27,000 --> 00:00:31,730
Chances are you're gonna miss their expectations. And you might come up with something better,
8

9
00:00:31,890 --> 00:00:35,740
but if you're missing their expectations then you are disappointing them.
9

10
00:00:35,810 --> 00:00:42,390
And if you agree on the mood board, then the designs that you create chances are, are going to look like
10

11
00:00:42,420 --> 00:00:43,730
what your clients expected.
11

12
00:00:43,770 --> 00:00:45,610
Keeping them happy and coming for more.
12

13
00:00:45,640 --> 00:00:47,400
You've already practiced creating a mood board.
13

14
00:00:47,400 --> 00:00:52,860
So we're going to skip that part, where you gather inspiration. Instead, we'll use a mood board that I've
14

15
00:00:52,860 --> 00:00:56,040
already created for the Team Collaboration product.
15

16
00:00:56,130 --> 00:01:00,990
I've just removed and added a couple more shots. In the Figma file, you'll find this mood board.
16

17
00:01:01,020 --> 00:01:05,700
If you want a little more challenge, you can use the mood board that you have created in the same assignment.
17

18
00:01:05,910 --> 00:01:08,570
Although, I'd recommend using this one and following along.
18

19
00:01:08,640 --> 00:01:12,000
Let's imagine, that we have already agreed this mood board with a client.
19

20
00:01:12,000 --> 00:01:17,430
Let's take a look at these examples and we can start noticing sections and elements that we like. These
20

21
00:01:17,430 --> 00:01:23,190
we're going to use as a hero section, I like how the green contrasts with the image in the background.
21

22
00:01:23,190 --> 00:01:29,150
I also like these card layouts, similar to this. From here, I really like this section,
22

23
00:01:29,280 --> 00:01:32,980
similar to what we've already done in the remix exercise.
23

24
00:01:33,150 --> 00:01:36,920
I also quite like these testimonial cards and I love that blue color,
24

25
00:01:36,930 --> 00:01:38,630
so maybe we'll use that one.
25

26
00:01:38,670 --> 00:01:41,880
It's a nice vibrant blue and looks great on a picture.
26

27
00:01:41,880 --> 00:01:44,890
Plus it really fits the team collaboration theme.
27

28
00:01:45,060 --> 00:01:49,980
Companies, especially bigger ones, like blue a lot. Blue is an excellent color because it demonstrates
28

29
00:01:50,000 --> 00:01:55,860
cleanness, transparency and proper conduct. But of course, they have to be good colors, because there are
29

30
00:01:55,860 --> 00:01:57,300
some that suck.
30

31
00:01:57,730 --> 00:02:03,960
Here, I like these split sections and also I like how interface elements are incorporated with the photography.
31

32
00:02:04,440 --> 00:02:06,860
Brings more life to the photos.
32

33
00:02:06,960 --> 00:02:08,700
I've also added this footer shot.
33

34
00:02:08,700 --> 00:02:13,010
I like this dark style, so I'm going to do a dark footer, like this.
34

35
00:02:15,750 --> 00:02:19,330
Sharing a mood board using Figma is very easy.
35

36
00:02:19,500 --> 00:02:25,140
It's a great tool for collaborating. Unlike other tools, like Sketch or Photoshop, who require the use of
36

37
00:02:25,140 --> 00:02:27,260
3rd party apps. In Figma,
37

38
00:02:27,270 --> 00:02:29,280
collaboration is integrated inside.
38

39
00:02:29,280 --> 00:02:32,580
Here is how. On top right corner you have this Share button.
39

40
00:02:33,960 --> 00:02:39,300
Make sure to enable Public Link Access, otherwise, they won't be able to see the file. And then click Copy Link.
40

41
00:02:39,560 --> 00:02:42,060
And then just share this file with your clients.
41

42
00:02:42,060 --> 00:02:45,810
They won't be able to edit or do anything with it, except commenting.
42

43
00:02:46,050 --> 00:02:51,930
But this is a good way to share the mood board that you wanted to show to them. And you can ask them
43

44
00:02:51,930 --> 00:02:55,380
to comment on certain things that they like and certain things they don't.
44

45
00:02:55,410 --> 00:02:56,250
Here's a little trick.
45

46
00:02:56,250 --> 00:02:59,880
Open a browser in incognito window and paste your link there.
46

47
00:02:59,940 --> 00:03:04,940
You'll be able to make sure they can access the file and see what they can do with it.
47

48
00:03:04,950 --> 00:03:08,900
I hate it when I share something with someone and they tell me they can't see it.
48

49
00:03:08,910 --> 00:03:12,660
That's just bad user experience and makes me feel ashamed when that happens.
49

50
00:03:12,720 --> 00:03:16,260
As web designers, good user experience has to become the way of our lives.
50

51
00:03:16,260 --> 00:03:22,320
We should try our best to make sure that clients, teammates and obviously users have a good experience
51

52
00:03:22,590 --> 00:03:28,020
with everything that we share or create. Because if not us, then who? By checking it inside the Incognito
52

53
00:03:28,020 --> 00:03:31,580
browser, you are able to see it exactly the way they would see it.
53

54
00:03:31,830 --> 00:03:37,680
Because if you just paste it inside your regular browser where you are logged in inside Figma, then you're
54

55
00:03:37,680 --> 00:03:39,630
just seeing your own personal view.
55

56
00:03:39,920 --> 00:03:40,280
OK.
56

57
00:03:40,290 --> 00:03:44,830
They can see the board. And from this menu, they can access other pages on the file.
57

58
00:03:45,030 --> 00:03:48,210
However, they cannot comment, unless they sign in or sign up.
58

59
00:03:51,620 --> 00:03:54,380
And if they are signed in, they will get this sort of view.
59

60
00:03:54,390 --> 00:03:56,190
This looks just like our regular view.
60

61
00:03:56,190 --> 00:04:02,190
They can see all the pages and layers on the left. But on the right there is only the code tab. This code
61

62
00:04:02,190 --> 00:04:07,710
tab is when we are collaborating with developers. For example, if we were designing a website or an app.
62

63
00:04:08,250 --> 00:04:12,480
But instead of building it ourselves, we were working with developers, then we would share our designs
63

64
00:04:12,480 --> 00:04:17,330
with them and they would be able to see the details for each element.
64

65
00:04:17,330 --> 00:04:21,360
The commenting feature is very handy when you work with projects. To comment,
65

66
00:04:21,360 --> 00:04:24,170
we have to click on this Add/Show Comment option.
66

67
00:04:24,210 --> 00:04:27,510
You'll see the mouse cursor changes to this little balloon.
67

68
00:04:27,690 --> 00:04:29,680
We can drop a comment anywhere on a page.
68

69
00:04:29,700 --> 00:04:34,380
So when you share a mood board with your clients, instruct them on how to make comments and get their
69

70
00:04:34,380 --> 00:04:36,670
feedback on the examples.
70

71
00:04:36,840 --> 00:04:43,350
They can tell you what styles they like, commenting on specific parts, instead of entire screenshots. Inside
71

72
00:04:43,350 --> 00:04:43,800
your view,
72

73
00:04:43,800 --> 00:04:46,320
you will see these comments reflect instantly.
73

74
00:04:46,590 --> 00:04:48,270
Just enable the comment option.
74

75
00:04:48,270 --> 00:04:51,120
They will even show on the right side.
75

76
00:04:51,220 --> 00:04:55,250
There is no assignment following this video since you'll be using the same exact mood board.
76

77
00:04:55,270 --> 00:04:59,830
You can find this in the same file, where the project brief was, it's just on a different page.
77

78
00:04:59,830 --> 00:05:01,730
Up next, we're going to create wireframes.
78

79
00:05:01,750 --> 00:05:02,320
Stick around.