This content originally appeared on Envato Tuts+ Tutorials and was authored by Nick Babich
Color is one of the most critical tools in a designer’s toolkit. It is an essential part of the visual language that product designers use to communicate with their audience. User interface color can serve functional purposes, such as giving users visual hints about where they should look next when they scan a page, but it can also serve decorative purposes such as conveying a specific mood.
In this article, I want to share 10 practical tips on how to choose colors and use them in your user interface design.
1. Use Brand Colors as a Basis for Your Color Palette
Most brands have an established palette of brand colors. Those colors are typically used in the brand’s logo, print and promotional material, online presence, and packaging. It’s worth reusing brand colors in UI design because they make the UI look familiar to people familiar with your brand.
For example, you could use a brand’s primary color as a color for functional elements such as call-to-action buttons. Notice how McDonald’s uses the variant of its iconic yellow color for the Order Now and Download the App buttons on its website:
If you want to use a brand color as a decorative element, you could use it for the background. For example, below, you can see how Slack uses one of its primary colors (#4A154B) as a background color for the landing page. This purple reinforces Slack’s very strong visual identity.
How to Create Your Own Brand-Based Color Scheme
You can use tools like ColorBox by Lyft to create a ready-to-use user interface color scheme from your brand colors. Define Start and End colors from the list of your brand colors, and let the system generate a scheme for you.
2. Take Inspiration From Nature
What should you do if you don’t have established brand colors? You can take inspiration from nature. One good thing about the user interface color schemes created from nature is that they are well-balanced from the start. The process of creating a color scheme is straightforward— take a picture of nature and use tools like Adobe Extract Theme to extract colors from it.
3. Consider Color Psychology
Different colors can mean different things, and people unintentionally associate colors with all aspects of their own experiences. For example, in western countries, people typically associate red with energy and danger, while blue is generally associated with calm and relaxation.
If you design a meditation app, using red as a primary color might be a bad idea. That’s why it’s important to remember the specifics of the product and color meaning in the markets you aim to be in.
4. Stay Away From Pure Black Text
Pure black text (#000000) on white background (#FFFFFF) can easily cause eye strain when users have to read text for prolonged periods. This happens because pure black on a white background creates too much luminance contrast and makes the eye work harder. You can often replace pure black with dark gray without any problems with the user interface color scheme.
5. Limit the Number of Primary Colors in Your Design System
Primary colors (as we’re referring to them here) are those most prevalent in your user interface. You might also see them called “base colors”.
Using too many primary colors is one of the critical mistakes that many UI designers make. Excess of everything is bad. Using too many primary colors in the UI is like sending many different signals to your users. Overuse of primary colors will cause users to ignore the colors they see. It’s recommended you start with a small number of primary colors–aim for one or two that perfectly represent your brand.
Every time you think that you need another primary or base color, you should stop yourself and experiment with already existing colors. It’s relatively easy to create lovely accents using your primary colors. All you need to do is mix the primary color with white (tint) or black (shade). For example, below are a few accents of a primary blue created using Adobe Color.
6. Define Rules for Using Individual Colors
Color can be used to guide users through the product and helps them understand the meaning of individual elements in the user interface. For example, when users learn that text colored in blue on your website represents links, they don’t have any problems finding links on your website. But this works only when you use color consistently.
Once you define colors and their rules in the UI, you should include those rules in your product’s design guidelines and share the guidelines with all people involved in product design. This will increase the chance that the team will follow the rules when designing a product.
7. Ensure Your Colors Are Accessible
Accessible design allows all users to use your product, and color plays a tremendous role in creating accessible products. Poor color contrast is a common accessibility issue of many user interfaces. It creates a terrible experience for people with visual impairment, making it harder to distinguish information on the screen.
You must constantly check color contrast for text and icons in your UI. There are plenty of tools that can help you with that. WebAIM Contrast Check is a tool that will help you to ensure that your UI complies with the Web Content Accessibility Guidelines (WCAG).
When testing your UI, pay special attention to disabled states. A disabled state is typically created with low contrast, creating bad readability for displayed text and icons. WCAG requires at least a 4.5:1 contrast for text and images of text, even for disabled states!
Read up on color accessibility guidelines with these tutorials:
Accessibility Basics: Designing for Visual Impairment
How to Use the Contrast Checker in Chrome DevTools
Designing for Color Blindness With Chrome DevTools (in Just 4 Clicks)
CSS Tips for Better Color and Contrast Accessibility
8. Don’t Use Color Alone to Communicate System Status
Never use color alone to communicate system states such as error, info, or success. Users who suffer from visual impairment, such as red-green color blindness, will struggle to understand what’s happening in the user interface simply because they cannot distinguish the colors.
When you show an error message, or a message about a successful operation, always add an accompanying label and/or icon to help users understand what’s happening. Chrome DevTools offers tools that allow you to experience your product the way people with disabilities experience it.
9. Test Your Color Scheme
You must ensure that the colors you choose to use in your UI work harmoniously. While it’s technically possible to use automatic tools for testing your UI, it’s much better to conduct a manual observation. Most designers have a trained eye and can quickly tell when something doesn’t look correct. So it’s recommended to include color scheme testing as a part of manual QA activities that the team conducts before releasing a product to the market.
When testing a user interface color scheme, always check how your product’s color scheme works under various lighting conditions. A color scheme often looks bad when users access products outside, in sun glare.
10. Conduct Interface Inventory on a Regular Basis
The number of colors used in a product will grow as the project evolves. The more colors you use, the harder it will be to control how they are used. That’s why it’s recommended to conduct an interface inventory procedure at least once during the release cycle. This procedure allows you to categorize components and styles that make your product.
This is a straightforward procedure; all you need to do is use a tool that will tell you how many unique fonts, colors, and components are used in your UI.
If you design a website, you can use tools like CSS Stats to see how many unique colors you have in your cascade style sheets (CSS). The next step is to understand how those colors are used. Remember that you need to understand both the context of use and the number of times the color is used. If you learn that a particular color is used only once in your UI and is nearly the same as the color used multiple times, you can make the first color a duplicate and eliminate it.
Conclusion
Color has a tremendous impact on the perception of a product. Along with typography, visual flow, and spacing, colors create a foundation upon which each product is built. Properly selected colors not only improve the product’s usability but also positively affect user experience.
But choosing the right colors is not a one-and-done activity. You will likely iterate a few times before finding a user interface color palette that works well for your audience. That’s why collecting feedback from your users and making changes based on that feedback is so important.
This content originally appeared on Envato Tuts+ Tutorials and was authored by Nick Babich
Nick Babich | Sciencx (2022-06-12T18:03:33+00:00) 10 Tips For Using Colors in UI Design. Retrieved from https://www.scien.cx/2022/06/12/10-tips-for-using-colors-in-ui-design/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.