Color is one of the most important aspects of user interface (UI) design, so learning how to use it effectively in web and mobile app design is crucial. fewer is more when it comes to colors and contrast is important. Here are some ideas for how to use color successfully.
Stick to a Few Colors
Color is one of those areas where it is easy to overdo it. One of the main goals of using color in UI design is to create harmony. When too many colors are included in a design, it becomes confusing and overwhelming. Choose two or three colors for designs. You can use one color as the main focus for the design and the other two as accents. One way to handle this is 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.
Choose a Color Palette
Color palettes are groups of colors that work well together based on a model called the color wheel. The color wheel is a circular arrangement of primary, secondary, and tertiary colors that shows relationships between them. Groups of colors that work well together are called palettes and there are several types.
- Monochromatic—This is based on tones and shades of one color. This is the simplest color palette and can have a clean, uncluttered look, but a monochromatic palette can also be boring.
- Analogous—This palette includes three colors next to each other on the color wheel, like yellow, orange, and red or blue, indigo, and purple, usually with one color used as the dominant and the others as accents.
- 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. This color palette can be a real attention grabber.
Think About Color Psychology
Colors affect mood and feelings. Different colors have different meanings and this can influence human behavior, so color is 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. Orange is an upbeat color and is popular for ecommerce.
- 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 and warnings.
- Yellow is another warm color associated with positivity, happiness, and sunshine. It grabs the attention as a background color with black or dark blue.
- Pink is a delicate color and has a connection to innocence, tranquility, and romance.
- Blue is a cool color and calls forth feelings of calm, confidence, and stability. It is very popular for insurance and medical apps.
- Green is another cool color. It is associated with nature, growth, money, and healing. The color green is also psychologically connected to the message ‘go, ’ so it is often used to signify success.
- Black is connected to authority and power. Some common associations are wealth, formality, mystery, and seriousness. It can be overwhelming, so many designs stick with black for text.
- Purple is connected to royalty and luxury.
- White signals purity and cleanliness. It is popular for medical equipment and electronics manufacturers because these businesses stress clean and sterile environments.
Think About Accessibility
Keep in mind that people with vision problems also use websites and mobile apps. High color contrast helps people with vision problems distinguish differences. You can use a contrast checker to see if your colors have enough contrast. Also, approximately 300 million people in the world are color blind, with 1 in 12 men and 1 in 200 women who have the condition. Make sure that color isn’t the only way you use to signal important information.
Look for Inspiration
If you aren’t sure if a combination of colors will work together, turn to images for inspiration. Find photographs and videos that use color combinations that look attractive to you. Nature is also especially good for color inspiration and can be a great way to figure out what colors go together. After you locate some inspiring images, you can use a tool to isolate the colors and identify the palette.
Use Tools
Tools like Adobe Color and Coolors can help you identify the hex codes for colors in an image to create a palette. Another tool called Dribbble Colors organizes designers’ work according to color, so you can see how combinations work.
Where to Learn UX/UI Design
If you would like to learn more about UX/UI design to switch to a new career, 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 design software and other applications. 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 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 areaand get started in a new direction today.