Mood Boards
Daniel Walter Scott
Lessons
Getting Started with XD
02:21 2What is UI vs UX
06:19 3The UX Brief & Persona
11:22 4Wireframing (Low Fidelity)
01:58 5How Wide for my Website
13:06 6Existing UI Kits
07:49Working with Type
09:09 8Basic Colors & Buttons
14:14 9Free UI Icons
11:45 10Footers & Lorem Ipsum
05:27 11New Pages & Artboards
04:20 12Class Project 01 - Wireframe
11:11 13Prototyping & Interactivity
08:53 14Create a Popup Modal
07:57 15Prototype
02:54 16Groups & Isolation Mode
02:30 17How to Use Components (Previously Components)
17:19 18Production Video - Left Nav
03:52 19Repeat Grid
05:27 20Updating Components & Repeat Grids
08:54 21Prototype Tricks
06:03 22Navigation Tricks & Tips
04:48 23Class Project 03 - Components
04:07 24Mocking Up an App
09:40 25XD App on Your Phone
08:04 26Fixing the Position
01:01 27iPhone & Android Status Icons
03:10 28Production Video - Login
06:45 29Sharing Wireframes
13:32 30Recording Your Interactions
03:13 31Class Project - Wireframe Feedback
01:21 32Mood Boards
07:43 33Class Project - Mood Board
00:59 3412 Column or Grids
04:57 35Working with Colors
09:02 36Tricks for Using Colors
06:34 37Gradients
03:50 38Class Project 06 - Colors
02:14 39Use Web Safe Fonts
18:00 40Character Styles
06:59 41Font & Text Tips Tricks
05:43 42Plugin Lorem Ipsum
05:39 43Paste Properties
13:15 44Class Project 07 - Text & Buttons
02:21 45Draw Custom Icons
04:13 46Strokes & Lines
14:28 47Pen Tool
14:34 48Drawing Practice
07:15 49Production Video with Tips
12:27 50Illustrator in XD
09:34 51Class Project 08 - Custom Icons
01:49 52InDesign in XD
11:38 53Pros & Cons for Images
03:58 54CC Library Connection
11:01 55Adobe Stock
05:20 56Free Images
01:48 57Masking
06:44 58Photoshop in XD
08:41 59Infographic
12:12 60Class Project 09 - Hi-Def Mockup
05:38 61Mobile Phone Mockup
18:08 62Class Project 10 - Mobile Website
01:24 63Hidden Features for Repeat Grid
05:17 64Plugin - Content Generator
04:29 65Plugin - UI Faces
03:15 66Plugin - PhotoSplash
04:31 67Plugin - Copy Cat
03:19 68Advanced Asset Panel
04:37 69Advanced Symbols
07:52 70What are Micro Interactions
07:21 71Button Grow
06:13 72Animated Image Gallery
06:39 73Full Vector Change
08:19 74Class Project 11 - Micro Interactions
05:12 75Time Delay Transitions
04:42 76Popup Menu or Modal
12:16 77Animated Mobile Side Nav
03:26 78Drop Down Menus
03:24 79Drag Transitions
07:19 80Number Ticker Scroll
06:51 81Alexa Voice Commands
09:37 82What is User Testing
16:53 83Unmoderated UX Test
12:07 84Class Project 12 - User Testing
02:23 85Mocking up in Photoshop
09:21 86ProtoPie
02:40 87Add Animation Using After Effects
09:39 88Export Images & Assets
12:56 89Export Code Using Design Specs
10:49 90Class Project 13 - Roar Cycles
10:29 91Conclusion
05:32 92Final 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
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 Classes
Web Design