Tag Archives: color combination

choice of color in UI design

Color Matters. 6 Tips on Choosing UI Colors.

User experience design involves many processes which need to be done thoughtfully so that an interface would meet the needs of the target audience. Each step requires deep attention to details, even if it doesn’t seem too complicated.

 

One of the time-consuming still vital stages in UI creation is color choice. Designers sometimes can spend hours to pick up the right color palette. In this article, we’ll describe six useful tips helping designers choose powerful colors for UI and make this process easier and more productive.

 

Tip 1. Learn 60–30–10 rule

 

This rule, or technique, came from the interior design, so it is often applied for house decorating. The idea is simple. To bring the balance into the composition, the colors should be combined in the proportion of 60%–30%–10%. The biggest part should go to the dominant hue, the third of the composition takes secondary color and 10% percent goes to the color which helps to make the accents.

 

Such a proportion is thought to be pleasant for human eyes since it allows perceiving all the visual elements gradually. Knowing the appropriate proportion designers can successfully combine the colors without risks of turning UI into a colorful mess.

 

web_ui_design_tubik

Digital Agency Landing Page

 

Tip 2. Contrast is a friend

 

Color contrast is a key part of any visual composition. It brings the individuality for each UI element and makes all of them noticeable. User interfaces containing only shades from the same color family have fewer chances to draw users’ attention. Moreover, copy content in this UI will look illegible which make the interactions with a product almost impossible.

 

Designers control the level of contrast depending on the goals it is supposed to accomplish. For example, if you need users to pay special attention to the specific UI elements, it’s a good idea to apply two highly contrasting colors such as blue and red. High contrast is often used for CTA buttons design.

 

However, speaking of UI as a whole composition, high level of color contrast may not always work well. If copy content and the background colors contrast each other too much, it will be difficult to read or scan the text. That’s why designers are recommended to create a mild level of contrast and apply high contrasting colors only for highlighting elements. User-testing on various devices can help designers to make sure of the effectiveness of their solutions.

 

choice of color in UI design

Urban Sketcher App

 

Tip 3. Consider psychology of colors

 

As we’ve mentioned in our previous articles, psychology is one of the basic studies helping in design workflow. There is a branch of psychology showing the influence of colors on human mood and behavior called color psychology. It states that our mind reacts to colors while we usually do not notice it. When human eyes perceive a 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.

 

Red. 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, the sunlight, joy, and warmth.
Green. The color of nature which brings calming and renewing feelings.
Blue. It often represents some corporate images. May be associated with distance and sadness.
Purple. Long associated with royalty and wealth. It’s also a color of a mystery and magic.
Black. It associates with a tragedy and death and signifies a mystery. At the same time, it can be traditional and modern.
White. The color means purity and innocence, as well as wholeness and clarity.

 

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. You can find the detailed description of color meanings and preferences in our previous article.

dance academy landing page

Dance Academy Website

 

Tip 4. Don’t forget cultural differences

 

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. The thing is that sometimes one color may have absolutely opposite meanings in different countries. For example, in European countries white color signifies purity and it is often used at the weddings while in many Asian countries this color means death and sorrow. Incorrect usage may lead to misunderstandings which could be fatal for a product. By acknowledging the specialties of culture’s color perception designers decrease risks of being misconceived.

 

Tip 5. Strive to color harmony

Harmony is what UI design strives to. 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.

 

After years of searching, designers distinguished the basic color schemes that work effectively. Let’s see what they are.

Monochromatic. Color harmony is based on one color with various tones and shades of it.

Analogous. The scheme applies colors located right next to each other on the color wheel.

Complementary. It is the mix of colors placed in front of each other on the color wheel and it aims to produce high contrast.

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.

Triadic. It is based on three separate colors which are equidistant on the color wheel. Professionals recommend to use one color as a dominant, the others as accents.

Tetradic/Double-Complementary. The tetradic 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.

 

color theory design tubik

Source

 

Detailed information and examples of color harmony can be found in our article Color Theory: Brief Guide for Designers.

 

Tip 6. Steal ideas from nature

 

Mother nature is the best artist and designer in the world. Color combinations which we can see in the natural environment are always close to perfect. People enjoy watching sunsets and dawns, autumn forests and winter mountains since they are full of natural color combinations.

 

So, why don’t you try to borrow a few ideas? Go for a walk or search for beautiful nature photos and you will definitely find the inspiration.

 

web ui design city guide

Big City Guide

 

The success of a digital product depends largely upon the colors chosen for its UI. The right colors 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.

 

Recommended reading

 

Color Theory: Brief Guide For Designers.

Color in Design: Influence on Users’ Actions.

Color in UI Design. Look on the Bright Side.

Dark Side of UI. Benefits of Dark Background.

3C of Interface Design: Color, Contrast, Content.


Welcome to see the designs by Tubik Studio on Dribbble and Behance

color theory design tubik

Color Theory: Brief Guide For Designers.

Many people think the choice of colors for UI mostly depends on the designer’s taste and sense of beauty. However, the process of the color selection is more complicated than it seems and plays a significant role in design. In one of our previous articles devoted to color psychology, we’ve found out that colors have the great impact on our mood and behavior. That’s why the success of the product depends largely upon the colors chosen for the design. The research provided by Colorcom showed that it takes only 90 seconds for people to make a subconscious judgment about a product and between 62% and 90% of that assessment is based on color alone. So, the appropriately chosen colors can be useful on the way of improved conversion for your product as well as advance usability of the product.

 

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.

 

color-wheel-2

Source

 

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 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.

 

difference-between-RGB-and-CMYK

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 the 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 the distasteful color scheme.

 

business cards design

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.

 

ui animation design tubik

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.

 

buongiorno_roma_illustration_tubik

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.

 

bebright_app_animation_tubik_studio

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.

 

halloween stickers toonie alarm

Toonie Halloween Stickers

 

Tetradic/Double-Complementary

 

The tetradic color scheme is for the 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.

 

mobile app design tubik studio

MoneyWise App

 

Color theory is a complex science which requires more than one day to learn. However, it is vital to understand the basics so that you could create the 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:

 

Color in Design: Influence on Users’ Actions

 

Digital colour mixing explained

 

Color Systems — RGB & CMYK

 

Why Color Matters

 

Responding To Color


Welcome to see the designs by Tubik Studio on Dribbble and Behance

color psychology in design

Color in Design: Influence on Users’ Actions.

Every single day we’re surrounded by various colors from everywhere. If you take a closer look at the things around, they may surprise you with a number of colors and shades. People may not notice how colorful everyday things are but the colors have the significant impact on our behavior and emotions. Today our article is devoted to the science studying this issue called color psychology. Let’s define the meaning of the colors and review some tips on choosing suitable colors for the design.

 

tubik studio design

 

What is color psychology?

 

It’s a branch of psychology studying the influence of colors on human mood and behavior. The thing is that our mind reacts on colors while we usually do not notice it. The moment our eyes perceive a color, they connect with the brain which gives signals to the endocrine system releasing hormones responsible for the shifts in mood and emotions. These days a lot of research is conducted in order to study the peculiarities of these reactions and there are already many theories useful to learn. Color psychology is helpful in many industries including business, marketing, and design.

 

The success of the product depends largely upon the colors chosen for the design. The properly selected colors help put users in the frame of mind that compels them to take action. The research provided by Colorcom showed that it takes only 90 seconds for people to make a subconscious judgment about a product and between 62% and 90% of that assessment is based on color alone. So, the basic knowledge of color psychology can be useful on the way of improved conversion for your product. Moreover, accurately chosen colors can advance usability of the product.

 

Meaning of colors

 

To convey the right tone, message and call users to make the expected action, designers need to understand what colors mean and what reaction they evoke. In one of our previous articles, we’ve demonstrated you the list of colors with brief descriptions of their meanings. Today we have prepared a bit more expanded list of color meanings in common use and in design.

 

Red

The color usually associates with passionate, strong, or aggressive feelings. It symbolizes both good and bad states of mind and soul including love, confidence, passion and anger. In design, the use of red color is an effective way to draw users’ attention. Also, it’s recommended to use red sparingly to avoid the negative reactions.

 

toonie alarm mascot design tubik studio

Toonie Alarm app tutorial

 

Orange

It is an energetic and warm color bringing the feelings of excitement. Orange combines red’s power and yellow’s friendliness, so it may bring feelings of motivation, enthusiasm, and love to life. Designers use the color if they need to give the spirit of creativity and adventure.

 

logo design tubik studio

fOxygenic Logo

 

Yellow

This is the color of happiness which symbolizes the sunlight, joy, and warmth. Yellow is thought to be the easiest color to visibly see. What’s more, it has one of the most powerful psychological meanings. Users seeing yellow colors in the design can feel the inspiration and confidence. Although, you need to remember that too much yellow may bring negative reactions such as the feeling of anxiety or fear.

 

stardust_bikers_webpage_ui_tubik_studio

StarDust website

 

Green

It’s often called the color of nature, balance, and harmony. Green brings calming and renewing feelings. Also, it is a sign of growth and inexperience. It has more positive energy than most other colors but sometimes it associates with materialism. Design in green colors perfectly suits to the products connected with nature.

 

Big_city_guide_Stockholm_tubik

Big City Guide: Stockholm

 

Blue

It often represents some corporate images since the blue is the color of trust. It usually shows reliability, may give users calming feelings. However, as a cool color, it also associates with distance and sadness, so designers need to keep it in balance.

 

design_for_business_tubik_studio_book

Design for Business E-book

 

Purple

Long associated with royalty and wealth since many kings wore purple clothes, it’s useful for presenting some luxurious products. It’s also a color of mystery and magic. It mixes the energy of red and blue, so it has a balance of power and stability. A big concentration of the color may distract users’ mind.

 

night_in_berlin_event_list_ui_tubik

Night in Berlin App

 

Pink

It is the color of hope, sensitivity, and romance. Pink is much softer than red, so it creates the sense of unconditional love. Pink is associated very strongly with youthful femininity, so it may be an effective color if the target audience is mostly girls and young women.

 

tubik studio app design

Dating App

 

Brown

The color of security and protection like the mother Earth. Designers commonly use brown as a background color in a variety of shades, from very light to deep. It brings the feeling of warmth and comfort to the designs. Also, it may be used to show the experience and reassurance.

 

jewellery_e-commerce_app_concept_by_tubik

Jewelry E-Commerce App

 

Black

The color has a great number of meanings. It associates with tragic situations and death. It signifies a mystery. It can be traditional, modern, serious. Everything depends on how you employ it and which colors go with it. Black matches well with any other color, so it’s ideal for the background. Designers often use it to set contrasts.

 

Bakery website animation

Vinny’s Bakery

 

White

The color means purity and innocence, as well as wholeness and clarity. White often associates with a blank sheet of paper motivating people to generate new ideas. However, too much white can cause the feelings of isolation and emptiness. In design, white is commonly used as the background color especially for the resources for which readability is a vital part.

 

tubikstudio ui animation website design

Bjorn website

 

Color meanings in branding

 

Colors are a vital factor for not only the visual appearance of products but also brand recognition. Nevertheless, in branding, colors tend to have more direct meanings than in common understanding. They can be briefly described within a few words, so here is the list for you:

 

  • Red. Confidence, youth, and power.
  • Orange. Friendly, warm, and energetic.
  • Yellow. Happiness, optimism, and warmth.
  • Green. Peace, growth, and health.
  • Blue. Trust, security, and stability.
  • Purple. Luxurious, creative, and wise.
  • Black. Reliable, sophisticated, and experienced.
  • White. Simple, calm, and clean.

 

realli_logo_animation_tubik

Realli logo animation

 

Color Preferences

 

Visual perception is quite individual for everyone. Designers need to remember that the color effects may be different because of the factors such as age, culture, and gender. First of all, people’s preferences can shift during the life whatever the object is, let’s say, food, clothes, music, colors and plenty of other aspects. It is caused by both mental and physical changes that happen to us across the lifetime. For example, children like yellow color pretty much, but as we become adults it usually seems less attractive. Faber Birren explains it in his work Color Psychology and Color Therapy: “With maturity comes a greater liking for hues of shorter wavelength (blue, green, purple) than for hues of longer wavelength (red, orange, and yellow)”. One more difference between children’s perception and adult is that kids can change their favorite colors fast, while adult color preference is usually non-malleable.

 

Also, designers need to consider that there are many cultural differences and color perception is not an exception. Sometimes cultures define colors diversely, for example, in Western countries, white color means happiness and purity, while in some Asian countries it symbolizes death. You can find many examples of how different may the meanings be in countries but it would take a whole article to tell about it, so if you’re interested in the topic, follow our updates on the blog since the post on this issue is coming soon.

 

Another point on the color preferences is gender. Many color studies have been done over the years and a lot of them say that the color preferences of women and men significantly differ. The Color Assignment group has conducted a deep research on this topic and many designers already use the results in the creative process. We’ve defined the most notable things from the research to share with you.

 

Blue is the top color. Both men and women of all ages think of blue as the favored color.The shades of blue such as cerulean, azure, beryl, cornflower blue, and sapphire are popular among women.

 

Brown and orange are in dislike. The first one considered less favorable among men, the second — among women.

 

Cool colors are preferred. Men and women favor blue, green and their tints in general.

 

Women like tints. When men prefer pure or shaded colors, ladies are good with tints.

 

Men prefer achromatic colors. White, black and gray are neutral colors and men are keen to choose them.

 

Favorite colors

 

favorite color on gender

 

Least favorite colors

 

least-fav-colors-gender

 

Source of charts

 

It’s vital to consider color preferences of the target audience while creating UI and UX design since it helps to avoid negative reactions and associations.

 

Points to consider

 

Color psychology is rather complex to understand and learn. However, it may become an efficient tool in designers’ hands helping to understand users and their demands. Summarizing the article, here is the list of useful things to consider:

 

  • Choose the colors wisely. They have a deep influence on the users.
  • Make sure your design and its colors convey the right message and tune.
  • Learn your target audience. The color preferences and meanings depend on many factors including age, gender, and culture.
  • Some colors may look different on the screens of different devices. Additional testing never hurts.
  • It may be a good idea to test the UI colors with representatives of the target audience.
  • Try to make the color combinations wisely, in the best way for the users’ perception.

 

Recommended reading

 

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

Responding To Color

 

Birren, Faber., Color Psychology and Color Therapy.

 

Color Theory for Designers, Part 1: The Meaning of Color

 

Color Associations

 

Why Color Matters

 

The Psychology of Color in Marketing and Branding

 


Welcome to see the designs by Tubik Studio on Dribbble and Behance