0
1
00:00:00,470 --> 00:00:04,920
When designers gather a different work for their inspiration, they arrange what's called a Mood Board.
1

2
00:00:05,430 --> 00:00:10,500
It's basically putting together any sort of inspiration, that you think will be useful for your project.
2

3
00:00:10,500 --> 00:00:14,480
This, for example, is a mood board from one of my client projects.
3

4
00:00:14,520 --> 00:00:18,660
There are screens of different home pages that I found on the sites, that I mentioned before.
4

5
00:00:18,720 --> 00:00:22,260
You can even draw inspiration from your own personal work.
5

6
00:00:22,260 --> 00:00:26,810
So for example, one of these shots that I put here is my own work.
6

7
00:00:26,820 --> 00:00:30,450
Inspiration doesn't have to be a website design. You might gather illustrations that you like,
7

8
00:00:30,460 --> 00:00:38,590
app screens, art, architecture, photography, movie posters. Or, you know, Dogon tribe masks, just like Picasso.
8

9
00:00:38,610 --> 00:00:39,330
There are no rules.
9

10
00:00:39,330 --> 00:00:41,470
It's basically setting the mood for your project.
10

11
00:00:41,490 --> 00:00:45,660
Just like the name says. In this exercise, we're going to practice creating a mood board.
11

12
00:00:45,660 --> 00:00:50,700
Your goal is to go on those inspiration websites that I mentioned previously and gather inspiration
12

13
00:00:50,700 --> 00:00:55,590
for a website for a uber kind of, ride sharing app.
13

14
00:00:55,620 --> 00:00:57,630
The app itself is not your project.
14

15
00:00:57,630 --> 00:01:03,100
The project is basically a website like a home page for the ride-sharing app.
15

16
00:01:03,120 --> 00:01:08,280
Let me demonstrate an example. I'll create a mood board for team collaboration website or a landing
16

17
00:01:08,280 --> 00:01:09,020
page.
17

18
00:01:09,090 --> 00:01:11,360
You know products like Slack and Trello?
18

19
00:01:11,390 --> 00:01:12,640
If you're familiar with it.
19

20
00:01:12,660 --> 00:01:16,630
I have my inspiration sites open here. But first I'll start looking at product websites
20

21
00:01:16,630 --> 00:01:23,770
I already know. So I'm going to check Slack. Asana is another one that I know. And Trello. And see what they
21

22
00:01:23,770 --> 00:01:24,360
are doing.
22

23
00:01:24,390 --> 00:01:29,070
When you like a website, or a section, or any parts of the page, just take a screenshot.
23

24
00:01:29,100 --> 00:01:31,810
We will organize all screenshots and images later.
24

25
00:01:47,870 --> 00:01:52,430
Okay, let's now check on other inspiration websites. Dribbble's search with keywords
25

26
00:01:52,430 --> 00:01:53,120
isn't that good,
26

27
00:01:53,120 --> 00:02:03,410
so try using as little keywords as possible and try searching in different words.
27

28
00:02:03,520 --> 00:02:09,190
This one is in bad. Often on Dribbble designers post the screen of the full page, which you can see in the
28

29
00:02:09,190 --> 00:02:10,710
attachment right here.
29

30
00:02:10,720 --> 00:02:13,040
This way you can see the full page in more detail.
30

31
00:02:16,170 --> 00:02:17,940
I'm just going to save the entire page.
31

32
00:02:37,090 --> 00:02:44,290
This one is similar to Asana, but here I like these overlapping interface elements. Asana had just illustrations.
32

33
00:02:44,290 --> 00:02:46,880
This is nice because it gives more idea of the product.
33

34
00:02:46,900 --> 00:02:48,480
Plus this is more simple to make.
34

35
00:02:48,490 --> 00:02:52,980
I can't illustrate, so I'd have to hire an illustrator if I want that in my project.
35

36
00:02:53,020 --> 00:02:55,030
Okay, let's check other inspiration sites.
36

37
00:02:55,270 --> 00:02:58,150
I usually spend about an hour gathering inspiration.
37

38
00:02:58,150 --> 00:03:02,800
It's an important part of the design process. And if I do this part diligently I have much more easier
38

39
00:03:02,800 --> 00:03:07,080
time designing. And if I don't, I often need to come back and find more inspiration.
39

40
00:03:20,980 --> 00:03:26,920
Pinterest is actually where I save random inspirations outside of projects. Like if I'm randomly browsing
40

41
00:03:26,920 --> 00:03:33,580
the web and I come across to some interesting design, I will save it on Pinterest for future reference.
41

42
00:03:33,610 --> 00:03:36,020
It's a great place to have your own personal collection.
42

43
00:03:36,070 --> 00:03:41,620
You can create your, like, personal board on Pinterest and install their browser extension and save screenshots
43

44
00:03:41,620 --> 00:03:46,600
and images from the web to your private collection. And then you can come back to these pins later when
44

45
00:03:46,600 --> 00:03:49,860
you're looking for some inspiration for your project.
45

46
00:03:49,870 --> 00:03:57,880
Okay, now I'm gonna look off-topic, not necessarily for team collaboration websites. This isn't bad.
46

47
00:04:19,770 --> 00:04:20,970
This section is very lovely.
47

48
00:04:20,970 --> 00:04:23,130
I like photo overlapping with those graphics.
48

49
00:04:28,790 --> 00:04:34,400
Lapa.ninja or land-book are excellent because we can see live sites, which can give us ideas on
49

50
00:04:34,400 --> 00:04:37,010
animations and interactions and all that stuff.
50

51
00:04:37,850 --> 00:04:38,970
I think we have enough.
51

52
00:04:39,020 --> 00:04:41,230
Now we are going to create a mood board in Figma.
52

53
00:04:41,240 --> 00:04:43,490
And place all those shots in there.
53

54
00:04:46,590 --> 00:04:56,590
So just draw a basic frame in Figma and pull all your screenshots on it.
54

55
00:04:56,870 --> 00:05:01,410
I use dark background because most websites are on white, so they will have better visibility on a dark
55

56
00:05:01,410 --> 00:05:01,800
frame.
56

57
00:05:14,820 --> 00:05:16,740
Doesn't really matter how you arrange them.
57

58
00:05:16,740 --> 00:05:18,590
Here you can scatter them as you like.
58

59
00:05:27,410 --> 00:05:28,760
And that's all there is to it.
59

60
00:05:28,760 --> 00:05:30,000
That's our Mood Board.
60

61
00:05:30,020 --> 00:05:33,240
Later we'll learn how to actually draw inspiration from all these
61

62
00:05:33,250 --> 00:05:37,400
things that we collected. And how to use them in project while we are designing it.
62

63
00:05:37,430 --> 00:05:38,270
Now it's your turn.
63

64
00:05:38,270 --> 00:05:40,660
Go ahead and collect inspiration for a website
64

65
00:05:40,820 --> 00:05:42,650
that is for a Ride Sharing App.