Skip to main content

Working with Colors

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

Daniel Walter Scott

Working with Colors

Lesson 35 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

35. Working with Colors

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

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

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