Placeholder Image

字幕列表 影片播放

  • All right.

  • So welcome to the Teenage Mutant Ninja Turtle Guide to Color theory.

  • Bye, Louisa.

  • It's me.

  • Hi.

  • Um, I am the director of the front and engineering program at the Turing School of Software.

  • In design, we are a seven months, a seven month long developer training program based out of Denver.

  • Um, I'm we see be on Twitter on a little bit of background about me.

  • They're nice introduction, but I'm a little bit of background about me.

  • I've been a designer for about 12 years, and I switched over to focusing on code about five years ago.

  • Um, and I love color theory like, I think it's just a really interesting combination of, like, science and design and aesthetics and just like human factors, it's It's a really fun topic to talk about, and it's a really it's a really important.

  • It's an important topic because it could have a huge impact on your users.

  • Um, I'm also mostly from the big square states, and so I'm not really, like, used to all the humidity.

  • So that kind of means that this is my current hair situation.

  • Uh, yeah, so that's just missed a disclaimer that That's pretty much my Matt.

  • Um, and I'm qualified to speak about Color and the Teenage Mutant Ninja Turtles because I wanted to be one of them.

  • So you can trust me, even though is missing, like the four primary qualifications to be one of them, which is that you know, being a turtle on a teenager and a mutant in the ninja.

  • That's fine.

  • Um, so for this talk, we've got six sections.

  • We're gonna talk about color groups.

  • We're going to talk about color associations will be talking about the color wheel, will be talking about color combinations, will be talking about properties in terms because it got to be able to talk about it.

  • And we'll be talking about accessibility because it's important and you should worry about it.

  • So let's get started.

  • Let's do it.

  • So when we talk about color theory, you need to kind of start at the beginning.

  • You have to build your foundation, and that means we're gonna talk about color groups.

  • So there are essentially three big buckets that all colors fall into.

  • They are warm, cool and neutral, so let's dig into it.

  • Let's talk about a little bit so warm colors are going to be sort of like your reds through you're through your yellows, and these air generally thought to be very positive and energetic.

  • So these air colors, like colors in this group, tend to have actually been shown to have a physical effect on people.

  • They can raise your blood pressure.

  • They couldn't increase your respiration.

  • Um, they can even enhance your metabolism.

  • And so if you think about the kinds of brands that often use colors in this in this in this color group, they're often trying to communicate like fun or playfulness or in like the case of like McDonald's.

  • They're trying to like one, encourage youto want, eat more and then also kind of move you through the store faster so they can, you know, sell more high quality hamburgers.

  • Um, then we have the cool color groups again.

  • Colors in this group are kind of like, basically the opposite of our warm color groups.

  • So they're going to be a little bit calmer, a little bit more soothing, a little more relaxing.

  • Um, you get like your greens, your blues and like your purples in this range, um, colors in this group are often associated with stability and composure.

  • And again, if you think about the types of brands that are using these colors, they're often they're often trying to like really encourage you to trust them so you'll see a lot of like banks and hospitals and insurance companies that tend to have their branding skewing a little bit more towards the cool side of the color spectrum.

  • Um, then we have neutral colors.

  • Thes can, you know, sort of skew either KD warm or cool, depending on the specific blend of the color.

  • So if you'll see these, these top three colors are a little bit cooler and then the bottom three color bottom, too I can count.

  • It's fine.

  • The bottom two colors are a little bit warmer, and so it's kind of so neutrals.

  • Our offense, basically they're used most often is like the base or foundation of your color palette, and then a warmer, a cool tone might be pulled in as an accent color.

  • Um, so our final color, our group that I'm gonna be talking about.

  • It's a non color group, but we're gonna talk about mutants a little bit.

  • So, um, they tend to also have, you know, fairly specific uses in the use cases.

  • You'll see the minute is generally pretty pretty focused.

  • So getting about like the X men or Godzilla or the turtles, um, they have they're very specific use cases on, and they also have very strong cultural associations, which leads us to color associations.

  • So whether we realize it or not, um, colors have very, very strong associations built into them.

  • So if you pick a color that your users don't like, they're going to be, like, pushed away from using your side or using your products simply because the way have so we have such strong connection to color, and we have relate to it so intensely that it can.

  • It can actually, like, push people away.

  • So, um, and what with these with these meanings that we have about colors can be every subjective so they can change, or very based on the communities or the cultures that we grew up in.

  • Um, so eso some colors can have very have one specific meaning and one culture in a very different meaning in another culture.

  • So if you think about the color white in most Western cultures, it's associated with, like purity and cleanliness and maybe, like a fresh start, a new beginning and then in other cultures and some Eastern cultures, it is associated with death, and it's often like the color that is worn if funerals, it's like a color associated with morning.

  • Um, so you know, you can have these two things one color, but two pretty, pretty, vastly different meanings associated with it.

  • So it's important to understand.

  • I understand that the associations that are bound to a specific color as you're applying it to your product or or your team.

  • Um, so when we're talking about color associations, red is a color that has some of the strongest associations bound to it.

  • It can be very polarizing.

  • It's very passionate color.

  • Um, it can be associated with love, and it can also be associated with like like the devil rights with the very pullers and color.

  • If you think about the turtles, we have wrath like good old Rafael, Good old raft on.

  • But if we think about him, he is very strongly bound to these cultural associations that we have with rent.

  • So red is this very passionate color, and so is Rafael.

  • He's like the hot head of the group, right?

  • So he's He's a little movie moody.

  • He's kind of a Jersey boy.

  • He gets a little sassy sometimes, Um, and he's just this very like, intense character and has a lot of feelings sometimes, like when he's when he's happy.

  • He's really happy when he's angry.

  • He's very mad.

  • And so we think about some of these big sort of terms that are often associated with.

  • We have, like determination.

  • We have anger.

  • Rafael gets a little bit angry.

  • Sometimes He's a very intense character, which are all things that are bound to read really intensely.

  • Um, if we think about orange or just if you still get some of that like intensity and that energy from red.

  • But it's a little bit softened up the little tone down if we think about it a little bit more playful, whereas Red could be very intense and very like passionate oranges is more playful in a little bit more goofy and a little bit more lighthearted.

  • So if you think about the turtles, have Mikey Michelangelo.

  • So he's like the goofball of the group, right?

  • So he's gonna be a little bit more fun, a little bit easy going.

  • He's still very like active and engaging, but he's not the same level of intensity.

  • Is, is Rafael.

  • Um, So again, if we think about how we might see orange applied in like the real world, you'll often see it applied to like Children's toys, like things that you really want to just imply that you're having fun now, like you're having a good time.

  • Um, then if we get in tow, blues were kind of hoping back over to the cool side of the color groups so blue.

  • It is a very, very centered, very centered and calming color.

  • And with the turtles again, we have Leonardo.

  • So Leonardo is like the leader of the group.

  • He's like the grounding force of the Turtles.

  • He's a very calm, very level headed.

  • He is able to sort of, like, read a situation and act appropriately.

  • He's not going to just act out of instinct or just because he's upset like Rafael will.

  • He is very much like this grounding force of the turtles.

  • He's like the leader of the group.

  • He's also incredibly focused and dedicated to the team as a whole.

  • So these are all again things that we see reflected in the color blue.

  • I'm there like people of Lou's, associated with loyalty and intelligence and confidence.

  • And these are all things that reflected in Leonardo.

  • Then we have purple, and purple is a really interesting color, So the history of purple is pretty cool.

  • So it was.

  • Historically, it's been really hard to access.

  • The dye to make purple was very expensive.

  • It was really hard to get, and so the people who had it or had access to it, Um, we're often people that were in sort of like either like monarchies or like the clergy.

  • So there were there were people who had access to money, and that meant that they were often more educated than the rest of the population.

  • Which meant that Purple is often associated with, like wisdom and creativity and like dignity.

  • And then if we think of the turtles again, we have Donatello, and he's like the engineer of the group is the problem solver.

  • He's always like he's very like studios, and he's industrious.

  • He's still a little bit like you get a little goofy still, but like he's the one who's like he's the problem solver.

  • So he sort of really aligns with the sort of historical associations that we have with purple.

  • And we have neutral and again neutrals like the background that all of these other brighter, bolder colors can sort of rest on.

  • Top of it is very centered.

  • It's very calming.

  • And then, of course, we have splinter, So splinters, like the grounding force of the turtles.

  • He is like the like, consistent background on like the turtles are like little accent colors, that he is like supporting and working with him.

  • So he's laying this like, really solid foundation for them to kind of be themselves and grew into their own.

  • It's great.

  • Um, so now that we know these big buckets about cultic, all colors fall into, we can talk about the color wheel.

  • So auras I've heard it described the pizza of color.

  • Um, so now the weekend we can start to talk about like the relationships between colors and so the color.

  • The color wheel essentially lets us understand the purity of colors and then also how they're created.

  • So it helps us understand a little bit more of like the Navy greedy behind what's going on behind the scenes.

  • So we start off with primary colors, so primary colors are pure colors, so these are gonna be red, blue and yellow.

  • So all colors come from primary colors.

  • You cannot blend other two colors together to create a primary color.

  • They're like they're like your source of truth when it comes to colors, um, so that they are out there, the base for all other colors I'll call all other colors are made from combining red, blue and yellow.

  • Um, and we talked about the turtles.

  • We got Leonardo and Raphael.

  • So again we have this hot, cool dynamics.

  • We have been like Leonardo's in the cool color group Rafael's in the warm color group.

  • They are the most intense, like, passionate colors that we have the personality types, their personalities are the most like, intensive, like pure.

  • They butt heads a little bit more there, they can kind of like, uh, get each other going a little bit, but they also can't, like balance each other out.

  • So if Rafael gets really wound up, Leo is going to be there to, like, bring him back down a little bit kind of calm him down.

  • So they you get you get this hot, cool dynamic.

  • But they really they balance each other really effectively and really well, and we have secondary colors, so secondary colors are created by blending and equal amounts to primary colors.

  • So you take like, um, like red and yellow blended together is gonna be orange.

  • Essentially, you can just take these two colors to primary Coast and blend them together equal amounts, and you end up with a secondary color.

  • Um, and then when you come to the turtles again, we have Donatello and Michelangelo.

  • So we still have that hot, cool dynamic like Mikey, Mikey's little bit goofy.

  • He's like the party guy.

  • And then Donna toes a little bit more studios and a little bit more focused.

  • Um, but they don't really butt head the same way that Raphael and Leonardo do because their secondary color so their personalities air a little bit toned down there, a little bit less intense.

  • But there's still these really bold, punchy colors that are still very like, very opinionated and have a lot of opinions about things.

  • Uh, so now that we understand, uh, some of how colored where colors come from.

  • We understand a little bit of, like, the basics of the color.

  • Well, we can start to talk about combining colors because, as we all know, uh, making a color palette can be a little bit overwhelming.

  • It can sometimes seem like it's not gonna be that big a deal.

  • And then it just turns into, like like a vacuum of sadness, trying to find, like, a nice color palette.

  • It can be hard.

  • So we're going to talk about some basics strategies for kind of like help you think about approaching color palettes and where to get started on how to get a roll with that.

  • So to get started, we were on the color wheel.

  • We have the first sort of most simple type of color combinations, a complimentary color combination.

  • And this is two colors.

  • That's it directly across the color wheel from each other.

  • And they, um so you're gonna end up with a very high contrast pairing, like in this example, we have the sort of like a rich purple and on the bright yellow, so they're gonna be very high contrast, which means you're going to get there gonna be?

  • You'll have a pretty high, pretty, pretty great difference in involved of value.

  • So the lightness and darkness of color.

  • Um, but that doesn't They don't always look super nice because they're so high.

  • Contrast.

  • So when you actually like but thumb up against each other that that boundary edge between them might actually have a little bit of visual vibrations.

  • So that line between the two actually might kind of vibrate a little bit.

  • I might not be super nice.

  • Um, so to kind of get around that we have this concept of a split complimentary color so split complimentary is basically you take a complimentary color combination and then one of them you go up a ticker down a tick on the color wheel to kind of soften that combination just a little bit.

  • So it's a little bit less, a little bit less high.

  • Contrast, a little bit softer.

  • You'll see a lot of sports teams are like leveraging split, complimentary color combinations because they're bright and punchy, but they're not necessarily like, um, they don't Mrs.

  • You're like fight Too bad.

  • Like when you actually look a little like fight too much.

  • Then we have this concept of triads, so try head is essentially you take a triangle and you drop it on the color wheel and you end up with a really equally distributed a combination of colors.

  • And again you get a really vibrant right combo without having you kind of you can either get, um, a couple of cool colors and a warm color or a couple of cool colors in a warm coat.

  • It just it breaks it up really nicely.

  • And you get it.

  • You get a nice range of tones.

  • Um, then we have a two tragic color combination.

  • This is when you take a rectangle and you drop that on the color wheel.

  • Um, and that means that you end up with the turtles on, and this is the closest I get to conspiracy theories.

  • So we've got So we have.

  • We have the turtles here.

  • And what may have seemed like an arbitrary combination of colors just picked out of a hat willy nilly is actually very intentional.

  • So we can see that we've got this very, equally equally balanced, very carefully crafted combination of colors that gives us is very soft.

  • Uh, that's off but a very like, balanced color combination in a really nice mix of hot, cool and then very aggressive and slightly softer combinations and relationships between colors and characters.

  • So there's a lot of contrast, but there's not necessarily conflict.

  • Mmm.

  • So now?

  • So now that we have now that we kind of understand the color wheel, we understand how you have to start making some color combinations.

  • Now we're gonna talk about color property.

  • So this is essentially going to give us the vocabulary to be able to speak about color a little bit more effectively.

  • So we kind of So when we're when we're working with it, we can we can speak a little bit better to do it.

  • We can explain it to our teams a little bit more effectively.

  • Um, and it also just makes you, like, really fun at parties.

  • Should disturb you like a grandma.

  • Guess what?

  • Um, it's really good for holiday gatherings.

  • Pro tips.

  • So, um, so we're gonna talk about this.

  • Let's dive right in.

  • So, first we're gonna talk about Hugh.

  • So Hugh is essentially it's almost like a synonym for color.

  • It is like a pure color.

  • So these air going to be so something that could be considered a few is essentially like the colors that you might find in a like an eight pack of crayons.

  • So the colors that have a name so you could say like like red or blue or green, the colors that you can really kind of You can identify a name with the word those are often, um, those are often referred to as Hughes uh, so cool.

  • Then we have value.

  • And so value describes the lightness or darkness of a color, and it has to do with how much light that color is allowing to reflect back into your eye.

  • So if we have a really dark color, are that is going to have a low value, that means that it is absorbing more light than it is reflecting back to you.

  • And then if we have a a high value, that means that it's a light color, which is reflecting more light back into your eye than it is like absorbing away from you.

  • So in this example, we have this really sort of deep purple that is a low value, and then this really bright yellow that is a high value.

  • So we have Hugh, which is gonna be the pure appear tone appear color, and then we have value, which is the lightness or darkness of a color.

  • Then we have tone, so tones are made by mixing a pure color with a neutral er grayscale color.

  • And for this for this talk, we're going to do that.

  • I'm just gonna use white on black.

  • Um, so essentially a tone will be a little bit softer than the original color.

  • So it essentially kind of creates a range of a range within ah color.

  • So So if you have, like, created a complimentary color combination and you're like this is a little too intense, you could start to work with tones to kind of soften one of those colors a little bit.

  • So, uh, so tone would be just like the pure pure to the pure color, and then within their we have tents.

  • So a tent would be if you added white to a color.

  • So you had a arrange going towards to towards a lighter color, and then a shade would be if you added black and you went down towards a really dark color.

  • So then we have saturation, so saturation defines the range of purity of a color, and this is pretty interesting.

  • So you go from having 100% saturated.

  • So this very, very bright, bold sort of yellowy green color here, then you have 0% saturated, which becomes this gray.

  • And, um, one thing that's kind of interesting is that a A completely de saturated color.

  • While it is great, it's actually like tonal, so appears, really, This is a great way to find a neutral color palette that works with an accent color.

  • So if you're looking to find, if you want if you like.

  • If you have a warm color or a cool color that you really want to use, your your bright, punchy accent color on and then you wanna have a neutral background for that de saturating one of that bad accent color to that total grand, then finding like a range of tones within that Colonel Drake is a really great way to build out that that background, because it's gonna it's gonna work really effectively with that really bright, punchy, super saturated color.

  • Um, and since we're speaking about tunnel gray, total Grey's actually pretty interesting.

  • So when you're when you're actually painting the way you get total graves, you can take two colors that are on equal.

  • So total barrier, like just to de saturated color.

  • When you're painting, you take two colors that are on opposite sides of the color wheel and you blend them in equal amounts.

  • And eventually you get to this total grade.

  • So essentially the way you get to that great colors.

  • By combining all these elements by these these colors together.

  • And then you end up with this told Ray that will work really effectively with either color that you started from.

  • And so when we bring it back to the turtles, splinter is your total great.

  • So So if we think about this, he's like it.

  • The center that he's at the core of the turtles.

  • He is unequal combination of all of his students, right?

  • So he is.

  • He's at the center of them.

  • If you combined any one of them in equal amounts, you're gonna hit Splinter cause he's at the core of their being.

  • He raised them from tiny radioactive babies.

  • So So Splinter is essentially the total grey of the turtles.

  • All right, so No.

  • So now that we know we have a vocabulary, we can speak about Kohler.

  • We understand the color real.

  • Now we're gonna talk about some accessibility strategies because it's important.

  • And we need to like, as it was mentioned earlier this morning, like there is a large percentage of the population that has a color vision deficiency.

  • So that's about it's about 4.5% of the population in the U.

  • S.

  • That's like 13 million people.

  • That's a lot.

  • That's a lot of humans.

  • Um, so what's important, one of that?

  • One of the most sort of straightforward ways to help to help avoid cutting problems or struggles for your for your users who are some have some amount of color blindness is to not rely exclusively on Keller to deliver a message to your users.

  • So, as an example, let's talk about forms who doesn't love a good form?

  • Super nice.

  • So if we look at this example, we have, we're using red and green to show an error message like this worm hasn't successfully been submitted, and we're using red and green to show which field was problematic.

  • Um, cool like red green.

  • That makes sense.

  • Like green a success.

  • Read his error.

  • Ah, if you can see if you can life if you have, like, full color vision that works.

  • Great.

  • That's awesome.

  • Um, what's not awesome is that the most common form of color blindness is red green color blindness.

  • So what, You're essentially doing it.

  • This is your approach to this?

  • Is that you are setting up, Not You're setting up a pretty significant portion of your years, their base to fail.

  • So I put I put this form through Ah, red green color red vein color vision deficiency simulator here.

  • And now we can see that it completely falls down like this didn't submit.

  • I have no idea what happened.

  • Like I don't know what I did.

  • I don't know what I didn't do.

  • I'm not sure what's happening, and I don't know how to fix it.

  • So if I was a user and be super upset, I'd be well, depending what I was trying to do for a start.

  • Like submit my taxes, I'd be really upset.

  • But, um, you know what you are.

  • We're not helping them.

  • We're making it harder for them.

  • So again.

  • The solution to this is to not rely solely on colors.

  • So we can combine color with other visual communication tools to allow us to be more effective and to be more effective with communicating to our users.

  • So in this in this example, where you essentially using the same form we've made Ah, slight adjustment.

  • We're still using red and green on the around the inputs toe dictate what wouldn't Well, which inputs failed.

  • But now we've added icons and we've added an error message.

  • So we are communicating.

  • We're like, we're using our words to explain where you just what's going on.

  • And we're also using some pretty straightforward, um, icons.

  • I forgot the word for icon.

  • So we're using some pretty some pretty pretty like clear icons.

  • They may not be like as we as we mentioned again earlier this morning, like universal icons aren't really a thing.

  • But if you keep them simple like this Is this this combined with with an error message and some some sort of like visual other visual cues?

  • This is this is this will work.

  • So now when we put this through a color vision deficiency simulator, um, now we see that this still holds up.

  • I can still figure out what's going on and what I need to fix to make this form go so essentially like this is a great example of using color to highlight and compliment what's already on the page.

  • So we already have icons.

  • We already have an error message we're using.

  • We're not relying on color to be the primary delivery method of this message.

  • We're using it to complement that.

  • So if you bring it back to the turtles, um, so we take a look at these guys and like we are, really, So far, we've been just completely relying on colored until these guys apart.

  • But really, if you think about it, they all kind of look the same, like they don't have noses you can't really see.

  • They don't have different like they just they look very similar.

  • But what we can what we how we can tell them apart is with their weapons.

  • So if I put I put the turtles, they're a color vision deficiency simulator.

  • And so now you still know exactly who's who, because they all have very different and distinct weapons.

  • So again, like we're not relying solely on color to communicate which turtle is which were just complimenting what's already on the page or the, you know, the reptile.

  • And so So now we're communicating more effectively, and we've essentially we've just made the turtles accessible.

  • We did it.

  • All right, So, to sum up, um, we covered six parts and they covered colors and conspiracy theories.

  • Um, my research and references were pretty much exclusively being a kid in the nineties on Britisher Nailed it, Yeah.

All right.

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

B1 中級

忍者龜的色彩理論指南--路易莎-巴雷特|JSConf Hawaii 2019t。 (The Teenage Mutant Ninja Turtle Guide to Color Theory - Louisa Barret | JSConf Hawaii 2019t)

  • 2 0
    林宜悉 發佈於 2021 年 01 月 14 日
影片單字