How to Use Color in UI Design (UI Principles Series)

everyone welcome back to the ui principles series in the last video we talked about how to apply white space in ui design in today's video we're going to take a deep dive into color color theory and ui design and if this is your first time thanks for tuning in my name is brendan i'm a product designer here in los angeles the first thing that we're gonna do in this video is to find color and color theory then we're gonna take a look at the seven elements of color after that we're gonna take a look at color psychology the golden ratio and the color rules and ui design then we're going to talk about choosing colors and color palettes or color schemes lastly i'm going to be giving you some resources and we're going to go through three exercises that way we really hone in on learning these concepts i hope you're ready to learn let's get into the video alright so let's first start off by defining color and color theory so color color refers to the different colors of each element within the interface it is used to evoke feeling or emotion now let's define color theory it is both an art and a science of using color it explains how humans perceive color and the visual effects of how colors mix match or contrast with each other color theory also involves the messages colors communicate and the methods used to replicate color and lastly there are several elements of color i have seven here these elements include hue chroma value saturation tones tints and shades so now we're going to take a deep dive into these elements so first is hue and hue is the base color of the pure pigment of that color at a base level aka the colors of the rainbow i pulled the hue color from figma that you can see here below you'll use the hue scale in order to create the hue now chroma refers to the purity of a color chroma can be thought of as the brightness of a color in comparison to white so in order to apply chroma what you'll do is you'll tweak values from left to right when you're using this scale so in order to give it brightness you'll obviously want to tweak it up and to the left now with value it refers to how light or dark a color is so lighter colors have a higher value in order to do that you have to tweak values from top to bottom so from here you start at the top or start at the bottom as we mentioned if you were to go lighter then you would go upwards on the scale and that would be a lighter value all right so now let's talk about saturation saturation refers to how strong or weak a color is so a high saturation is strong so when you're trying to apply saturation what you would do is go from top right to bottom left in this scale but this kind of gives you a quick summary of what that would look like low saturation being on the left high saturation being on the right now let's talk about tones tones are created when gray is added to a hue so generally it's duller or softer than looking at pure hues so in order to apply tone you want to move from right to left or left to right in this case you would be moving probably realistically more left to right obviously you can see the gray is on the left side of the scale so now let's talk about tints so in order to add tint you're just adding white to the color so you're moving up into the left so as you can see white would be at the very top left is fff and then if you want to still keep the red in this instance you would just move a little bit over to the right now let's talk about shades so shades is created when black is added to a hue making it darker so it's basically the opposite of tint you would add colors in the bottom left to the hue as you can see actually in this example now let's talk about color psychology so what is color psychology it's the study of how colors determine human emotions and behaviors we react to colors based on a complex series of interactions between personal tastes family upbringing and our cultural background now let's talk about the meaning of different colors so every color is associated with different emotions using colors wisely can improve user experience and increase desired behavior including conversion rates in significant ways the last thing you should know is that testing designs with real users is such a vital part of creating a color palette and choosing colors for your designs so basically what i'm trying to say here is don't just settle on the first color palette that you choose you want to test it and actually the company that i work at right now we're doing this we're creating a new color palette and trying to test this with users so that's something i'm applying right now here are two examples of images that you can find online where it talks about how different colors associate with different meanings or words or emotions so as you can see here with red some examples on the left are excitement strength love and energy and then there's additional ones here so stimulation or stimulating bold vital and courageous another one we can look at is purple so royalty luxury spirituality ambition and then if you look over here it's wise creative and imaginative so so keeping these things in mind are important i would say do some additional research if you're going to be adding a color palette and it's going to be more global because as i mentioned there are cultural differences and you want to be able to look those up i didn't include that here in this presentation because really there's just too much to go over but i would do additional research on that all right now let's talk about the golden ratio you've probably heard of it you may not know what it means the golden ratio is the number used when two quantities are divided in a way that the ratio is the same as the ratio of the sum to the large one of the two quantities that number is 1.618 also fee as you can see here on the left this is what the golden ratio actually looks like now that may have sounded really complicated but it's fairly simple to apply so all you have to do is simply multiply an element size by 1.618 to figure out the size of another element or overlay the golden spiral to adjust their placement you can use the golden ratio to guide in your layouts typography imagery and more so let's talk about applying the golden ratio to typography so first you got to decide the order of importance of the various typography elements within the design so let's say for example you have three font elements that you're using we'll call it a b and c let's say that c is set at a 10 point font what you will do is multiply that by 1.68 to get a rough guide for the larger sized elements now for images you'll overlay the spiral on the images to see which elements sit where and if they really do create harmony using the golden spiral you're ultimately working out where focal points need to be and how to centralize a headline or for maximum impact or which elements need to be shifted to give the design more energy now let's talk about layout so when you're challenged with a bunch of different elements in a layout when you lay out the golden spiral it will actually help to guide the placement of each element we're naturally drawn to the center of the spiral so it's often best to place your most important messages there now let's look at some examples of the golden ratio so this first one here on the left what you can see is the golden ratio doesn't have to be in the exact same format as you saw here so you can adjust it to fit the design basically meaning you can flip it vertically or horizontally in the middle here you can also see it works for mobile designs there is a slight tint of orange over the design but you can generally see that the most important information is where the spiral is tightly bound and the lastly is an example of coursera here if you guys have never used corsair i'd highly recommend it you can take great courses there but what they did is they centered their text and the join for free button in the spiral that way people are looking at the most important information when they get to the site and that's where our eyes naturally go okay now let's talk about the eight color rules in ui design so the first rule is branding colors you want to keep your core colors to one or two that way people can associate you your colors with your product or service the second is functional these are the colors that make up your architecture of your ui so for example your navbar modals text and links the third is feedback and usually these you use these colors to indicate the state of an action so for example you can use it as a success or fail banner so let's say they upload an image on your site you would put up a success or failure banner that way you give them feedback as to whether the task was completed the next one is accent so these colors are used to highlight copy metrics are important information the other four are neutral interactions contrast and colorblind so for neutral these are the bookends of your color palette usually what you can do is take one of the main colors of your color palette and then give it a little bit of brightness or give it a little bit of darkness and that creates an additional neutral color for your color palette so for interactions these are the states of symbols or elements in your design system that have multiple colors so so for example like buttons like a hover state or you know a resting state or an active state right so these are all the different states that you can have or the different symbols that you can have for interactions next is contrast and i put in parentheses this is up next because this is actually the next ui principle we're going to be covering but what contrast does it ensures your colors visuals and typography worked hand in hand together the next one is colorblind so there are eight types of color blindness make sure that you follow accessibility guidelines i'm going to be giving you guys resources so we're not going to be going into colorblindness in this video but we will probably go over it in a later video now let's look at three things to consider when choosing colors first is the 60 30 10 rule in order to bring balance into the composition the colors should be combined in the proportion of 60 30 and 10. what does that mean well the biggest part should go to the dominant hue then the third of the composition takes the secondary color and the 10 will go to that of usually like accent colors and then the second thing to consider is to strive for color harmony color harmony is about the arrangement of the colors and design in the most attractive and effective way for the user's perception and lastly i'm just going to reiterate consider the psychology of colors because each color has its own influence on our mind and the knowledge of the possible reactions that can transfer the right message and call users to make the expected action that they would like them to do now let's talk about color palettes first let's define what a color palette is it's a combination of colors used by ui designers when designing an interface and when used correctly color palettes form the visual foundation of your brand they help maintain consistency and make your user interface aesthetically pleasing and enjoyable to use there are different types of color schemes that you can follow in order to initially create your color palette just to make it a little easier on you the various types that we're going to be looking at are monochromatic analogous complementary split complementary triadic and tetratic so first let's take a look at monochromatic and analogous some monochromatic color schemes are made up with different tones shades and tints with a specific hue in this case it looks like it's a purplish pink now analogous is using three colors that are next to each other on the 12 spoke color wheel which you can simply just search 12 spoke color wheel and you'll be able to see this traditionally analogous color schemes all have the same chroma level but by using tones shades and tints we add interest to the schemes and adapt them to our needs for designing websites or designing a user interface complementary this is created by combining colors from opposite sides of the color wheel in their most basic form these schemes consist of only two colors but can easily be expanded using tones tension shades so as you see here below we have a basically like a yellow and a purple now let's talk about split complementary in this scheme instead of using colors that are opposites you use colors on either side of the hue or opposite of your base u so it's actually pretty similar to the one on the left and a few of the ones that we've gone over as far as the colors that they chose so there's like a pink there's a purple and a green here and lastly let's look at triadic so triadic schemes are made up of hues equally spaced around the 12 spoke color wheel so what we have here is like a blue and a pink and like a yellow and next is tetratic which is the richest of all the schemes because it's using four colors arranged in two complementary color pairs this is probably the most complex one to create but you can do research to find some good examples out there and then that'll get you started so and here are some resources to get those color palettes started coolers is my favorite probably color hunt is my second favorite and i thought color drop was another really good one but you could just search color palette generator on google and there's going to be tons of options out there all right so let's practice what we've learned we just went over a ton of information we're going to be doing three different exercises the first one we're going to do is apply the golden ratio to a hero section then what we're going to do is select a color palette and lastly we're going to be applying that color palette so let's go ahead and get started so if you go to the google drive link in the description you're going to see these assets that are on the screen these are the elements that you're going to be using to put into the desktop artboard on the left in order to create golden ratio so i'm going to give you a few minutes to work on this and then when we get back together i'm going to show you how i did it realistically there's probably only one or two ways to do it but feel free to be creative let's see what you come up with all right great job now i'm going to show you mine so this is how i use the golden ratio i had the three images below which aren't that important but they still add some design elements to the page and obviously you have your elements on the top left and the top right which are your your logo your menu items and then your you know login button and so the golden ratio is meant to specifically focus on the illustration that we added here but secondly the text on the left side could be used and realistically what you could have done is flipped this to be uh the opposite way so that you would be focusing on the left hand side which maybe is the most important part of the design so this is one of the other options you could have gone with so now what you're going to do in the second exercise is pick a color palette that you want to introduce to that hero section you can use whichever color palette tool you're familiar with or comfortable with but go ahead and choose a color palette and the third exercise what we're going to do is apply that color palette to that hero section so go ahead and choose your color palette and we'll sync up here in a second all right now you should have chosen your color palette i have mine here on the right now what you're going to do is add the color palette that you should have on your artboard to the main hero section i'm not going to be doing it but i want you guys to take a shot at it and after you're done adding the color palette we're going to sync up here and go over some final resources for you to look over that way you can just continue learning on different categories within color alright you guys did a great job we're going to go over a couple final resources these are going to be in the description and you're going to be able to learn topics like color mixing color wheel basics colors by culture golden ratio and color blindness i didn't cover these because there's just so much to go over with color theory but a lot of great resources here if you guys found value from this video please give it a like make sure to subscribe so you can stay in the know for all the other ui principles that we're going to be covering and i'll see you guys in the next one [Music] you

Channel: Brendan Colarusso

Views: 8,883

Keywords: UI, User Interface, User Interface Design, UI Design, Product Design, UI Principles, User Interface Design Principles, Design Principles, UI Fundamentals, UI Design Fundamentals, User Interface Fundamentals, User Interface Design Fundamentals, Product Design Principles, Color, Color Theory, Golden Ratio in Design, Color Psychology, Color Palette

Id: IlJo7c3J2Io

Length: 16min 0sec (960 seconds)

Published: Sun Jul 26 2020