Mood Board

9 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$99.99
List Price:  $139.99
You save:  $40
€92.81
List Price:  €129.94
You save:  €37.13
£79.68
List Price:  £111.56
You save:  £31.87
CA$136.70
List Price:  CA$191.38
You save:  CA$54.68
A$151.47
List Price:  A$212.07
You save:  A$60.59
S$134.88
List Price:  S$188.84
You save:  S$53.96
HK$781.18
List Price:  HK$1,093.68
You save:  HK$312.50
CHF 90.49
List Price:  CHF 126.69
You save:  CHF 36.20
NOK kr1,087.35
List Price:  NOK kr1,522.33
You save:  NOK kr434.98
DKK kr692.92
List Price:  DKK kr970.11
You save:  DKK kr277.19
NZ$166.33
List Price:  NZ$232.87
You save:  NZ$66.53
د.إ367.25
List Price:  د.إ514.16
You save:  د.إ146.91
৳10,943.35
List Price:  ৳15,321.13
You save:  ৳4,377.77
₹8,337.18
List Price:  ₹11,672.39
You save:  ₹3,335.20
RM473.95
List Price:  RM663.55
You save:  RM189.60
₦123,487.65
List Price:  ₦172,887.65
You save:  ₦49,400
₨27,738.77
List Price:  ₨38,835.40
You save:  ₨11,096.62
฿3,675.50
List Price:  ฿5,145.85
You save:  ฿1,470.34
₺3,235.04
List Price:  ₺4,529.19
You save:  ₺1,294.14
B$509.60
List Price:  B$713.47
You save:  B$203.86
R1,850.72
List Price:  R2,591.08
You save:  R740.36
Лв181.51
List Price:  Лв254.13
You save:  Лв72.61
₩135,590.93
List Price:  ₩189,832.73
You save:  ₩54,241.80
₪370.74
List Price:  ₪519.05
You save:  ₪148.31
₱5,705.78
List Price:  ₱7,988.32
You save:  ₱2,282.54
¥15,303.96
List Price:  ¥21,426.16
You save:  ¥6,122.20
MX$1,697.07
List Price:  MX$2,375.96
You save:  MX$678.89
QR363.69
List Price:  QR509.19
You save:  QR145.49
P1,358.38
List Price:  P1,901.79
You save:  P543.40
KSh13,211.65
List Price:  KSh18,496.84
You save:  KSh5,285.18
E£4,788.95
List Price:  E£6,704.73
You save:  E£1,915.77
ብር5,723.72
List Price:  ብር8,013.44
You save:  ብር2,289.71
Kz83,591.64
List Price:  Kz117,031.64
You save:  Kz33,440
CLP$94,219
List Price:  CLP$131,910.38
You save:  CLP$37,691.37
CN¥723.64
List Price:  CN¥1,013.13
You save:  CN¥289.48
RD$5,794.19
List Price:  RD$8,112.10
You save:  RD$2,317.90
DA13,457.95
List Price:  DA18,841.67
You save:  DA5,383.72
FJ$225.30
List Price:  FJ$315.43
You save:  FJ$90.13
Q775.06
List Price:  Q1,085.12
You save:  Q310.05
GY$20,860.22
List Price:  GY$29,205.14
You save:  GY$8,344.92
ISK kr13,949.49
List Price:  ISK kr19,529.85
You save:  ISK kr5,580.35
DH1,005.73
List Price:  DH1,408.07
You save:  DH402.33
L1,766.28
List Price:  L2,472.87
You save:  L706.58
ден5,712.52
List Price:  ден7,997.75
You save:  ден2,285.23
MOP$802.57
List Price:  MOP$1,123.63
You save:  MOP$321.06
N$1,845.78
List Price:  N$2,584.16
You save:  N$738.38
C$3,670.67
List Price:  C$5,139.09
You save:  C$1,468.41
रु13,313.56
List Price:  रु18,639.52
You save:  रु5,325.95
S/372.22
List Price:  S/521.13
You save:  S/148.90
K385.44
List Price:  K539.63
You save:  K154.19
SAR375.02
List Price:  SAR525.04
You save:  SAR150.02
ZK2,689.66
List Price:  ZK3,765.63
You save:  ZK1,075.97
L462.03
List Price:  L646.86
You save:  L184.83
Kč2,326.92
List Price:  Kč3,257.79
You save:  Kč930.86
Ft36,152.68
List Price:  Ft50,615.20
You save:  Ft14,462.51
SEK kr1,078.64
List Price:  SEK kr1,510.15
You save:  SEK kr431.50
ARS$87,815.44
List Price:  ARS$122,945.14
You save:  ARS$35,129.69
Bs690.51
List Price:  Bs966.74
You save:  Bs276.23
COP$388,367.89
List Price:  COP$543,730.59
You save:  COP$155,362.69
₡50,962.55
List Price:  ₡71,349.61
You save:  ₡20,387.06
L2,463.20
List Price:  L3,448.58
You save:  L985.38
₲746,475.93
List Price:  ₲1,045,096.16
You save:  ₲298,620.23
$U3,821.56
List Price:  $U5,350.33
You save:  $U1,528.77
zł401.98
List Price:  zł562.79
You save:  zł160.80
Already have an account? Log In

Transcript

Let's quickly create our mood board. So from your home screen, simply click on this web 1920 just to open up a new file, enlarge it Ctrl zero so it can smack into position. And you can type in mood board, if you want to. And this mood board is just to inspire you just so you can understand some different color combinations, some different text variations, you can explore with clients logo. If the logo is really a particular style inside of your niche, it's really up to you. And you can include as many elements as you want inside of your mobile, you can then show it to a client if you want to and if the client wants to look at it.

And this is basically just so that inspires you. So you can better understand inside of your head, how different color combinations and font combinations will work on this project. So to start, I'm simply going to choose Rectangle tool and just simply To draw in just a rectangle like this, for example, hit repeat grid, make two like this, and maybe even make three like this, I will go ungroup grid, use the Select tool, click on one on the corners, hold Shift, and then simply enlarge it so that I can have a bit more space for our images. Next up, you can then drag and drop images inside, but what I want to do first is select all of them and remove the border from here. And then I can go ahead and simply drag and drop some images inside. I already downloaded some images.

And if you want some nice free images, you can use unsplash.com simply type in a room for example. And it will give you all kinds of different minimal collections. And as you can see, inspiration is endless just from these particular examples, but I went ahead and simply downloaded a few images to give me a heads Start, you will not get these images inside of your back just because they are too large. But as I explained just a few seconds ago, you can jump into unsplash.com. And you can click on the image, you can right click on it, copy, and then jump back into XD Ctrl or Command V, and it will paste it inside of your document. You can then use it and include it in any of these image placeholders.

But as I said, this is just so that we can better understand some of these colors. And to reposition some of these images, double click on them hold Shift, and you can position them better, however you want to. I'll simply jump in right here and jumping right in some of these images and maybe move them around just a bit more, just so it's more clear what's inside. Now once again, these images can be whichever ones you want. Once again, you can jump into unsplash and for example, if your project has a war Colors, you can use these ones, but because ours doesn't, and it uses these tones, maybe this image is perfect, because it shows furniture inside of the space. And you can use any of these, for example, have a nice lamp and a nice coffee table or nightstand right here.

And you can, for example, sample some colors from those images. But once again, I'm I chose to use these ones, and you can choose whichever ones you want. Next up, use a rectangle tool once again, hit repeat grid and simply enlarge it to around let's say, Yeah, something like this is fine. You can even increase the spacing by doing this. And ungroup great because we are going to choose and sample some different colors for our project. Now we're not going to use these colors because client already has colors.

But in some cases, maybe you want to show them different colors and how they work with particular images. shapes. And in majority of cases, clients will look for your advice and listen to what you have to say. So in those cases, you can then implement those colors into the project. And clients will love you for it because you gave them an advice and show them how some colors work with other colors. So in this case, let's go from darkness all the way down to lightest.

And you can use this pick color tool, color picker however you want. And choose this dark gray for example, and maybe you can find some other shade. Let's use maybe this one. Yeah, it looks well. And then you can select it and jump in right here and maybe use a lighter shade. For example, like this.

Maybe you want to choose this color, and it's really dark. Maybe we want to go there. And maybe you can choose for example, this wooden color and maybe This one right here, just so you can help creation. And because I found these borders annoying, you can select all of them and see because right here to remove the borders from your colors. Now, as I said multiple times throughout this video, this is just for your inspiration. And you can use whichever images and colors you want.

So for example, maybe we want to go the other way around and choose this color. And maybe select this darker color because we like it for the text, maybe, maybe want to choose this lighter color, because maybe we want to add some drop shadow or something like that. Use the slider color. Maybe you want to explore with some frames inside of your design, use this color, and so on and so forth. So it's really up to you to determine which colors you want to choose. And this is just a quick example about how you can create a nice and simple mood board.

Now to give ourselves area from the text. You can double click on new artboard and simply enlarge it to around here. Then what you can do is press T for the title, click inside and make type in. This is our headline Ctrl Command A and clients when a client wants to use Open Sans, so install it. It's free from Google fonts. And maybe we want to use bold, and this is for our headlines.

So maybe we can increase it to 48. Just so that we can see it a bit better. You can position it like so Ctrl D to duplicate it, position it right here, hold Shift, press down arrow, for example, four times so that we can have four pixels spacing between our headline and our text. Now to convert this to, from the point text to area text, you can simply click right here. And maybe we want to reduce the size. So for example, this is 48.

Maybe we can use 24 You can increase the size of this paragraph just by dragging these handles. And one final thing we want to do is jump right here to the plugins panel and find lorem ipsum, it's free to install, and you can jump back to the home screen and you can go to add ons, you can go to plugins, and from here, you can simply type in lorem ipsum and it will pop up right here and simply click Install and you will have this exact extension, I mean the plugin as I have. So once again lorem ipsum, click fill with placeholder text, make sure text is selected. Click there and you can choose whichever text you want. From here, simply click insert text. And there you go.

We have our complete paragraph. Now change it from bold to regular, and maybe go with this a bit darker or maybe we can even change the color to this color that we already selected from here. And finally maybe we can explore And choose extra bold just to see the distinction between the headline and the paragraph a bit better. So you can finally double click right here positioned the right here, you can place your logo right here, include a bit more images, maybe include some other websites. So that's basically a mood board. You can include as many elements or as few elements as you want to inspire yourself for the project in hand.

And you can then print this out, show it to your client or send them via email, you can save it out as a JPEG, simply click right here on the name of your artboard hit Ctrl command E, choose either PNG or JPG from here, choose the destination hit export as a single image, which you can then show to your client. In the next video, we're going to move on to sketching and I'm going to show you a template that I created for you, which you can use to sketch out your wireframes and then use them as inspiration and as guidelines in your project. So I'll see you there

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.