Post date: septiembre 23, 2020 | Category: Décimo Séptima Edición Diciembre 2017
MATERIAL DIDÁCTICO / Teaching materials
Department of Media Systems and Technology, Kharkov National University of Radio Electronics, Ukraine
Annotation: The article discusses the features of the process of selecting the primary colors or color palette for creating the original layout or the graphical interface of the application. The main rules for selecting colors depending on the consumer and the final result of using the project are given. The necessary minimally observed rules are defined and the peculiarities of using the template color palettes are considered.
Keywords: color, graphical design, color palette, consumer characteristics, interface.
The connection of a person with a computer is based largely on the graphic interface elements, and color takes an important place in this process. «Color does not just make the design pleasant to the eyes, but also stress it out», Pierre Bonnard said [1].
Duding designing a new product, designers often find it difficult to compose a color scheme, because there is an unlimited numbers of possible combinations. In this article we are presented eight basic rules that can help us with the color selection.
Let’s start to review the main rules:
1. The limit of quantity of colors
If you add new colors to the design, it is extremely important to maintain a balance, as more colors, it becomes more difficult. It’s better, if you keep to the rule of “The three main colors”, during forming the palette. The scientists of Toronto University researched how people use Adobe Color CC. The majority of respondents prefer simple color combinations based on two or three colors.
If you need extra colors in addition to palette, use different tones.
So we have a question: how to choose these colors? The standard color circle can help us.
Consisted of 12 colors circle – is one of the main sources for palette selecting. There are some ready-made standard schemes that can make this process easier, especially for beginners.
They are:
Same color palettes;
Palettes of related colors;
Palettes of complementary colors;
Customized palettes.
Let’s review each of the palettes separately.
Same color palettes
Same color schemes look really good (especially shades of blue or green). For example, you can see it at Facebook (pic. 1). The palette looks very neat and elegant. There is so easy to work with same color palettes: they consist of just one color in different shades and variations of saturation. All color shades are combined well with each other and create effect of calming.
Palettes of related colors
The related colors are located next to each other on the circle. Suck gammas are based on the related colors: one of it becomes the bearing one and other colors complement the palette. It is very simple, but the trick is to choose proper bright of using color, it sets the tone of the palette. For example, Clear, a utility for organizing a to-do list with gesture control. It uses “screaming” colors to attract attention to the main notes require immediate implementation (pic.2).
Contrariwise, the app for meditation called Calm prefers the couple of related colors “blue+green” to make user calm and pacify (pic. 3).
Palettes of complementary colors
By means of using complementary (opposite) colors you can easily emphasize the element you need.
The simplest variants of this type consist of two colors that keenly contrast with each other. This scheme allows you to attract the viewer’s attention. If you use complementary palette you need to choose the main color, the opposite one is using to stress something out. So, when human’s eyes see some object in green tone, red blot really stands out (pic. 4).
Customized palettes
Blots of colors at the grey background are the perfect way to attract the view. At The Dropbox you can see the design performed in white and grey colors with blue accents.
To create own palette isn’t such difficult as the majority of people can imagine. There is very simple way you can use to get great variant: to add some bright accents in neutral gamma (often called the black-white one). And your palette will look really spectacularly (pic. 5).
The scoop inspiration in the nature
Color complexes of the nature are the best out of we can get. Why is it so? They look naturally for us. To look around is enough to get some ideas. If you saw some special good-looking color, try to create a color gamma with it as the basis. Just make photos of beautiful landscape and get colors for the palette from it.
Try to follow the proportion 6/3/1
During creating of palette the constantly actual rule of interier designers can be very useful: the proportion 6/3/1 allows you to create the ideal colors balance in every area.
To actualize this concept is very easy: your naim color have to take 60%, an additional one — 30%, 10% accents take. The additional color has to support the main one, but also has to be different from it. There are 10% to emphasize separate areas. You can use it to call the action or any another element.
Project in the black-white gamma firstly
It’s funny to play with colors. Not surprising, that projecting starts with color choosing. Temptation to make the searching of perfect gamma the main aspect is very big, but if I were you, I would make an interface with grey tones firstly. Make the black-white variant and let’s use it like the basis. With lack of colors you will have to focus on the distances and locations of the elements. Include colors in your project at last. Do it very carefully.
The bright blot on the grey background is easy and effective way to forward someone’s view at the object you need.
Avoid black color
In real world black color mostly doesn’t occur. All black things reflect some light. It means they don’t black but dark-grey. For example, fresh asphalt doesn’t black, so shadows are.
If add black color in your carefully selected gamma, black one will cut off everything. It attracts attention because doesn’t look naturally. From day to day a lot of apps include black colors, that actually are dark-grey. As an example the darkest color in Asos app’s top panel is not #000000, but #242424 (pic. 6). So don’t forget about the saturation controlling.
Build visual hierarchy with contrast
Color is the tool makes proper trajectory of view. As much you need to attract the attention to the object, as much make accent at the contrast. Usually the most important information or main elements are most contrast. If you need user to notice something or click on it should strike the eye!
Use colors to affect user’s mood
It’s not a secret that colors perform some ideas and can affect people’s mood. Such ideas will directly influence on their impression of your product. During the selecting of interface palette, it’s not enough to think about good-looking, you have to think about perception of the product.
Using colors can not only support the image but also destroy it.
Make design available
Availability is one of the main aspects for using of color. Our everyday products have to be available to everyone. It shouldn’t depend on physical opportunities.
Don’t use color as only one indicator
Nearly 8% of men and 0.5% of women have some type of color blindness (every 12th man and every 200th woman). There are a lot of types. The most widespread is red or green blindness. People have problems with discerning of colors’ tones. From right to left are (pic. 7): the colors circle by normal people eye, people with a deuteranopic type, people with a protonopic type of blindness.
As color blindness has different forms (someone can’t discern red and green, someone — yellow and blue, someone see world in shadows of grey), so it’s important to use some colors as a marker at the same time to designate key elements. To explain action, you also can use inscriptions, symbols, patterns, textures and text. Avoid performing information with red or green color. It is really uncomfortable for people can’t see it.
Make text as contrast as possible
Contrast is the decisive thing for the usability. During selecting [2], you should know, the complementing of two low-contrasting colors can make your text unreadable.
Low contrast is “death blow” for the usability.
Control contrast to be sure colors are normally differ with background color, and even people with eye problems could easily read it [3]. The coefficient of contrast is a math ration. It shows how one color differs with another one (usually it looks 1:1, 21:1). As diffecence is bigger as theese colors contrast with each other by brighnness. At the W3C such ratios of text and pictures are recommended:
If text is small, ratio has to be not less than 4.5:1;
For the big text (14 pt for bold font, 18 pt for normal one) the ratio 3:1 is optimal, but it can be bigger.
Conclusion: According this investigation, color is the most powerful tool for art designer, but it is not so use to research. These rules can be use by beginner. The follow step is practice, because there is only one way to investigate our recommendation.
References
Pierre Bonnard. French Painter and Printmaker. (January 29, 2009). Retrieved October 16, 2017, from http://www.theartstory.org/artist-bonnard-pierre.htm
J. Ciichold (2012). Sample fonts, 140-148.
J. Ciichold (2011). New press, 186-201.