How to use color in Adobe XD

Course contents
SECTION: 12
Working with Illustrator 10:07

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

89 lessons / 10 hours 32 quiz questions 17 projects Certificate of achievement

Overview

Hi there! My name is Dan & I’m an Adobe Certified Instructor. I’m here to help you learn Adobe XD efficiently and comprehensively. XD is a fantastic design tool used by industry professionals to product high quality & functional mockups. By the end of this course, you will be able to produce practical and effective User Experience (UX) and User Interface (UI) designs.
 
Throughout the course I’ll invite you to participate in a real-life freelance project which I’m working on. It’s a project that requires a fresh website and mobile app interface. This will prepare you for dealing with real world projects if you choose to move towards a UX/UI career path.
 
This course is aimed at people interested in UI/UX Design. We’ll start from the very beginning and work all the way through, step by step. If you already have some UI/UX Design experience but want to get up to speed using Adobe XD then this course is perfect for you too!
 
First, we will go over the differences between UX and UI Design. We will look at what our brief for this real-world project is, then we will learn about low-fidelity wireframes and how to make use of existing UI design kits.
 
I’ll go over all of the essential tools necessary for creating excellent wireframes, including: type, colours, icons, Lorem ipsum, artboards, prototyping, models and popups, symbols and repeat grids. We will even make use of the new prototyping app so that you can experience your prototype on your mobile device.
 
An important part of maximising your UX Design workflow is being able to utilise other software such as Photoshop and Illustrator. This is why I’ll be teaching you how to make use of both to help boost your XD productivity.
 
One of the awesome new features of XD is micro-interactions. I’ll be teaching you all about those and how to use them to grow icons and scenes. This is one of the parts of web design that’s growing and being adopted rapidly so you won’t want to miss out on learning it early.
 
There are two class projects for you to complete during this class, these will help develop your skills and will give you something for your own portfolio.
 
It is now time to upgrade yourself & learn Adobe XD. 


What are the requirements?


  • You will need a copy of Adobe XD 2018 or above. A free trial can be downloaded from Adobe.
  • No previous design experience is needed.
  • No previous Adobe XD skills are needed.

What am I going to get from this course?


  • 87 lectures of well-structured, step by step content.
  • Learn to design websites & mobile phone apps.
  • Work with fonts & colors. 
  • Prototype your designs with interactions. 
  • Test on mobile phones. 
  • Send your designs for feedback & commenting.
  • Export production ready assets. 
  • Create your first UX brief & persona. 
  • Create quick wireframes. 
  • How to use premade UI kits. 
  • Learn professional workflow tricks & shortcuts. 
  • You will get the finished files so you never fall behind
  • Downloadable exercise files
  • Forum support from me and the rest of the BYOL crew
  • All the techniques used by UX professionals

What is the target audience?


  • This course is for beginners. 
  • Aimed at people new to the world of design & user experience. 
  • No previous Adobe XD experience is necessary.
  • For anyone that needs to add ‘UX Design’ to their portfolio.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Downloads & Exercise files

Download Exercise Files

Transcript

Hey there, welcome to this video, all about color. We're going to find out how to steal colors from say an existing logo or brand, and use those. Then we're going to convert them into our Assets panel. We're also going to turn them into this handy kind of reusable option down the bottom here. We'll also jump and have a look at something like this, where there's kind of inspiration for color, and how to use those. All right, so let's jump in there now, and start making colors. 

There's a few ways of working with color in XD. First way is, I'm going to pull it from a logo. So we're going to go 'File', 'Import', then we're going to try and bring in, under our 'Exercise Files', 'Images', you can see my 'ai' files. Currently in this version, you can't actually just bring in ai files, which is a bit of a pain. So what I do is, just open them up in Illustrator, copy them, and paste them in. You can paste really easily, weirdly. I'm going to use this logo here. What I want to do is-- you can double click it, or ungroup it. I'm just going to double click it. Eventually, I'll get the H, and you can see, there's the Fill color. What I'd like to do is, hit that blue '+' button there. And this is going to add it just like easily accessible colors. 

Also, in your Assets panel, which are these two little blobs here, we can go to 'Colors', and because it's selected, it will add it in here as well. So it's good to have them at both those places while we're working. Now, to get other colors, to get maybe color inspiration, a nice place is Adobe Color. It starts to create. I like to jump to this one that says 'Explore'. It just gives you kind of ideas of color groups. You just might use one of these to get started with. They've got a range of them, these concepts. And all you need to do is click 'Save'. You need to log in with your Adobe ID, and pick 'CC Library' for it to go into. Then inside of XD, you can go to 'File', open up your 'CC Library', and in our case, it would be 'Instructor HQ'. And there'll be the colors waiting there. It's not the method I want to use for the moment. 

If you don’t want to use that CC Library option or you're working in a place where you just can't use it, you can just use this website. Click on them, and say 'Edit'. You'll see down the bottom here, it's easiest to copy these Hexadecimal numbers. You can copy them into XD. So draw a rectangle. And over here, click on the icon, and just paste that in there, and it will give you colors. It's a way of transferring them without CC Libraries. Another way to get colors is to look at our Mood Boards. I'm going to zoom out a little bit. I want a kind of a peachy red color I want to use. So maybe something like that, maybe not. Now I'm just looking around for a color. So maybe something like somewhere in there is what I want. 

So what I can do is I'm going to draw a rectangle and I'm going to use the Eye Dropper tool, and this Eye Dropper tool allows me to go off and just pick a color from here. And you can see, followed with that Swatch. That's kind of close to what I want. What you can also do though, it's a nice little trick, you can kind of move this and kind of see stuff underneath, and your Eye Dropper tool will actually go down and pick things underneath as well. So you don't actually have to pick it just from the XD panel like you do in lots of other Adobe products. 

So I've got this color here. It's kind of it. I'm going to double click it over here and I'm probably going to go through and just drag this down a bit. Now I'm just messing about. It's kind of where I want to be. So with this, I'm going to copy it, and then delete it. Come down to here. And what I'd like to do is, just in the paste board up here, I'd like to build out my Swatches. So I'm going to draw a little square, holding 'Shift'. It will give me a perfect height and width. I'm going to start with my green. And what I'll do is, I'm going to have no border. And I'm going to have two of them. One of them is going to be that color. And I like to have, like a secondary color that's just a bit darker. So let's drag this down here. So there's like a darker version of it. Then, I'm going to start with that peach color. So I'll use you, the Eye Dropper tool, take it from that. You're done and dusted. Now I've got another Swatch here, and yours can be a little darker again. And I probably want black. Not black, but I want quite a dark kind of-- probably somewhere out here is what I want. It's kind of gray, but just a little bit of red left in it. And those are going to be my Swatches for this course. I can select the four that I don't already have in here, and hit '+'. All part of that gang. And over here I need to do it a little more individually. So, you, add, and you add. They're handy now, they're in both places, I promise. 

Two more things we want to do before we move on. I want Instructor HQ to be part of the Symbols Library because this is kind of a working logo, just kind of made it quickly to give the company a brand, but we haven't really agreed on our logo yet. So I'm going to add that to Symbols so later on I can update this, and it will update in all the usages. I've got another version I want to bring in, it's the stacked version. I'm going to copy that, paste it into here, and I'll add it to our Symbol. Great! 

Drop me a line if you've got any other questions about colors. We're using RGB because we're going out for digital displays, not CMYK colors. Anything else, drop me a question, and I'll answer it in the comments. All right, let's get on to the next video.

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024