Colors are one of the first things people notice when they open a website or mobile application.
Colors can change our moods and emotions and even influence us to make a purchase. Here is some basic information about color and how it works in user interface (UI) design.
The Effects of Color
The Institute for Color Research found that people decide whether or not they like a product within 90 seconds of first seeing it, and most of that decision is based entirely on color. Color is one of the first and most noticeable aspects of design and has long been used in advertising and displays to capture attention. This was going on long before the field of user interface design existed. The arrangement of fresh produce in a market is based on the emotional effects of color theory. Color helps users remember a product and recognize a brand.
Keep in mind, though, different cultures view colors differently. For example, western cultures use black to signify mourning, while eastern cultures tend to use white. Yellow means ‘danger’ in Europe, but danger signs are red in the US and green in Malaysia. You have to consider the context where the design will be used when looking at color.
Color Wheel
The color wheel is a tool used by artists and designers. It displays the primary, secondary, and tertiary colors in the shape of a wheel.
Primary
Red, blue, and yellow are called primary colors because they can’t be created by mixing two other colors.
Secondary
Orange, purple, and green are created from two primary colors.
Tertiary
You get magenta, vermillion, violet, teal, amber, and chartreuse by mixing a primary and a secondary color.
Color Depth
Color has other properties, too, depending upon the amount of black or white that is added to the color.
- Hue - pure color, includes primary and secondary colors
- Shade - the amount of black in a color darkens the color
- Tint - the amount of white in a color lightens the color
- Tone - both white and black added
Color Harmony
Just as in music, harmony refers to the way colors work together to create an effect. Contrast is when colors are located opposite each other on the color wheel, as in red and green or blue and orange. Consonance is when colors are similar to each other and work together, like yellow, red, and orange. Balance of color is important in UI design and often follows the 60-30-10 rule: 60 percent is one color, 30 percent is a secondary, complementary color, and 10 percent is a contrasting color used for calls to action (CTA) or warnings.
Color Models
There are two models of color. One is subtractive and the other additive.
Subtractive (CMYK)
The subtractive model is also known as CMYK, which stands for cyan, magenta, yellow, and black. This is the model used in physical printing and the colors are formed by subtraction of light. As light is subtracted, the colors get closer to black.
Additive (RGB)
The additive model is also called RGB, which stands for red, green, and blue. This is the model for all types of screens, so it is the one that UI Designers work with most of the time. The theory is that the more light you add, the closer the colors get to white.
HEX Codes
A further development of the RGB model for creating digitized colors are hex codes based on color values ranging from 0 (black) to 255 (white). Hex colors are created through a formula that takes three two-digit representations of color and translates them into a 6-symbol code. Hex color codes allow you to create up to 16 million distinct colors, which is more than the human eye can perceive. The codes allow you to create highly accurate and repeatable colors.
Color Palettes
All of this theory goes together to create one of the most important parts of UI design: color palettes. Palettes are collections of colors designers use to create a visually pleasing interface, maintain consistency, and transmit a brand. There are several types of color palettes based upon the location and relationship of the colors on the wheel.
Types of Palettes
- Monochromatic - Based on tones and shades of one color
- Analogous - Three colors next to each other on the color wheel like green, yellow, and red or red, purple, and blue.
- Complementary - Despite the name, the purpose of the complementary color palette is to create contrast. The colors are located opposite each other on the color wheel like orange and blue or red and green.
- Split-Complementary - Uses three colors, one focal color and then the two colors adjacent to its opposite. For example, if you chose red, the adjacent colors would be turquoise and green.
- Triadic - The triadic palette is built on three colors that are equidistant from each other on the color wheel.
- Tetradic - This model involves four colors located on the wheel as two sets of complementary pairs.
Color Psychology
Colors affect mood and feelings. Different colors have different meanings and this can influence human behavior, so color is very important to UI design. According to research on people’s reactions to color, these are some of the common color associations:
- Orange is a warm color. It is associated with creativity, joy, and affordability.
- Red is a warm color, and its associations are more powerful than orange. It is a color of warning and aggression, as well as love and passion. It also signals action, so it is often used for CTAs.
- Yellow is another warm color associated with positivity, happiness, and sunshine.
- Pink is a delicate color and has a connection to innocence and romance.
- Blue is a cool color and calls forth feelings of calm, confidence, and stability.
- Green is another cool color. It is associated with nature, growth, money and healing.
- Black is connected to authority and power. Some common associations are wealth, formality, mystery, and seriousness.
How to Learn UI Design
If you would like to learn how to use software like Adobe XD in order to switch to a career in UX or UI design, one of the best ways to do that is to sign up for classes. You can choose classes that meet in-person or online to learn XD, Photoshop, and Illustrator. Some people prefer to attend brick-and-mortar sessions when learning new information, but that isn’t always available. Live online classes have a similar set-up with a real-time, remote instructor who can answer questions and take control of your monitor—with permission—to show you how to do things. Training is part or full-time and available weekdays, weeknights, or weekends.
The best way to prepare for a career shift to a field like UX or UI design is to enroll in a bootcamp or certificate program. These are intensive training courses that run from a few weeks to a few months and another plus of training is that you will leave class with a professional-quality portfolio that you can show to prospective employers.
Conclusion
It’s easy to take UI design classes and start a new career. Choose between in-person sessions in NYC at Noble’s location or sign up for live online UI design courses and attend from anywhere. Find UI bootcamps in your area and get started in a new direction today.