At first sight color science may seem not that difficult to master but diving into the details it’s obvious that there are many peculiarities which demand to be comprehended. In the article Color Theory: Brief Guide For Designers, we touched upon the basics of the science helping designers in their craft. Today we gathered a handy glossary with the essential terms of the color theory which will help graphic and UI designers get a better understanding of how color works.

Color

Before we step any further, it’s important to figure out the essence of color itself. The Merriam-Webster dictionary defines it as a phenomenon of light (such as red, brown, pink, or gray) or visual perception that enables one to differentiate otherwise identical objects. Simply put, color is a quality of an object which is caused due to the light being reflected or emitted by this object. Color can be verified visually by measurement of its properties such as hue, saturation, chromaticity, and value. To gain proper awareness of color meaning let’s define its characteristics.

Color Properties

Hue

The term hue is often mistaken for the color so it needs to be cleared out. First, we should understand that “color” is a general term that people use to name all the hues, tints, and tones. On the other hand, a hue is exactly the thing we mean asking “what color is it?”. Basically, it is a family of twelve pure and bold colors presented on the color wheel.

A hue serves as a basic material that can be transformed in three different ways – tinting, shading, and toning. Depending on the applied technique, a hue is modified into tint, shade, or tone.

They are easy to distinguish. A tint is created by mixing a hue with white, while a shade is a mix of a hue and black. Toning is a more delicate process because it requires adding both black and white the reason why the results may seem more natural than shades and tints.

Source

Value

As we said above colors have certain characteristics by which they can be recognized. Value is a property telling how light or dark a color is. The characteristic is defined by the level of whiteness. The more white has been added to a hue, the higher the value it receives.

Chromaticity

Chroma, or chromaticity, shows the purity of a hue. The characteristic is measured by the presence of white, grey, or black in a color. Twelve basic hues described above have the highest level of chromaticity since they don’t contain any additional elements. Colors with high chroma usually look bold and vivid.

Saturation

This characteristic has much in common with value and chroma, so sometimes they may be mistaken. Still, it’s vital to understand the differences. Unlike two previous properties, saturation doesn’t apply to mix hues with any other colors. It is about how a color looks under different lighting conditions. Saturation describes how bold or pale color is according to its look in the daylight and weak light. The property is also known as the intensity of a color.

Color Wheel

If you had any lessons related to painting, you must have seen the circle consisting of different colors. It is called the color wheel and helps to understand how different colors relate to each other and how they can be combined. The color circle is usually built of primary, secondary and tertiary colors which are also known as hues.

The color circle was created in 1666 by Isaac Newton in a schematic way and since then it has gone through many transformations but still remains the main tool for color combination. The idea is that the color wheel must be made that way so colors would be mixed appropriately.

Color Types

Primary colors

They are three pigment colors that cannot be formed by any combination of other colors. The primary colors serve as the basis of a whole system. The primary colors vary depending on the type of color system. A subtractive system is based on cyan, magenta, and yellow, while red, green, and blue colors form the additive system. And the painting system RYB includes red, yellow, and blue.

Secondary colors

These colors appear by the combination of two primary colors. Since each system has different basic colors, the secondary colors vary too. Here is a schematic explanation of secondary colors appearing in each system.

RGB:

• green+red=yellow
• red+blue=magenta
• blue+green=cyan

CMYK:

• yellow +magenta=red
• magenta+cyan=blue
• cyan+yellow=green

RYB:

• yellow+red=orange
• red+blue=purple
• blue+yellow= green

Tertiary colors

The mix of the primary and secondary colors gives us the tertiary colors which usually have two-word names such as red-violet or yellow-orange.

Cool, warm and neutral colors

All the colors we described above can also be divided into three types: cool, warm and neutral.

Cool colors are the ones on the green-blue side of the color wheel. They are called cool since they bring the feeling of cold. Warm colors are opposite to the previous due to the warm associations which they possess. Yellow, orange, and red are the hues relating to the warm type. Last but not least, neutral colors are absent on the color wheel including gray, brown and beige.

Health Blog using a warm palette

Color Systems

RGB

RGB color system considers red, blue, and green as primary colors. The system is the basis of all colors used on the screen. The combination of primary colors in equal proportions of this system produces secondary colors which are cyan, magenta and yellow, but you need to remember that the more light you add, the brighter and lighter the color becomes. Results obtained by mixing additive colors are often counterintuitive for people accustomed to the subtractive color system of paints, dyes, inks and other tangible objects.

RYB

RYB (red, yellow, blue) is also known as a painting color system often used in art education, especially in painting. It served as a foundation for the modern scientific color theory which determined that cyan, magenta, and yellow are the most effective set of three colors to combine. This is how the color model CMY has been formed.

CMYK

The system CMY has been modified with the appearance of the photomechanical printing. It received the key component meaning black ink and the system was named CMYK (cyan, magenta, yellow, and black). Without this additional pigment, the shade closest to black would be muddy brown. Today this color system is mostly used in the printed design.

Source

Color schemes

The color balance is vital in design since users make their impression of the website or application by the first look, and colors have a big influence. Designers distinguished the basic color schemes, aka color harmony, which works effectively.

Monochromatic

It is based on one color with various tones and shades of it. The monochromatic harmony is always a winning choice since it’s hard to make a mistake and create a distasteful color scheme.

Deetu Business Cards

Analogous

To create analogous harmony, you need to use colors located right next to each other on the color wheel. This type of color scheme is used for the design where no contrast is needed including the background of web pages or banners.

Binned Logo Animation

Complementary

The complementary scheme is the mix of colors placed in front of each other on the color wheel. This scheme is the opposite of analogous and monochromatic since it aims to produce high contrast. For example, the orange button on the blue background is hard to miss in any interface.

Home Budget Dashboard

Split-Complementary

This scheme 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. The contrast here is less sharp than in complementary scheme but it allows using more colors.

Financial Service Website

Triadic

When the design requires more colors you can try a triadic scheme. It is based on three separate colors that are equidistant on the color wheel. To save the balance in this scheme, it is recommended to use one color as a dominant, the other as accents.

Dating App Landing Page

Tetradic/Double-Complementary

The tetradic color scheme is for experienced designers since it is the most difficult to balance. It employs four colors from the wheel which are complementary pairs. If you connect the points on the chosen colors they form the rectangle. The scheme is hard to harmonize but if you do everything right, the results may be stunning.

Business Card App

Let’s sum up with the prosaic quote by RyPaul: “The whole point is to live life and be – to use all the colors in the crayon box.” Learn how to use colors effectively both in your life and work and the results will please you.

Useful Articles

Color Theory: Brief Guide For Designers
Design for Diversity of Cultures: Color Perception
Color in Design: Influence on User Behavior
Design Tips: How to Choose Colors for Interface
3C of UI Design: Color, Contrast, Content
How Shape and Color Work in Logo Design

Originally published in Tubik Blog

Сообщение Design Glossary: Basic Color Terminology появились сначала на Design4Users.

To create good design and employ colors more effectively, you need to understand how colors are formed and how they relate to each other. That’s why students at art schools, colleges, and universities study the science of color theory devoted to colors’ nature. Today, we offer you to remember (or maybe even learn) the basics of color theory about the color combination which can be effectively applied in your design creating process.

Color Wheel

If you had any lessons related to painting, you must have seen the circle consisting of different colors. It is called the color wheel which helps to understand how different colors relate to each other and how they can be combined. The color circle is usually built of primary, secondary, and tertiary colors. The primary are those three pigment colors that can not be formed by any combination of other colors. Combining primary colors, we get the secondary ones, and the mix of the primary and secondary colors gives us the tertiary colors which usually have two-word names such as red-violet.

The color circle was created in 1666 by Isaac Newton in a schematic way and since then it has gone through many transformations but still remains the main tool for color combination. The main idea is that the color wheel must be made that way so colors would be mixed appropriately.

Color models

Before you start mixing colors you need to understand that color has two different natures: the tangible colors which are the surface of objects and the others which are produced by light such as the beams of TV. These types create two color models by which the color wheel is formed: additive and subtractive.

The additive color model considers red, blue, and green as primary colors so it’s also known as RGB color system. This model is the basis of all colors used on the screen. The combination of primary colors in equal proportions of this system produces secondary colors which are cyan, magenta and yellow, but you need to remember that the more light you add, the brighter and lighter the color becomes. Results obtained by mixing additive colors are often counterintuitive for people accustomed to the subtractive color system of paints, dyes, inks and other tangible objects.

The subtractive color model obtains colors by the subtraction of light. It consists of two color systems. The first is RYB (red, yellow, blue) also known as artistic system often used in art education, especially in painting. RYB was the basis for the modern scientific color theory which determined that cyan, magenta, and yellow are the most effective set of three colors to combine. This is how the color model CMY has been formed. It was mostly used in printing and when the photomechanical printing included black ink, the key component, the system was named CMYK (cyan, magenta, yellow, and black). Without this additional pigment, the shade closest to black would be muddy brown.

Source

Additive vs subtractive

You should remember the major difference between these two systems: additive is for digital screens and subtractive for print media. If the design project you are working on is meant to be printed, don’t forget the simple but crucial rule: colors you see on the screen never look the same in print. Additive color spectrum is wider than CMYK, which is the reason why designers are recommended to convert their projects to the subtractive system of colors before printing so that they could see the result close to what they would get. However, if you work with digital products, RGB color system is the wise choice because it allows creating amazing things with its wide color spectrum.

Color Harmony

The word “harmony” usually associates with something orderly and pleasing. The color harmony is about the arrangement of the colors in design in the most attractive and effective way for users’ perception. When colors are organized, viewers feel pleased and calm, while disharmony in design gives the feeling of chaos and disgust. The color balance is vital in design since users make their impression of the website or application by the first look, and colors have a big influence. Designers distinguished the basic color schemes that work effectively.

Monochromatic

It is based on one color with various tones and shades of it. The monochromatic harmony is always a winning choice since it’s hard to make a mistake and create a distasteful color scheme.

Deetu Business Cards

Analogous

To create analogous harmony, you need to use colors located right next to each other on the color wheel. This type of color scheme is used for the design where no contrast is needed including the background of web pages or banners.

Night in Berlin App

Complementary

The complementary scheme is the mix of colors placed in front of each other on the color wheel. This scheme is opposite to analogous and monochromatic since it aims to produce high contrast. For example, the orange button on the blue background is hard to miss in any interface.

Rome Illustration

Split-Complementary

This scheme 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. The contrast here is less sharp than in complementary scheme but it allows using more colors.

Be Bright App

Triadic

When the design requires more colors you can try triadic scheme. It is based on three separate colors which are equidistant on the color wheel. To save the balance in with this scheme, it is recommended to use one color as a dominant, the other as accents.

Toonie Halloween Stickers

Tetradic/Double-Complementary

The tetradic color scheme is for experienced designers since it is the most difficult to balance. It employs four colors from the wheel which are complementary pairs. If you connect the points on the chosen colors they form the rectangle. The scheme is hard to harmonize but if you do everything right, the results may be stunning.

MoneyWise App

Color theory is a complex science that requires more than one day to learn. However, it is vital to understand the basics so that you could create an effective design with the knowledge of what you’re doing.

Recommended reading

Here are some materials we could recommend for those who would like to get deeper into the topic:

Design for Diversity of Cultures: Color Perception
Color in Design: Influence on User Behavior
Design Tips: How to Choose Colors for Interface
3C of UI Design: Color, Contrast, Content
How Shape and Color Work in Logo Design

Originally written for Tubik Blog

Сообщение Color Theory: Brief Guide for Designers появились сначала на Design4Users.

The color meaning can vary depending on the culture of the target audience. Moreover, sometimes one color may have absolutely opposite meanings in different countries. This is the reason for designers to acknowledge the specialties of culture’s color perception while creating the design for a foreign country. Today we’ll find out the meaning of basic colors and how they are interpreted in different cultures.

Western culture

Western culture is widespread around the world including European countries, the USA, and Canada. Many historical events have united these far and different countries into one big culture. The color meaning in Western culture was based on some common traditions and beliefs.

Here is the list of the basic colors and the meanings which they are typically associated with.

Red. The color usually associates with passionate, strong, or aggressive feelings. It symbolizes both good and bad feelings including love, confidence, passion and anger.

Orange. An energetic and warm color bringing the feelings of excitement.

Yellow. This is the color of happiness. It symbolizes the sunlight, joy, and warmth.

Green. The color of nature. It brings calming and renewing feelings. Also, may signify inexperience.

Blue. It often represents some corporate images. It usually shows calm feelings but as a cool color, it also associates with distance and sadness.

Purple. Long associated with royalty and wealth since many kings wore purple clothes. It’s also a color of mystery and magic.

Black. The color has a great number of meanings. It associates with tragedy and death. It signifies a mystery. It can be traditional and modern. Everything depends on how you employ it and which colors go with it.

White. The color means purity and innocence, as well as wholeness and clarity.

By Tubik

Eastern and Asian cultures

East and West are two opposite points of the world so no wonder that the traditions of these cultures are often contradictory. So, if you are creating the design for the Eastern countries, you need to keep in mind the fact that color meanings aren’t similar to the Western.

Here is the list of the basic color connotations for the East.

Red. The color is associated with Eastern countries in the first place. Red is thought to be the most positive color bringing happiness and prosperity, so it is often used everywhere in the East.

Orange. It is a positive color as well as the red. In many Eastern countries, orange symbolizes courage and love.

Yellow. It associates with things like being sacred and independent.

Green. The color believed to bring health and eternity (religious).

Blue. In Eastern Culture, it represents wealth and the betterment of self.

Purple. Similar to the West, it is associated with wealth, nobility, and royalty.

Black. In many Eastern countries, it is the color of health and prosperity. However, in Thailand and Tibet, black is the color of evil.

White. Unlike Western culture, white is linked to death and mourning. People wear white clothes for funerals.

By Nick Slater

Chinese culture

China is one of the biggest and ancientest Eastern countries. Its nationality is rich in traditions, myths, and beliefs. There are some peculiarities in the color interpretations in China which designers should consider.

Red. It is a traditional Chinese color. People wear red on the biggest occasions such as the New Year and weddings. Red symbolizes good luck and long life to the people.

Orange. This color Chinese people associate with good health.

Yellow. An interesting fact is that yellow can be associated with vulgarity. When the Chinese say “yellow picture” or “yellow book” discussing types of publications or media, it’s in reference to this type of image and websites.

Green. Hats colored green for men in China mean the man’s wife is unfaithful.

Blue. While in Western culture it is a masculine color, the Chinese consider blue as feminine.

Black. It is the color of boys in China. Black associates with masculinity.

White. The color represents death and bad luck.

Design project by Yi Mi Xiaoxin

Indian culture

Colors have always played a large part in the Indian culture and have deep significance for people. In Hinduism, colors are often related to certain gods and bring various associations. Proper use of the colors is vital for Indians because they are believed to create the appropriate environment to keep people cheerful.

Here are the meanings of colors in India.

Red. It’s the color of purity, so brides wear red clothes. Red is also associated with the goddess Durga who has a red tongue and almost red eyes. In Southern India, the red color stands for violence and disruption.

Orange. Orange is the most common color. Orange represents the “sacral chakra” according to the Hindus belief. The orange also is associated with courage and sacrifice.

Yellow. The color in the Hinduism symbolizes sanctity. Yellow also is connoted as the color of commerce.

Green. In India 30% of the population is Islamic and the green color is respected in Islam. Also, green has the connotation of a new beginning and happiness.

Blue. It is the color of Krishna, a central god in Hinduism. Blue symbolizes strength and is often used by sports teams.

Purple. It is the mix of red and ochre which symbolize wealth and nobility in India.

Black. This color is associated with a lack of desirability, negativity, and inertia.

White. Indians wear white at funerals and it’s the only color widows are allowed to wear. Similar to Western culture, it is the color of peace and purity.

By Ranganath Krishnamani

Latin America

It is thought that Latin America and the USA have a lot in common since they are neighbors. Nevertheless, the only thing uniting these cultures is the word “America” in their names. The ancient civilizations and folks such as Maya and Inca have formed this culture with their myths and knowledge.

Here is how Latin Americans interpret the colors.

Red. It is often associated with war, especially in combination with black. In Mexico, red is a religious color.

Orange. It is the color of the sun and the earth (because of the reddish-orange ground color in many countries).

Yellow. In many Latin and South American countries, it is associated with mourning.

Green. The color is the symbol of nature, although in some countries it is the color of death.

Blue. For the Catholic population, blue is associated with religion (Virgin Mary’s robe and headscarf were blue). In Mexico, it is the color of trust and serenity, and, in Colombia, blue is the color of the soap.

Purple. In Brazil, purple has connotations of mourning and death.

Black. It’s the color of masculinity and it is often worn by men.

White. Similar to the USA, white means purity and peace.

By MUTI

By DKNG

Every culture is unique and has its specialties. So, if you are creating a design for a foreign country, you should learn more about its culture in order to avoid misunderstandings with the target audience.

Useful Articles

Color Theory: Brief Guide For Designers
Design for Diversity of Cultures: Color Perception
Color in Design: Influence on User Behavior
Design Tips: How to Choose Colors for Interface
3C of UI Design: Color, Contrast, Content
How Shape and Color Work in Logo Design

Сообщение Design for Diversity of Cultures: Perception of Colors появились сначала на Design4Users.

Here we are going to consider some points of importance about this significant stage of UI design.

Aspects affecting the choice

Lots of discussions are raised here and there about the color scheme, which is more effective in creating good interfaces. Although lots of participants in this big debate try to find a universal solution, here in Tubik, we suppose the cure-all does not exist. Every project in UI/UX design is highly individual and needs a thoughtful approach weighing all pros and cons.

There are several vital aspects that should be taken into account in the initial stages of choosing the general color scheme for a website or application.

Clarity

This aspect should include the ability of the user to clearly see and distinguish all the necessary details on the screen or page. The color scheme and combinations should support easy and intuitive navigation and make the most functional elements of the layout stand out effectively. Case, when this aspect is not considered or not tested properly, can bring to the products which make a complete mess on the screen in which users do not see what they really should. One of the ways to check it is widely used “blur effect” when you look at the screen or page in the blurred mode and check if everything vital is easily and quickly observed.

Readability

The choice of background for the screen usually influences the level of readability – the ability of users to read text easily. This aspect should be considered among the first, especially if an app or a website is text-driven. Poor readability level is the main reason why users miss important data or feel inexplicable tense using the product as all the way they have to struggle with the text, which takes considerable effort to be read. No need to say that lack of readability can be a serious reason why users are not retained even with attractive products.

Accessibility

In the sphere of UI/UX design, accessibility is mostly defined as the ability of the product to reach as many people as possible. That means that the decision “to use or not to use” should be mostly based on users’ needs and wishes but not on their physical abilities. Color scheme issue is among the main factors affecting this aspect. Taking it into account, designer should think over the users of different age, special needs, and disabilities which can also determine the choice of color for the background and layout elements.

Responsiveness

Designing app screens or webpages, it is also important to remember that users are going to use the product on different devices. That can make crucial effect on usability as often what looks slickly stylish, attractive and clear on the high-resolution professional monitor can transform into a dirty stain on the small low-res screen. In every project, designers should take their time on checking their solutions on different devices and in various resolutions: that simple step enables to reveal the problems and fix them on the early stages of design. Color scheme, certainly, influences this issue among the first.

Environment

One more thing to consider while choosing the appropriate color scheme and the type of background is the potential environments in which users are going to use it regularly and frequently. In terms of constant use under natural light, a dark background can literally create the effect of reflection, especially on glossy screens typical for tablets and smartphones. On the contrary, in terms of regular use in a badly-lit environment, a dark background can take the light away from the screen, which has a bad influence on navigation and readability. So, the issue of color combinations, contrast, and shades draw big attention here.

Therefore, as we can see, choosing the appropriate background color for the layout is a vital step affecting such a key characteristic of any product as usability.

Steps to follow in choosing the color scheme

Here is the short checklist of basic things to follow, making solutions on the general color scheme.

Clearly define the aim of the product

It is very important to define the most important useful points of the product which are going to solve the user’s problems. This data will determine what kind of content drives your product.

If it is text-driven stuff like a blog app or e-reader, for example, perhaps light background will be a better choice. Light will create the feeling of a more airy and spacious screen or page, and it will be easier to concentrate purely on the text.

Online magazine

Blog App

However, if your product is visually driven and moves around images rather than text, a color scheme with dark or bright background for the interface can become an efficient solution as the colors of the images can feel deeper, and the general layout, if accomplished properly, can get stylish and sometimes even luxury look.

Architecture Company Website

Seafood Recipe Website

Analyze your target audience

As we have mentioned plenty of times in our previous articles, defining and analyzing the target audience is the first thing designer should do to work on effective design solutions. Knowing who is your potential user and what they will want to get from your product is the solid basis for a helpful, usable, and attractive interface. Middle-aged and older people tend to like interfaces with light backgrounds as they find them more intuitive and navigable. Younger people can find well-performed interfaces with dark background more original and stylish and it can be the way to involve target users. Teenagers and children can be attracted to thought-out interfaces using bright backgrounds and funny details. Certainly, it deeply depends on the nature of the product functionality and content; however, typical preferences of the target audience can also be a good clue to efficient decisions.

Social Network App

Book swap app

Ecommerce Website

Research the competition

One more thing to remember is that your product is not going to appear one and the only on the market. It is going to participate in great and dynamic competition the prize in which is popularity and users’ attention. The choice of color scheme can be the way to make a product stand out of the crowd that can be crucial to enable the first wish of interaction from user’s side. Time spent on researching the existing products in the sphere can save much more time and effort in redesigning of ineffective solutions.

Music Player App

Karaoke App UI

Test as much as possible

All the aspects mentioned above should really persuade in one key thing to do: as the color is perhaps the most important tool affecting the level of usability and attractiveness of the product, every design solution should be tested properly, in different resolutions, on different screens, and under different conditions. Testing proves the strong and weak sides of your choice before the product goes out on the market, gets discussed, and loses the chance of a stunning first impression in case of inefficient design solutions.

Healthy Food App

Social app: cooking and recipes

In practice, we have published earlier two practical case studies on UI design in which color schemes were redesigned in the process. In the case of Echo App design it was made after the problems revealed via user testing, while in the case of Tracking App it was determined by the issue of consistency for all the versions of the product. Welcome to read the cases in detail.

Useful Articles

Here’s a set of articles on more aspects and best practices of user experience design.

Error Screens and Messages: UX Design Practices

Visual Dividers in User Interfaces: Types and Design Tips

How to Design User Onboarding

Directional Cues in User Interfaces

How to Make User Interface Readable

Basic Types of Buttons in User Interfaces

Negative Space in Design: Practices and Tips

How to Make Web Interface Scannable

UI/UX Design Glossary: Navigation Elements

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Color Scheme for Interface. Light or Dark UI? появились сначала на Design4Users.

No wonder, in the sphere of UI design color is among the key things of creating efficient results. It is actually a multi-functional and diverse tool able to fulfill several needs simultaneously, such as the following:

• supporting recognizability and brand awareness;
• supporting readability;
• strengthening call-to-actions;
• satisfying aesthetic needs;
• sharpening navigation;
• enhancing intuitive interaction;
• beautifying visual solutions;
• creating clear and harmonic style.

One of the leading designers in Tubik Studio, Ludmila Shevchenko is literally a person staying on the bright side of life every single moment of the day. If you check her portfolio on Dribbble, you will definitely see that even in creating interfaces she is an artist always keen to take everything possible from the color and is never afraid to experiment. Certainly, it doesn’t matter that working on the projects, she never creates minimalist or airy-light designs – when it’s needed and required, it’s done also with thorough attention to even the smallest color accents. However, when she creates concepts or projects, she is always avid to use all the power of color and brighten the world around her. Today she has shared some of her ideas on using color in UI design based on her work on numerous design tasks for different target audiences.

Calendar App 

Working over the first variants of style for an app or a website often feels like a bit of magic and color choices and combinations are obviously the major part of this process. When asked what could be a fairy wand on this path, Ludmila says that she would make it out of four main components actually basic for any creative process: a good mood, a desire to transfer positive emotions and feelings, inspiration, and love for the job you do. This combination motivates her to find great solutions by being persistent and hard-working at this stage. This basic approach empowered with deep knowledge of art and readiness to search can bring out amazing and – what is more – efficient and user-friendly designs.

Ludmila working over a UI concept

Let’s look through some tips from the perspective of color choice and application in UI design.

Don’t be afraid of experiments

It’s not a secret that today designers have great support in color choice in the aspect of making color matches. One of such helpful traits is a huge number of ready-made pallets of various combinations, sometimes even featured in sample screens and pages. Software and tools enabling a designer to catch different harmonic combinations between one breath and the other are getting more and more sophisticated and highly functional so they become a great help, especially in cases of big workload and hot deadlines.

However, as usual, standing on the solid ground of ready-made solutions and standard well-checked combinations, designers should always be ready to add their own two cents as well as sometimes go far from the offered decisions. Don’t resist standard solutions; however, don’t see them as your Bible in design. Be ready and keen to experiment – this is a great way to develop your design skills and create something that is out of the box. Certainly, it doesn’t mean that this very moment you should start something revolutionary new, but still take your time for experimenting and thinking over new tricks. Stay wise but have no fear to let your creativity fly higher now and then.

Colorful Wallpapers 

Don’t set strict limits on the color palette in your portfolio

Your portfolio is actually your design face for the customers who do not know you personally. And for sure it’s only you who decides what this face will express. If you want to show only one side of your design style, if you want your potential customer to see you only smiling, or only deeply serious, or perhaps childish, then this tip is not for you. A limited color palette of portfolio works is one of the fastest ways to do it. Nevertheless, practice proves that showing diverse color choices and combinations in the portfolio in a harmonic way enhances the better presentation of design skills and higher chances of getting involved in interesting design projects.

Try gradients

Sure, this advice, as well as all the others, should be used wisely. It has to be mentioned that in many cases designers today prefer to avoid gradients working out colors for their designs. However, gradients are able to liven the accomplished task and strengthen the potential of color in different design solutions.

Stats Concept 

Colors should feel clean in any combinations

Trying different color combinations and their functional features in creating user-friendly interfaces, it is very important to remember that in any case, even the most venturesome color matches and blends should feel clean. No dirt on a screen or a page. Clarity enhances usability rate, supports readability, and makes all the colors do their best in their interface.

Try using colors as a background, not only in the work itself

It often happens that presenting their works, designers concentrate on the work itself not paying too much attention to the background colors. However, in many cases background color can become one more way to liven up the main image or screen and make it look even more efficient and expressive. Don’t miss the chance to try, perhaps it’s applicable right in your case.

Travel Notes App 

Check the efficiency of color choice via black-and-white

Talking about interfaces, whose aim is not just to transfer visual messages but also to enable easy and successful interactions with a product, a good way to check your solutions is the black-and-white look of the accomplished screen. Observing it, you will quickly understand if the elements, which have to be noticeable and functional, work like this or get lost without colors. Don’t neglect this easy way to check the efficiency of your design as it will not only reveal ineffective combinations but also will easily show you what are the potential problems of your interface for color-blind users.

Get inspired by the art

A great way to get inspired and transform this inspiration right into interface design is art. Classic art, modern art, digital art. Watercolors, oils, charcoals, pastels. Any kind of manifesto of artistic creativity which appeals to your heart strings. It is especially efficient in the perspective of color choice and application and useful in the case of creative block. Finding the sources of inspiration in works of artists who you like and admire is very helpful. Get inspired and try to create your interface like a piece of art. The results can be stunning not only for your clients but even for you personally.

Art Gallery App

Keep attention to details

Famous American designer Charles Eames said: “The details are not the details. They make the design”. That is a key law of working over UI design for applications or websites, in particular when you choose and combine the color palette. Nothing should be left without your thorough analysis and attention. Color is one of the methods to make all the details visible and therefore efficient. Although, color shades and shadows become an effective way to strengthen the visual hierarchy of the elements and their interconnection.

Remember that usability is a key

Creating interfaces is never an act of pure creativity. It is the act of providing users with a product that will heal their pain and make their life happier. So, from the perspective of color choices and usage in UI, a designer should always remember that the interface should be highly usable and clear. All the slightest aspects of color choices should increase usability, utility, and harmony. Use color coding of categories, provide color markers, and use color to improve and speed up navigation – there are so many aspects that can become much more efficient and user-centered just with the help of the great power of color.

Entertainment App 

Useful Design Articles

If you are interested to learn more about colors in user interface design, this pack of articles may help.

Bright Colors in UI Design: Benefits and Pitfalls

Design Glossary: Color. Terms and Definitions

Color Theory: Brief Guide For Designers

How to Choose Between Light or Dark UI

Color in Design: Influence on User Behavior

Color Matters. 6 Tips on Choosing UI Colors

3C of Interface Design: Color, Contrast, Content

Originally written for Tubik Blog

Сообщение Color in UI Design: How to Look on the Bright Side появились сначала на Design4Users.