![]() ![]() ![]() It’s recommended you start with a small number of primary colors–aim for one or two that perfectly represent your brand. Overuse of primary colors will cause users to ignore the colors they see. Using too many primary colors in the UI is like sending many different signals to your users. Using too many primary colors is one of the critical mistakes that many UI designers make. You might also see them called “base colors”. Primary colors (as we’re referring to them here) are those most prevalent in your user interface. Limit the Number of Primary Colors in Your Design System You can often replace pure black with dark gray without any problems with the user interface color scheme. This happens because pure black on a white background creates too much luminance contrast and makes the eye work harder. Pure black text (#000000) on white background (#FFFFFF) can easily cause eye strain when users have to read text for prolonged periods. Calming blues in this meditation app UI kit 4. That’s why it’s important to remember the specifics of the product and color meaning in the markets you aim to be in. If you design a meditation app, using red as a primary color might be a bad idea. For example, in western countries, people typically associate red with energy and danger, while blue is generally associated with calm and relaxation. Consider Color Psychologyĭifferent colors can mean different things, and people unintentionally associate colors with all aspects of their own experiences. Original image by Sebastian Unrau (UnSplash) 3. Color extracted from the shot of the autumn forest. 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. One good thing about the user interface color schemes created from nature is that they are well-balanced from the start. What should you do if you don’t have established brand colors? You can take inspiration from nature. Creating a color scheme from brand colors using ColorBox 2. Define Start and End colors from the list of your brand colors, and let the system generate a scheme for you. You can use tools like ColorBox by Lyft to create a ready-to-use user interface color scheme from your brand colors. Slack landing page How to Create Your Own Brand-Based Color Scheme This purple reinforces Slack’s very strong visual identity. ![]() For example, below, you can see how Slack uses one of its primary colors (#4A154B) as a background color for the landing page. If you want to use a brand color as a decorative element, you could use it for the background. Notice how McDonald’s uses the variant of its iconic yellow color for the Order Now and Download the App buttons on its website: McDonalds actively uses tints of its yellow color on its website It’s worth reusing brand colors in UI design because they make the UI look familiar to people familiar with your brand.įor example, you could use a brand’s primary color as a color for functional elements such as call-to-action buttons. Those colors are typically used in the brand’s logo, print and promotional material, online presence, and packaging. Most brands have an established palette of brand colors. Use Brand Colors as a Basis for Your Color Palette In this article, I want to share 10 practical tips on how to choose colors and use them in your user interface design. 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. It is an essential part of the visual language that product designers use to communicate with their audience. Color is one of the most critical tools in a designer’s toolkit. ![]()
0 Comments
Leave a Reply. |