How to Apply a Color Scheme Palette to a Project

today you're gonna learn how to apply your color schemes to your projects before we begin this video sponsors hellosign which offers an API that helps companies grow revenue faster by automating document workflows with a developer friendly ease signature API that makes it simple and easy to embed secure in legally binding documents directly into your website jeetu crowd says hello signs API is two times faster to implement than any other esign provider you or you're devs can send your first API call in minutes and your app certification is always free and you won't find an e-signature product with an easier path to implementation alright let's get back to it everyone Gary Simon of course tetro so just a few days ago I released a video where I did an overview of six different popular color scheme pickers and a few of you gave the same remark that okay say we have a color scheme that one of these tools produces how do we actually use it and know which colors to apply if we're designing like a website or a UI design or an app design or something like that so that's what I'm going to address today first we're getting going to use one of the tools to pick a color scheme and then I'm going to apply that color scheme using Adobe experience design and apply it to this fictional sort of app based login page right here alright so for today's questions when picking color schemes do you use a tool or do you pick them all by yourself just by your own intuition let me know in the comments I'll let you know what I think about that question in the pinned comment make sure you subscribe and let's get started alright so I before I get to this color picking section just to show you this is the project here real quick I'm gonna make it available for download if you want to just you know follow along with this if you wish as you can see everything's just gray here and that's to allow me to add color to this as a demonstration so I'm you know in a previous video that I did a few days ago this is one of the tools that I you know did a overview of and this is the one we're gonna be using if you want to see the other ones go check that video out click start the generator and here we go so I like when I'm choosing a color scheme if I you one of these color scheme Pickers and I don't always use them what I'm looking for is I a primary color a second secondary color in an accent color and then maybe some other you know secondary secondary type colors that could be used as backgrounds or kind of model backgrounds and all that so sometimes when you start a project you know for certain there's certain colors that you want to use and you would use as a starting point other times maybe you have no clue this is where it certainly helps to understand the project itself along with the demographic you know who the audience is and what the product is about and what type of feelings and emotions that you want to elicit through color because there is something called color psychology alright so in that case I'm not going to be outlining that but just go to Google type in color psychology and you can understand that you know based on certain demographic certain areas that the world colors mean different things so that's real important that that should that could definitely help guide you in your decision so this tool again to press spacebar to generate a new color scheme we're just gonna assume we don't know what we want you know right off the bat but as we go we'll start locking these and based on the ones that we want to start with initially and then just keep on going so for right now I'm just kind of looking how now this would be an example of a a monochromatic color scheme they're all in just different shades of the same color which is purple and then some of these this is like pretty much every different color except with exception this area over here in their blues so again nothing is absolutely wrong with just checking these all out and of course the the color scheme that you pick doesn't have to be you know all the five colors don't have to match immediately so I'm just kind of going until I find something that's roughly there's something that you know I kind of like I actually kind of like this so okay when I'm talking about a a primary color it could be a color that's used predominantly throughout the UI or throughout the project that a copy whatever you're creating in this case we're specifically talking about websites and UI design and app design and all that stuff so a primary color is a color that potentially could be used up to I would say you know 60% of a given UI and sometimes you know that could that could possibly be white or they it could be black or it could be something that's a color but looking out how these all really well right off the bat contrasts with each other I'm starting to think about okay what it would be a good primary color here outside of maybe white or a very light like if you're using white as a background or something so I'm thinking it would either be this orange here or this right here and we can use both of these really if I drag these over here we'll just say you know these two I could be used in different areas of a UI to complement each other well and to you know just put out more color in a sense and I think I like them the we could make finer adjustments to these but in the end we're going to be making more adjustments to these color schemes as we design the UI so you know what you pick here or in any other app it's subject to change once you get in there and actually apply them to your particular project this dark this is called Davy's gray it's kind of ad saturated blue it looks like they're the saturations down the darkness is down yeah it's definitely a blue in there I actually kind of like it we have a pure white and I you know this could be something that's obviously used often especially I when it comes to like card based layouts where you have kind of an off-white background and then the the containers on top of them I are you know white I this cube do actually be used and be part of or a significant part of color scheme I think I want to do I'm going to change this one up a lot though and you could do this you could lock all these to say we like these so they're all locked up with exception to this one if we can keep just going over here although we don't have to do that because I have a pretty solid idea of what I want this particular colored color to be and this is kind of close already so if I adjust this real quick I'm thinking of taking the saturation up and the brightness up let's get more towards a yellow hue right here I actually like this and this could possibly be used for message containers I modal or model overlays and I think I like that so this right here I think we're gonna go with this and see how it all works out and this is the point where you know it's okay to screw up this process I'm sure this isn't going to be or they aren't going to be the final colors that I end up using so what I'll do now is hit export and I'm just gonna choose SVG because in Adobe experience design which is the app I'm using I can easily go ahead and import that so I'm gonna open that file up let's see here showing folder and then just drag it in well we'll put it here for now oops no we won't instead I'll just drag it off to the side all right and then what I'll do is create a new artboard so artboard tool let's put this like right here and this is just for our color scheme and then drag this down scale it down rather there we go and then all right cool and we're ready to rock so now we have our color scheme we can use the the dropper tool the eyedropper tool to to get it in there on our different parts of your UI so I made everything pretty much a symbol so that any changes I make here will wrap okay here this is just a secondary artboard to show you know like I what happens if there's like an error or something like what how that would be designed so let's get started with this basically we'll start with the background so you know what color do we want the background to be now again you don't have to use just these five colors I mean these are just starting points for you you know to get started with your UI design for me I want this to be a lighter UI that's one of the initial things you have stairs you know do you want to go for a darker UI where you have you know it's predominantly dark or you want to go with the opposite which is light for me I'm gonna go with light and so when I'm talking about light I'm talking about like the background the whole you know the the encompassing background of the webpage or the app so for me personally I wanted to go light so I maybe not absolutely white but off-white and I think this could this color right here could be it but it may not end up being very effective so here's what I'm gonna do I'm just gonna take the background and there we go now I'm gonna leave it there for now and we'll come back to it now I want to talk about this navbar section up here and what I want to do specifically is change this container color here right now there's just a border so I'll tick that off get that to 100% opacity and now we have some options we can make it this color for instance and that will provide with a lot of different contrast or high degree of contrast if we wanted to make the foreground elements lighter or we could choose one of these two colors like the primary or the secondary I think I will go with yeah we'll go with this one so now the foreground elements obviously they look terrible so let's take both of those and make them white all right so we're still sticking to the confines of our of our our palette up here though we don't absolutely have to so now we'll take a we'll just take our type elements oh I don't have to do that we just change it here in one place we'll make this for now we're just gonna make them black all right and then I make that black and then finally we make this black all right so now we'll take this this container right here and what we'll do is I'll double-click in there is will give it a fill and we're gonna make it white now our labels just got hidden so let me drag those up really quickly all right there we go all right so as you can see our background it does contrast a decent or you know a fair amount with I the background here but I'm not too sure I like it we can make some fine adjustments to this so you know using it or clicking it will come out here and you know maybe you want we don't want it just to uh to stick out that quite much maybe something roof air a little bit fairer like that so now we've changed it up and so this right here now becomes there so it's actually even less contrast now it's a little bit lighter and I just like it better in these two colors work well when this is the background this is a foreground element all right so now what would we do for a call-to-action well here's the thing I it's subjective I because what you could do is for this give it a background here we could just use this color again and make the foreground white real quick all right there's nothing really wrong with this this works it's just kind of like a two color pattern here we have a background where we have some yellow a little bit and then we also have this teal tough sort of color or what we could do is take this and use that alright and so either way it still works I probably would choose this just because it does bring more color and it will really set aside for the accent color which is what we're using here it will really help set aside in and really draw users eye into important areas like the call to actions all right and then finally over here we have this section where like there's a message notification you may not want to use white for that I mean you could I but you may want to really draw their their attention by using maybe the call to action text or something like the read or whatever so that people definitely see this you could also take this and introduce a a different color that would work well with the background but would also also contrast enough and make sense so what we could do is just get the background color and then we could experiment by maybe bringing this up slightly maybe a little bit more in a yellow area possibly and this is one of those things you have to you have to really be careful with it I like this I don't like because it's not working well with the background so you might want to zoom up and really experiment with you know changing the hue this kind of looks strange I don't like that at all you could do this actually go more towards the red this is a more standard pattern when it comes to you know if there's an error message maybe i lighten that up just a bit right around here and that could certainly work and so what you could do is just add another row here or column rather and this would be part of the color scheme me personally I would probably just leave it white all right and then just have a more thick area here to make this actually that's kind of a very thin icon is prob about the best one to use there but there you go that's one way to apply a color scheme and so the thing that to take away here is you know you you don't have to stick with this so what I mean by that is we could go entirely separate and and change this up by using different combinations all the same same color scheme so what I mean by that is let me I'm gonna save that and then we'll do save as and I will do project two here all right and then what we'll do is just I change this up quite a bit so for instance let's say you did want a darker color scheme let's see if I can pull this off we're probably gonna have to use and introduce different colors so what I'll do first is change the background to this one right here alright so that means that our foreground elements on top of it will need to change to white alright or something that's a higher contrasting if you're using dark and you use a light elements for this top area hmm I don't know I'll get to that in a second I want to change this background right here and for this we could grab the background and we'll bring it up a notch kind of like that now these elements right here do not look very good so let me change the board or we could probably possibly get away with getting rid of the border and then just choosing a color here and we could go lighter than the color itself so if I if I pick this one we could go up I'll take this and this and we don't absolutely have to go a hundred percent contrast by making them white we could pull this up maybe around there all right the background which was this color right here in the middle we could change this up to I mean we can go a little bit darker which I like so we'll come back here change this alright and then we could change this a little bit darker as well so come down here all right like that what works pretty good I would say and then then what we could do is I want this this call-to-action color our accent color to stand out even more so what we can do is increase the hue up here like that all right so we can again you can update this swatch if you want you don't have to and again this here change this here to white and this is something that yeah actually go ahead and make this bold normally you make this forgot a call-to-action color maybe this this blue up here and then you could also of course reverse everything so let's say you wanted this to be the call-to-action color well we can just take it and then choose this and then make your call-to-action color that right there and there you go completely acceptable in terms of or you know like I said you could just use a single color and it would still work in fact I kind of like this better having two colors where you're where they're kind of used equally in the context that we were using where one was like this is the orange and then this is the teal color they're used almost the same amount so sometimes that can create a little bit of conflict or inconsistency if you're going to use something like two or three colors together one needs to be predominantly used for it to make sense but in the end it's all about experimentation and so hopefully that kind of gives you some insight into how I approach applying color to projects alright so once again I hope you found that helpful and make sure to answer today's question which is when picking color schemes do you use a tool or do you pick them all by yourself alright see you guys soon make sure to subscribe see you later good bye [Music] [Music]

Channel: DesignCourse

Views: 73,979

Keywords: web design color palette, web color palette, color palette, picking colors, choosing colors, ui color palette, ui color scheme, color schemes, how to pick colors, picking colors for web design, web design, color psychology, choosing colors for website

Id: yibJDhrVlYk

Length: 20min 54sec (1254 seconds)

Published: Tue Sep 18 2018