When designers gather a different work for their inspiration, they arrange what's called a Mood Board. 1
It's basically putting together any sort of inspiration, that you think will be useful for your project. 2
This, for example, is a mood board from one of my client projects. 3
There are screens of different home pages that I found on the sites, that I mentioned before. 4
You can even draw inspiration from your own personal work. 5
So for example, one of these shots that I put here is my own work. 6
Inspiration doesn't have to be a website design. You might gather illustrations that you like, 7
app screens, art, architecture, photography, movie posters. Or, you know, Dogon tribe masks, just like Picasso. 8
There are no rules. 9
It's basically setting the mood for your project. 10
Just like the name says. In this exercise, we're going to practice creating a mood board. 11
Your goal is to go on those inspiration websites that I mentioned previously and gather inspiration 12
for a website for a uber kind of, ride sharing app. 13
The app itself is not your project. 14
The project is basically a website like a home page for the ride-sharing app. 15
Let me demonstrate an example. I'll create a mood board for team collaboration website or a landing 16
page. 17
You know products like Slack and Trello? 18
If you're familiar with it. 19
I have my inspiration sites open here. But first I'll start looking at product websites 20
I already know. So I'm going to check Slack. Asana is another one that I know. And Trello. And see what they 21
are doing. 22
When you like a website, or a section, or any parts of the page, just take a screenshot. 23
We will organize all screenshots and images later. 24
Okay, let's now check on other inspiration websites. Dribbble's search with keywords 25
isn't that good, 26
so try using as little keywords as possible and try searching in different words. 27
This one is in bad. Often on Dribbble designers post the screen of the full page, which you can see in the 28
attachment right here. 29
This way you can see the full page in more detail. 30
I'm just going to save the entire page. 31
This one is similar to Asana, but here I like these overlapping interface elements. Asana had just illustrations. 32
This is nice because it gives more idea of the product. 33
Plus this is more simple to make. 34
I can't illustrate, so I'd have to hire an illustrator if I want that in my project. 35
Okay, let's check other inspiration sites. 36
I usually spend about an hour gathering inspiration. 37
It's an important part of the design process. And if I do this part diligently I have much more easier 38
time designing. And if I don't, I often need to come back and find more inspiration. 39
Pinterest is actually where I save random inspirations outside of projects. Like if I'm randomly browsing 40
the web and I come across to some interesting design, I will save it on Pinterest for future reference. 41
It's a great place to have your own personal collection. 42
You can create your, like, personal board on Pinterest and install their browser extension and save screenshots 43
and images from the web to your private collection. And then you can come back to these pins later when 44
you're looking for some inspiration for your project. 45
Okay, now I'm gonna look off-topic, not necessarily for team collaboration websites. This isn't bad. 46
This section is very lovely. 47
I like photo overlapping with those graphics. 48
Lapa.ninja or land-book are excellent because we can see live sites, which can give us ideas on 49
animations and interactions and all that stuff. 50
I think we have enough. 51
Now we are going to create a mood board in Figma. 52
And place all those shots in there. 53
So just draw a basic frame in Figma and pull all your screenshots on it. 54
I use dark background because most websites are on white, so they will have better visibility on a dark 55
frame. 56
Doesn't really matter how you arrange them. 57
Here you can scatter them as you like. 58
And that's all there is to it. 59
That's our Mood Board. 60
Later we'll learn how to actually draw inspiration from all these 61
things that we collected. And how to use them in project while we are designing it. 62
Now it's your turn. 63
Go ahead and collect inspiration for a website 64
that is for a Ride Sharing App.