Working with Colors
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
Working with Colors
Hi there. This video is all about creating colors. We'll steal them from, logos, will steal them from images will create this little color way here, we'll add it to our little favorite swatches plus into our assets panel. I'll show you a couple of places where you can get cool colors, color inspiration. If you will. Let's get started. Alright, so I'm going to show you a few different ways to bring in colors. The first one will be, let's say we've, you can see easily. There's kind of a reasonable color field that I've kind of picked with my screenshots of my mood board. I'll show you how to steal one from that. So let's just create a rectangle over here and instead of picking the fill from in here, we're just gonna use the eyedropper tool and watch this. You just kind of move around and decide that yes, I want this kind of blue color and so you like it. I'm going to add it to my little plus down the bottom here. You can keep doing that with different colors. Another way of stealing colo...
rs might be, um, you can actually just move this thing out of the way so you can see stuff behind it. So if I minimize this, you can kind of see things in the background. Okay, so there's my dribble page so I might just move at this page. It's that same rectangle. If I grab the eye drop at all. Can you see I can steal stuff from here, but also just random stuff anywhere. Okay, I might pick this. Okay, I can add that to it so it doesn't really matter. You can just move this, make it smaller, move it out of the way and start stealing things from the background. It might be an easier way to see your logo from your company. Maybe their website. Just steal it straight from that. Another way it might be is let me make that full screen again is to pull it from the logo. So I'm going to import a logo file import now. Remember with XT at the moment I'm pretty sure they're changing this really soon is you can only you can't import illustrator files if you've got the logo as an illustrator file. But let's bring in the exercise files, lets go to images and let's go to where is it logo? I've made a few PNG S for you and Suggs but you can see the er files are blacked out of them. So let's say I bring in this PNG, okay you might have that version, you can steal the color from this easily. So click on this, grab the eyedropper tool and just steal it from the logo. Bring it in, stealing colors and let's add it to our little color swatches. Even easier if you've got a vector version. So remember an SVG is handy so if I go to import I've got SVG. I'm just showing you the different ways you might be able to grab the colors. That was an SVG. A scalable vector graphic. And because it's scalable and victor, you can keep on grouping this thing until you grab the, the queue there, you can see it's actually got the fill in it so you can just, it's the same color as that, but you could hit plus now, instead of using the eyedropper tool, it'll be a little bit more accurate in terms of the color. If you've got colors, say you've got a brand guidelines. So your client might actually have asked them if you're working for somebody, do you ask them? Do you have brand guidelines? And if it's a large company they'll definitely have something somewhere that explains what the colors are, what their fonts are to ask for that. If you're working internally in a place you probably know it off by heart or if you're dealing with like a startup or like your dad's mom's cousin's lawnmower shop, they probably don't have brand guidelines. You just kind of grab it from their website or logo or they might be expecting some brand new colors. But if you are typing it in, you can just click in here, you can't type in C, m, Y K colors, but you can drop that down and often people have the RGB values and you can just type it in there and hit plus sometimes they might have the hex to decimal number and you can just type it in there, nobody writes down the hue saturation and brightness sliders, but there it is there any way. Alright, so we looked at bringing in corporate colors, pulling from our mood boards, where else can we get color ideas or color ways? Because you might like some of the designs in here, but not the colors. If you're like me, you end up getting stuck in the same kind of colors you want to kind of break out of. That little bit really cool site is adobes color dot adobe dot com. It's about the american way. So log in with your user name, you don't actually have to log in with your adobe I D. And but definitely go to color dot adobe dot com And I like this one that says explore along the top here and it's going to show me the most popular this month and it just shows me what other designers are using, what they're downloading, what they're liking. And you can see there's just some really great colors that work together as a nice little unit. Okay. And to use them. And at the moment you can't down if you normally you hit save and they go to the CC library, but that's not something that's working in XD, you might check it, your, you know, in the future, it might be working, you click save and you add it to your CC library, it's not currently working in X D for me. Okay, so the way to get it into XD, just click on edit copy, it takes you back to this kind of window here and those are my five colors. So this first one here, I'm going to grab the hex to decimal number, copy it in here, make sure it's on hex, paste it in, you can see there's the peach color, then I can add it to my swatches to remove things from your swatches. We haven't done yet, click hold, drag, drag, drag they disappear. You just kind of work your way through, click on this one, grab it, copy it, paste it and you can move it in that way. Alright, so I'm going to kind of finalize my colors and show you what I like to have as options while I'm building, I'm gonna get rid of this one, draw a bunch of little swatches at the top here, like you saw at the beginning, you saw those little kind of color chips to use. So first one's gonna be white, so I'm gonna click on it actually, I'll get rid of the borders of these. These are just here as visual cue, so I'm going to add the white, I will this one here, I'd like to be, I want a lighter green than that as well, there's kind of one up here that I wanted. Where are you, my friend, that one, the irish and probably even a little brighter. So I'm just gonna kind of drag it towards this little home up there, I'm going to add that. So I've got a kind of a light one. Like to put them in order as well. Kind of a slightly dark one. Let's add that to my little switches. I want another even darker one so I'm gonna grab it and just kind of drag it down here. Then I want to use that blue. Even then I probably just want a little bit lighter as well. Don't be afraid to drag around at the moment. I'm not using kind of corporate guide specs so I could just do anything I like. I want a darker version as well. So even if you've just got like a one color, like that's the corporate color. Don't be afraid to just grab one and have a slightly darker version of it to use as a nice kind of compliment to that original kind of strong color. I want a greater use as well. So I'm going to go off now instead of just a full on gray, you can make it just out here to make it kind of like a midnight gray. So it's just a bit steely or you can shift this hue into the yellows and have a bit warmer gray. Can you see warmer? Let's do the stealing one. So over the steely one, can you see they're still gray. That one looks really brown in comparison now. So you might do it a little bit more subtle. So not far out there, you can see kind of a steely blue gray. Should zoom in that easy. Everyone a decide what you're going to do for your design. I'm going to go for the slightly warmer version and at the end here I want black. Alright, so there's the colors I'm gonna use. I like to have a little swatch at the top here. I'm going to make sure they're all added to this, which we can't do all in one big o which is annoying. So I clicked on that one, done that one down that one. I don't have this one. Stick with me because I want to show you how to add them all to the assets in one big go which you can do you and this. There we go. The other thing I want to do is grab them all and and make sure you're in design, make sure you're in your assets panel, click on colors And now we've all got them added over here as well. It's handy having them in both places, assets and in this like handy little swatch picket thing. Alright, so we've got some colors we're going to get started with. I'm not sure. I'm super happy with that one. I'm probably going to mess about with this one in the break, just in the break while you're not watching. Just wanted to Well maybe that's it. Okay. And and I've got my colors, we can change them later on. Don't worry. If you want yours to be exactly like mine, you can type them in. Here's all the hex numbers over here. You can just type them in make sure they're exactly the same. Except that one is not going to be. You have to delete him. Right, click him. Delete him. I want that guy to be added dan. You shouldn't mess with things after you've picked them. Same with this one needs to be updated you and to get rid of a color. Have we done this before? I'm not sure. See this one here is not the one I want. Just drag it off and it's gone. All right. Those are the colors. I promise not to change them much. I'll see you in 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.