You may not know, but as a UI designer, your choice of colour can trigger varying degree of responses among the users of your product.
Colour, good or bad, can leave emotional or psychological effects, thereby dictating the experience of the user. Before you combine colours in your next design, you might want to go through the following criteria which I consider as some of the most important things about colour that you should know.
Hue
Hue is basically the way colour appear in their natural state, as seen in the colour wheel. It is the application of colour without considering their variations or lighting effect and shadows.
The colour wheel consists of the primary colour with their mixtures systematically arranged in their blending order. Hue is also the location of a particular colour on the colour wheel. The location of the hue is measured in degrees as the colour are at equidistant from the center at 30o. For instance, the red colour is the starting colour which assume a hue of 0o or 360o followed by the orange colour which is at 30o followed by yellow 60o and so on.
The 60 – 30-10 rule (the golden ratio)
This is a unique way of proportioning the contents of a UI design in order to assign colours using specific ratio or proportion. The whole content of the UI designed is divided in the ratio 60:30:10 or 60% to 30% to 10% which still amounts to a 100 which is the totality of the content.
It is proportioned in such a way that the 60% is assigned to the dominant hue, 30% goes to the secondary colors while the remaining 10% is for the accent colour.
This formula works well as it allows balance and ease visual navigation throughout the UI design to create a great user experience.
Be inspired by nature
Nature has its own way of matching colours of things in a way that will appeal to the human vision. Elements of nature such as trees, animals, plants, sky etc. are well arranged with distinct colours that the human eyes can interact with. Studying the way nature works can actually provide a UI designer with discretion idea on how to use and combine colours in a way that will appeal to the users.
Grays with colour tones
Tint and shade are areas of colour theory that focus on how colours are combined with white and black. When you correctly apply these principles to pigment colour in paintings or fabric, usually, the result is always very good to see.
The principles of tint and shade in the world of light, however, have a more critical purpose. Light is very important because it alerts users to smoothness, depth, roundness, distance, helping the brain to adapt to our ever-changing reality.
It is this unique property of light that designers leverage on to create digital user experiences.
Employ color contrast
The use of contrasting colours in UI design influences the vision of the user by making all elements of the design noticeable. Using similar colour in UI design might result in some elements of the design being oblivious to the user. Thus, the adaptation of contrasting can be a powerful way of arresting the vision and attention of the user.
The level of contrast can however be adjusted depending on the goal. For instance, if you are looking to get users to pay special attention to some design elements, you can use two high contrasting colours such as red and blue. This is often employed when dealing with call-to-action (CTA) buttons.
Select colour based on emphasis
Elements that offer a special functionality in a UI design are usually assigned brighter or darker variant of a particular colour especially when a single colour or two colour are used in the entire UI design.
Using a variant of the dominant colour in the design creates an impression of a special character or emphasis on that particular element. You will observe that when you hover around selections like search buttons or CTA buttons, they usually carry different or darker shades to lay emphasis on the selection.
In some other cases, darker colours are used for redundant of less used elements in a UI design while brighter colour are used for other commonly used, functional elements.
Selecting denotive colour
Denotive colour are used to identify special states in a UX design. Example is the error state. The error state in any UI design should carry the red colour The red colour often denotes error, danger or omission. If the product colour is red, the red colour can be avoided when trying to present an error message.
Feedback for a successful action can be denoted by a light green colour or any lighter colour that is not in contrast with the product colour.
The disable state colour can carry any related colour but must be grayed out. To create a good user experience, the user must be able to directly identify any disabled element or block by its colour.
Select colours based on the psychology of colour
The use of colour to influence human mood is an important aspect of UI design. Color psychology is the usage of different colour to depict different mood and impressions. The human mind interprets colours differently, because of this therefore, colour can be used as an advantage to portray different moods.
White colour: this is often used to depict purity, innocence, peace and clarity
Black colour: this depicts mystery, tragedy or anonymous or corporate feeling
Green colour: this often depict nature and calmness.
Yellow colour: yellow is usually associated with happiness, joy and calmness.
These are just few of the relevant psychological effect that colour casts on the mind of users.
Select colour based on the target audience.
The objective of the UI design will depend on the choice of colour selection. Color mixing is allowed when the target audience are children. Different colours are allowed just to create fun colourful impression on the target audience. In cases where the target audience of the UI designer are teenagers or young children, brighter and lighter colour like red, yellow green and orange colour of lighter variants can be used.
In the case where the target audience are corporate organisations, cooler colours and colours that depict clarity and corporate mood are used. Here, colour mixing should be minimal so as to make the other details such as text and other important information obvious.
Select colour based on the type of product.
In order to have a good user experience of the product designed, The UI designer must select colour that depicts the intended experience for the user. Considering a game as a product, there must be several colour mix and variants in order to create that gaming experience and excitement, colours that suggest fun and excitement must be used in this case.
Another instance is a product that involves the display of graphs. Here the UX must entail distinction in term of easy identification of elements. Elements of the graph for instance must be distinguished by distinct colour with high contrast which must be easily identifiable. Therefore, to give a good user experience, a product designer must understand how to make use of colours on the UI to give a quality experience.
Defining section colors
In a good UX design, elements and sections must be easily identifiable by the user. A UI consists of different sections from the typography to the white space and to the links and buttons.
Same colour must be used for interactive elements such as buttons, links and other clickable control elements. This is to make them easily identifiable for the user and also makes navigation easier.
Typography are assigned different colours from the interactive controls while the white space must remain at a different colour so as to enable distinction between the sections and the elements.
Different cultures and societies interpret colours differently, therefore, the target culture in case of an indigenous product must be studied in order to provide an excellent user experience.
Understanding the diverse cultural perception of colour guides the user against misconception and confusion. The white colour in some part of Asia depicts sorrow or death while in Europe, the white colour means purity, peace or calmness. Therefore, the acknowledgment of this peculiarity and differences will help in the better understanding of colour selection in case of indigenous product.
