Skip to main content

Mood Boards

Lesson 32 from: Adobe XD: UX/UI Design Essentials

Daniel Walter Scott

Mood Boards

Lesson 32 from: Adobe XD: UX/UI Design Essentials

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

32. Mood Boards

Lessons

Class Trailer

Getting Started

1

Getting Started with XD

02:21
2

What is UI vs UX

06:19
3

The UX Brief & Persona

11:22

Wireframing Low Fidelity, Type, Color & Icon

4

Wireframing (Low Fidelity)

01:58
5

How Wide for my Website

13:06
6

Existing UI Kits

07:49
7

Working with Type

09:09
8

Basic Colors & Buttons

14:14
9

Free UI Icons

11:45
10

Footers & Lorem Ipsum

05:27
11

New Pages & Artboards

04:20
12

Class Project 01 - Wireframe

11:11

Prototyping a Website

13

Prototyping & Interactivity

08:53
14

Create a Popup Modal

07:57
15

Prototype

02:54
16

Groups & Isolation Mode

02:30
17

How to Use Components (Previously Components)

17:19
18

Production Video - Left Nav

03:52
19

Repeat Grid

05:27
20

Updating Components & Repeat Grids

08:54
21

Prototype Tricks

06:03
22

Navigation Tricks & Tips

04:48
23

Class Project 03 - Components

04:07

Prototyping an App

24

Mocking Up an App

09:40
25

XD App on Your Phone

08:04
26

Fixing the Position

01:01
27

iPhone & Android Status Icons

03:10
28

Production Video - Login

06:45
29

Sharing Wireframes

13:32
30

Recording Your Interactions

03:13
31

Class Project - Wireframe Feedback

01:21
32

Mood Boards

07:43
33

Class Project - Mood Board

00:59
34

12 Column or Grids

04:57
35

Working with Colors

09:02
36

Tricks for Using Colors

06:34
37

Gradients

03:50
38

Class Project 06 - Colors

02:14

Text & Drawing

39

Use Web Safe Fonts

18:00
40

Character Styles

06:59
41

Font & Text Tips Tricks

05:43
42

Plugin Lorem Ipsum

05:39
43

Paste Properties

13:15
44

Class Project 07 - Text & Buttons

02:21
45

Draw Custom Icons

04:13
46

Strokes & Lines

14:28
47

Pen Tool

14:34
48

Drawing Practice

07:15
49

Production Video with Tips

12:27

Working with Illustrator, InDesign & Photoshop

50

Illustrator in XD

09:34
51

Class Project 08 - Custom Icons

01:49
52

InDesign in XD

11:38
53

Pros & Cons for Images

03:58
54

CC Library Connection

11:01
55

Adobe Stock

05:20
56

Free Images

01:48
57

Masking

06:44
58

Photoshop in XD

08:41
59

Infographic

12:12
60

Class Project 09 - Hi-Def Mockup

05:38

APP Design

61

Mobile Phone Mockup

18:08
62

Class Project 10 - Mobile Website

01:24

Placeholder content & Plugins

63

Hidden Features for Repeat Grid

05:17
64

Plugin - Content Generator

04:29
65

Plugin - UI Faces

03:15
66

Plugin - PhotoSplash

04:31
67

Plugin - Copy Cat

03:19
68

Advanced Asset Panel

04:37
69

Advanced Symbols

07:52

Micro Interactions

70

What are Micro Interactions

07:21
71

Button Grow

06:13
72

Animated Image Gallery

06:39
73

Full Vector Change

08:19
74

Class Project 11 - Micro Interactions

05:12

Prototyping Advanced, Voice Interactions & User Testing

75

Time Delay Transitions

04:42
76

Popup Menu or Modal

12:16
77

Animated Mobile Side Nav

03:26
78

Drop Down Menus

03:24
79

Drag Transitions

07:19
80

Number Ticker Scroll

06:51
81

Alexa Voice Commands

09:37
82

What is User Testing

16:53
83

Unmoderated UX Test

12:07
84

Class Project 12 - User Testing

02:23

Pitching to clients & customers

85

Mocking up in Photoshop

09:21
86

ProtoPie

02:40
87

Add Animation Using After Effects

09:39
88

Export Images & Assets

12:56
89

Export Code Using Design Specs

10:49

What Next

90

Class Project 13 - Roar Cycles

10:29
91

Conclusion

05:32

Final Quiz

92

Final Quiz

Lesson Info

Mood Boards

Hi there. This video is all about mood boards. People never know what I'm saying. It's M. O. D. Your mood like happy, sad. We want to mood for our designs. We're going to build it in X. D. We're going to look at inspiration places, get an idea of the field, the look the mood before we move on and actually start building our high fidelity mock ups. Alright, let's jump in. Alright, so it is time to start with the high fidelity version of our instructor, HQ XD project. And high fidelity just means it's got all the images and all that. It looks exactly how it's going to look when it's finished. So fonts, colors, images, that type of thing. But before you get started in terms of doing the design, I find it's really useful to create a mood board first. So whether you use this mood board to go to your client and say this is the kind of look and feel that I'm going for. You know, this is the kind of zone I feel you've communicated to me or whether you just use it personally. It will depend on ...

the relationship with the client. Sometimes it is pretty casual and you can go back and say, hey, here's the mood board and do it pretty casually just in an email to see where you are on track. Sometimes though in a larger kind of job, you might have to go back and present concept ideas. Okay, so mood boards will only be used for you personally. So you might have to go back and pick kind of like maybe three visual themes for them to pick from. That will depend on a couple things, budget, client expectation, those sorts of things. So either way it's really handy to start with a mood board just to get your ideas and you know, get inspiration now, where do you get it from? Everyone's probably got their go to place for inspiration. Could be Pinterest instagram, I use these places, so I use batons, dribble and nice with two eyes Dribble with three beefs. Okay, Behind his adobes one, it's a really good one. So the cool thing about it is once you've been using it a little while it starts recommending stuff for you that's kind of in your zone. Um once you're in here, so go to Bahamas dot net and you can do a search, you can say, I want to find all the kind of Ui uX things, so I might go in here, it's weird, you gotta search on this top chunk of PS if I go, you y take with 10, you can see it's just kind of cool uI stuff. Okay, and you end up just kind of loading, you're like, oh man, I really like, this may be just the color ways or the kind of squiggly thing is you find the bits you want and I just do screenshots. Okay, so my Mac, it's command shift four and it just does a big old screenshot around it and that will save it to my desktop, if you're on a pc, we talked about this earlier, I can't quite remember off the top of my head for a pc or you can right click these guys and start saving the images and places up to you. So once you've, so this is one place, right, we've got Bahamas dribble with three Bs is another really useful place. Um the same sort of thing in here. Just go through, Open up loads lots of screenshots and so nice. You can do a search. I did a search here for you. I the cool thing about Nice is that once you like it, you can say I want to add it to one of my board so you can hit plus and you can say I want to add them to my board, you create boards and you can add to them. It's just like a little collection, little group of stuff you say actually I want to add that to it. Okay, so you it's free for the first couple of boards. Okay. And you say I want to add that, I want to add that to this passive HQ board. Just some random bored I had and then you can open up that board. This is uh there's all of my boards, there's the passive HQ one. Okay. And I click on it and it will load them up in a cool, nice little collection. It's really pretty much alright here's my passive HQ board. You can see it's got very kind of like, even though I thought I was picking random stuff to go in it all has a very similar kind of color way and very kind of look to it. And what's really nice about this is you can export this as a pdf and it's just a very good, you can link this to people consented decline and say this is what I'm thinking. And also like there might be bits where you're like actually that there is very large and you're like actually I just wanted to be smaller. Actually even smaller, hold all to reduce there you go. So holding option on my Mac and I can just keep making it smaller until its like not such a significant part. And then you can say that I'd like to be a really big part of the feel of this kind of mood board. So this is some cool ways of getting ideas. Nice is a nice way of getting them all together. But what you might do is just do what I do here in XD is and we're going to just dump them all on the page that we can always see them rather than being on this like separate website. So before we move on and we're not going to upgrade our wireframe, I don't often do this like the wireframe was good and it's been, you know clients approved it and they love it and we need to move on to the high fidelity version. You could just start switching out these colors for images and stuff. I don't want to do that. I want to start with a new document. I like starting fresh again. So we're gonna start with a new document. We're going to make it this web 1920 again, we're gonna need this outboard. We're gonna call this one homepage, we're going to save this, we're going to save it to our desktop. We're going to put it in the same folder but this one here is going to be our I H Q. This one is going to be our high high fidelity high five. This one is going to be version 1. I click save. And what I end up doing is I've got all my screenshots right already done a bunch of them. Okay, They are in your exercise files and and images and I just put them all in here in this mood board and open that up. So there's a bunch of screenshots. Okay, what I like to do is just grab all of them. Actually grabbing all of them runs into a small little problem. I'll show you in a sec. So I grab them all and I dumped them all into XD. They kind of zoom off into the edge there. Can you see they've kind of zoomed off all that side so you can stick them all. So I've just gone edit, I'm just going to drag them all across and I actually got to shrink them down. Member hold shift to scale them down proportionately. That's why I kind of draggin maybe 10 at a time or five at a time and now what I'm going to do, Zoom way out. I'm making myself like a caveman move board, It's not as pretty as the Nice one, but it's going to work and I'm gonna have it small enough so I can see it kind of just up here. So when I'm designing, I'm kind of like taking notes, pulling colors from and looking at font compositions and the hierarchy of type all from these kind of style guides that I've got that both me and the client have gone, yep, that's kind of where we want to go with this. So I find that mood board just up here, it's just as handy. Now, one or two other places you can look for for ideas, especially if you're new to UI design is in the adobe market. So under your creative cloud app, remember up the top here on a Mac, down the bottom on the pc, go to assets market where it says featured, drop that down. If you've got a search already going in here, you might have to kick cross there, go to the featured and go to this one that says user interfaces so there's a lot in here free to use. And the cool thing about this is not only is it like visually quite cool, but they're actually usable. Things like Ui kits in here that you can actually start using the buttons for their allowed allowed to use them commercially. I'm scrolling. You can see it's just loads of them in here, which is a cool way to go order to hit up google and type in Ui kits, K I T s and there's ones you can pay for ones you can buy. You might use that kind of inspiration to get started because it's really specifically Ui and not only is it just like they kind of homepages, it'll have all the nitty gritty like ticks and checkboxes and edits and form fields and it has a little bit more going for it. All right, so we've got our visual kind of idea, our mood board going, Let's move on to the next video

Class Materials

Bonus Materials with Purchase

Six Completed Files
Exercise Files

Ratings and Reviews

Haseebullah Johar
 

Thank you, Dan Scott, for providing such a beautiful Adobe XD course. I completed the course today and noticed a couple of things that are missing. I want to share them here so that you can upgrade the course, which would be helpful for us. Hover state and toggle state. Dragging pages from 1-2 to 2-3 and then back from 3-2 to 2-1 with dragging is not working. Another thing is that we learned scrolling the website from top to bottom, but scrolling or pushing things from right to left has been completely omitted. These are the things I have noticed, and I would like you to upgrade them so that we can improve our Adobe XD skills.

Student Work

RELATED ARTICLES

RELATED ARTICLES