The viewer will explore the power of color and how choosing the right color can set the mood of website.
- [Instructor] The first of the eight elements that we'll explore is color. In graphic and web design, we really must consider the colors used in a design to set the right mood and to convey a deliberate feel or emotion that supports the information within the design. Before we get too far into the concept of choosing colors to set a mood, let's take a look at the color wheel for a quick review of color. The three primary colors are red, blue, and yellow.
And the three secondary colors are orange, green, and violet. The secondary colors are created by combining two adjacent primary colors. So for example, yellow and red equals orange. Yellow and blue equals green. And blue and red equal violet. Now, if you combine a primary color with a secondary color, you get what's called a tertiary color. For instance, yellow and green create yellow-green.
And violet plus red create violet-red. So here's a good design question for you. What happens when you add white to a color? Well, you get what's called a tint. The more white you add to a color, the lighter the tint. Similarly, when you add black to a color, you get what's called a shade. The more black you add, the darker the shade. Here's a look at the complete color wheel with all of the primary, secondary, and tertiary colors, along with each of their tints and shades.
So now that you see how all of these pieces fit together, we can talk about color harmonies, which are combinations of colors that people tend to find aesthetically pleasing. The easiest color harmony to understand is what we call monochromatic color, which represents a single color and all of its iterations from white to black, kind of like this. Next, is complementary colors, which represent a pair of colors at opposite ends of the color wheel, such as red and green, or violet-red and green-yellow.
Split complementary color harmonies are created when you select a main color, like yellow-orange, and then choose two colors on either side of that first color's complement, such as yellow-green and green-blue. Analogous colors, or adjacent colors, are created when you pair any two or more colors that are right next to each other on the color wheel. Then, there's triads. Triads are any three colors that are equally distant on the color wheel, like red, green, and blue.
So let's get back to color, as an element of design, and talk about why it's useful for your designs. When you use color deliberately, it can help you set the mood or feel of your design. And if you think about it, you probably already have natural associations with particular colors. For example, red makes us think of passion, orange is energy, yellow is happiness, green represents harmony, and blue brings a sense of calmness. For many people, violet is the color of luxury, and black is used for power, white for purity, and brown for friendliness.
And there's lots of other interpretations for these words and image associations that the colors conjure up in your mind. And these colors can actually be quite distinctive in different countries around the world. Some industries tend to use the same colors to represent their brands and promote their products and services to their target audiences. So for instance, many bakeries and cupcake shops use pink and brown color schemes, while most legal practices and banks tend to favor a more conservative, dark navy blue, red, maroon, silver and gold color palette.
Spas are another really great example of when choosing the right color can really help communicate a desired mood to potential customers. Here's a mock layup of a spa website with a dominant red color palette. Not the most relaxing or appropriate colors for this site, wouldn't you agree? What would work better is a more neutral or monochromatic color scheme that is soothing, inviting, and relaxing, evocative of how you'd feel during and after your treatment at the spa.
So let me show you what some other color schemes might look like. So here's a neutral palette. It definitely looks better than the red, but it's kinda boring and bland and maybe a little personality-less. Then we could try green. Green is getting closer to the right vibe, but this hue is still not quite right, a little too vibrant. A blue theme work evokes thoughts of clean, calming water, but it might be too obvious of a color choice and maybe still a little too bright. We could try an aqua.
For the aqua, use a little bit greener blue. It still seems friendly and calming, but still maybe too energetic for a spa. So what about something like a pink? With a pink it could be a good choice, especially if their clientele is primarily female. But, you know, maybe if you want to have a spa that caters to both men and women, this would be too feminine and be off-putting to the male customers. So the last thing was the original, which is really neutral. We can combine a little bit of white, a little bit of blue, a little bit of gray, a little bit of tan, and create a soothing, calming effect that's professional, inviting, and relaxing.
When choosing colors for your web layouts, think about which colors will best represent the product or service you're designing for and which colors will appeal most to the site's target audience. Think about the mood you want to project, and refer to the color wheel to ensure that you choose color harmonies that are tried and true.
- Understanding aesthetics
- Picking harmonious colors
- Structuring your layout
- Using space to organize your design
- Communicating with the right fonts
- Aligning objects to achieve balance
- Adding movement with scrolling and animation
- Achieving proportion by scaling objects and text
- Creating CSS for different devices