In this article, we will discuss color in web and mobile interfaces. We will share some useful techniques to help designers boost their productivity.
User Interface design process includes many things and one of those things is choosing the right color palette. Designers sometimes can spend hours choosing the right color and in this article, we will cover how to make this process easier and more productive.
60/30/10 Rule
This rule is mostly used by interior designers and it’s very simple to use. To bring a balance in composition designer should apply 60% of the main color, 30% of a secondary color and 10% is going to the tertiary color which is used only to make an accent on important things.
The reason this rule is applied is that such proportion should be pleasant for human eyes since it allows perceiving all the visual elements gradually. Knowing this proportion designers can create harmonic and pleasant UI which will make users feel the way that design wants them to feel, without turning the design into a colorful mess.
Contrast
Color contrast is a key part of design composition. User interfaces containing only shades from the same color family have fewer chances to draw users’ attention. On the other hand, copy content in this UI will look illegible which make the interactions with a product almost impossible.
How much contract designers will choose depends on what will be used for. For example, if you want users to pay special attention to the CTA button, you will use a high contrasting color combination like blue and orange. That way users can never overlook that button and your goal will be accomplished.
However, using high contrasting colors in the entire design will hurt users eyes and may not be a good choice in every situation. It’s not a good choice to make a contrast on text and background, it will be difficult for users to read or even scan the page. That is why designers are recommended to use a mild level of contrast and apply high contrasting colors only for highlighting elements. Also, don’t forget to always test every design, that is the best way to see what works and what doesn’t.
Psychology of colors
There is a special branch in psychology that studies colors. They study how certain color influence on human mood and behavior. When human eyes perceive color, our brain gives signals to the endocrine system releasing hormones responsible for the mood and emotions. Each color has its own influence on our mind and the knowledge of the possible reactions can help designers to transfer the right message and call users to make the expected action.
Here is a short list of color meanings:
In addition, designers need to remember that visual perception is quite individual for everyone. Such factors as age and gender have a great impact on color preferences, so it’s vital to know the target audience peculiarities.
Cultural difference
Each culture has its own traditions and beliefs, so before you choose the colors, you need to make sure that they will be interpreted the way you mean. Sometimes a certain color can have absolutely opposite meaning in another country. For example, in Europe and North America white color signifies for purity and that is why it’s often used for weddings. While in many Asian countries this color means death and sorrow, while red color signifies happiness and it’s often used for weddings. Incorrect usage may lead to misunderstandings which could be fatal for a product.
Color harmony
To make users feel pleased and comfortable, designers try to bring the balance into user interface design. The color harmony is about the arrangement of the colors in design in the most attractive and effective way for users’ perception. Harmonic colors contribute to a nice first impression from the website or application.
We’ve talked about in our previous article about basic color rules in design. There are quite complex color combinations and it takes years for designers to learn to use them. One of the basic color schemes are:
Monochromatic Color harmony is based on one color with various tones and shades of it.
Analogous scheme applies colors located right next to each other on the color wheel.
Complementary is the mix of colors placed in front of each other on the color wheel and it aims to produce high contrast.
Split-Complementary works similar to the previous one but it employs more colors. For instance, if you choose the blue color you need to take two others which are adjacent to its opposite color meaning yellow and red.
Triadic is based on three separate colors which are equidistant on the color wheel. The best is to use one color as a dominant, the other two as accents.
Tetradic/Double-Complementary color scheme employs four colors from the wheel which are complementary pairs. If you connect the points on the chosen colors they form the rectangle.
Colors are very important in any design. The right color palette help users feel comfortable with a product. Designers can put people in the frame of mind that compels them to take action just by applying the appropriate color palette. Make your choices wisely.
Originally published at www.broworks.net.
