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

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

Web Design Design Thinking UX Design Design Projects

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.

2,000+ classes ranging from fundamentals to advanced techniques.

Mood Boards

Mood Boards

Lesson Info

32. Mood Boards

Lessons

Getting Started with XD

What is UI vs UX

The UX Brief & Persona

Wireframing (Low Fidelity)

How Wide for my Website

Existing UI Kits

Working with Type

Basic Colors & Buttons

Free UI Icons

Footers & Lorem Ipsum

New Pages & Artboards

Class Project 01 - Wireframe

Prototyping & Interactivity

Create a Popup Modal

Prototype

Groups & Isolation Mode

How to Use Components (Previously Components)

Production Video - Left Nav

Repeat Grid

Updating Components & Repeat Grids

Prototype Tricks

Navigation Tricks & Tips

Class Project 03 - Components

Mocking Up an App

XD App on Your Phone

Fixing the Position

iPhone & Android Status Icons

Production Video - Login

Sharing Wireframes

Recording Your Interactions

Class Project - Wireframe Feedback

Mood Boards

Class Project - Mood Board

12 Column or Grids

Working with Colors

Tricks for Using Colors

Gradients

Class Project 06 - Colors

Use Web Safe Fonts

Character Styles

Font & Text Tips Tricks

Plugin Lorem Ipsum

Paste Properties

Class Project 07 - Text & Buttons

Draw Custom Icons

Strokes & Lines

Pen Tool

Drawing Practice

Production Video with Tips

Illustrator in XD

Class Project 08 - Custom Icons

InDesign in XD

Pros & Cons for Images

CC Library Connection

Adobe Stock

Free Images

Masking

Photoshop in XD

Infographic

Class Project 09 - Hi-Def Mockup

Mobile Phone Mockup

Class Project 10 - Mobile Website

Hidden Features for Repeat Grid

Plugin - Content Generator

Plugin - UI Faces

Plugin - PhotoSplash

Plugin - Copy Cat

Advanced Asset Panel

Advanced Symbols

What are Micro Interactions

Button Grow

Animated Image Gallery

Full Vector Change

Class Project 11 - Micro Interactions