Why Color Is So Important When Designing An App
Mason Carter wrote this article
The great artist Vincent Van Gogh once said,
“Color in a picture is like enthusiasm in life.”
Color plays a significant, yet subtle role in our daily lives.
We perceive the world around us through color. Color impacts our mood and how we feel about things. It can even affect our interactions and the choices we make.
Perhaps most of all, colors can bring emotion and feeling out of us.
This is why our design team takes great pains to come up with the right colors for your app, screen by screen.
Color can lead people to make certain choices
“Colors are forces, radiant energies that affect us positively or negatively, whether we are aware of it or not.” – Johannes Itten
Our designers have a great deal of respect for Johannes Itten, who literally wrote THE book on color, The Art of Color.
Color creates the first and lasting emotional connection that people have to your application.
The moment the human eye perceives color, it connects with the brain, sending a signal to the endocrine system. The endocrine system then releases hormones that shift our mood and influence our emotions based on the color that is being perceived.
This is why at Chop Dawg, we’re invested in making sure that every application we build uses the right colors, the right way in their overall design aesthetic.
Colors will not only impact future user downloads, but how often people decide to use your app. You are creating your first emotional connection with your users through the power of color: starting with your app icon.
So, how does the Chop Dawg design team choose the right colors for your app?
Some of our clients have an existing brand to keep in mind for their new app design. But we also have many clients who are looking for us to create a new color scheme for their app from scratch to then build a brand off of.
Regardless of where you fall in this spectrum, startup or established, our designers
How people perceive color is highly individualized, regional, and cultural. The psychology behind colors is a subjective field of study where age, gender and experiences are all factors.
The universal color principles to keep in mind
Despite how personal feelings, opinions and experiences can affect our perception of color, there are universal color principles that always withstand the test of time.
Color combinations should be simple, but not boring. A simple color scheme improves the user experience. Design should not get in the way of reading content, but it should encourage it. A complex color scheme is too overwhelming to the human eye, especially on a phone screen operating on different brightness levels.
Our designers typically choose two to three colors to be dominant in the application’s overall design.
How our designers choose the color scheme of each application we build is determined by both color theory and practicality. It also comes from ten years of experience building digital products and apps and understanding how it all comes together to form the UI/UX experience.
When making a decision about a color scheme and primary colors in your app, our designers can go two ways: traditional and custom color palettes.
Traditional Color Schemes
Analogous – A combination of colors that are harmonious in nature because they are next to each other on the color wheel.
Monochromatic – Using one base color and all its tints and tones for a simple, yet cohesive and elegant mobile app design.
Triad – Three colors evenly spread across the color wheel come together to form one unique app design.
Complementary – Situated on opposite sides of the color wheel, complementary color examples include red and green, orange and blue, yellow and purple. This color scheme creates strong contrast, allowing certain aspects of the mobile app UI to stand out.
Compound – Compound color scheme is also known as split-complementary. It uses base color and two analogous colors. Compound color scheme is almost as contrast as the complementary scheme. However, it has less visual emphasis than complementary color scheme.
Custom color combinations are ever-evolving, and apps are the perfect frontier for testing them. From experimenting with shades of black and white, high-contrasting colors, gradients – there are so many ways to customize your app’s color scheme.
The main challenge to come up with colors that are not only aesthetically pleasing, trendy (but not too trendy), but that also elicit the desired feeling and interaction from your app’s users.
Then, you need to make sure that your app doesn’t look too similar to others in the same market when it comes to the colors used.
How our team chooses the right colors for your app
There are a few steps to take to find the right color scheme for any application.
Start out by asking three questions:
1. What are the appropriate colors to use for your brand? If you don’t have an existing brand, what is the purpose of your application? Is it for utility or for fun?
2. What feelings are you looking to elicit?
3. How can we combine the above two questions to create something that is appropriate, beautiful, and accessible to future users?
To answer the above questions, we need to explore the deeper meaning behind the colors we are choosing for the app at hand.
For example, we shouldn’t choose colors that would be inappropriate to your brand just because they may be visually appealing. If you want an application that evoke feelings of playfulness, you wouldn’t want to have colors that evoke feelings of seriousness or sadness.
If you want your application to elicit feelings of calm and sophistication, it would not be appropriate to use colors that are too vibrant or busy.
What’s more important than aesthetics at this point is establishing the semantics (the meaning) that you want your app’s colors to convey to users.
Let’s take the color blue.
Blue is often seen representing large companies since it is the color of trust.
Check out some screenshots of Jurvo, an artificial intelligence (AI)-powered chatbot for law firms we built here at Chop Dawg. This application is a great example of a sophisticated design using a triad color scheme where blue is a dominant color
This was intentional during our design process. We wanted to elicit feelings of trust and reliability for its future users – feelings Jurvo hopes to earn by matching them with affordable and accessible legal aid and advice that’s best for them (not just what Google says).
We have used several different hues of blue to create a sense of trust and reliability throughout the design. This is the appropriate look for an application that caters to the legal industry and their clients.
This application is for utility and making the legal industry user-friendly, not for fun. But it still needs to look accessible and trustworthy. The color scheme reflects that.
Red – The use of red is an effective way to draw people’s attention. It can be a positive or negative color depending on the context.
Orange – If you want to bring a sense of warmth and energy, use orange. It’s also great for drawing people’s attention and helping your app stand out.
Yellow – This is one of the easiest colors for people to see. Too much yellow can bring anxiety, but just the right amount can elicit feelings of joy and confidence.
Green – We know that green is a color of balance and harmony. It brings in calm, but it’s also a color of growth and prosperity. Products that are connected with nature in some way do very well with green.
Blue – As I wrote about with Jurvo, blue represents trust, strength and reliability. It also gives a feeling of calm. However, how warm or cool the blue is matters.
Purple – Purple is a good color to show off power and luxury. Since red and blue mix together to become purple, think about the connotations of those two colors. Purple can be very effective in drawing attention when used sparingly.
Black – This can be an effective way to set contrasts and for backgrounds. Context is important. It can show off a modern and serious look. But black can also be associated with sadness. Once again, context is important for black.
White – We often hear that white is purity and innocence. However, white can also bring in a lot of clarity. Too much white can make things feel empty and boring. But just enough white can offer readability and motivate people to explore your application.
Another important factor that we consider early on in the design process is accessibility.
The color scheme of an application should never get in the way of the legibility and readability.
This is why we have veered away from having a simple, monochromatic scheme.
Readability – How easy is it for people to read words across the application?
Legibility – How quickly and intuitively can people distinguish different typefaces across the application?
An application’s color palette should not sacrifice clarity.
Color contrast is an often overlooked problem when designing for mobile. People who have low vision may find it difficult to read text from a background color if it has low contrast.
Color should allow people to distinguish all the core details on the screen.
The goal, after all, is that an application’s colors can guide people through its layout to see information and elements of interaction. People should never need to put much effort into finding all of the application’s core details.
Understanding the visual components of colors for your app
Our designers look closely to the color wheel to understand how different colors relate to each other and how they can be combined. The color wheel is usually built of primary, secondary and tertiary colors.
The four primary colors are blue, green, yellow, and red. Each one of these primary colors is connected to the mind and our emotions.
By lightening or darkening we can experiment with hue and brightness. When mixed, these primary colors create secondary colors. With the color wheel, you can think of it as a compass for producing the right color harmonies for your app.
How we arrive at color harmonies for your app
“He who wishes to become a master of color must see, feel, and experience each individual color in its endless combinations with all other colors.”
– Johannes Itten
Without color harmony, looking at your application would be very jarring. There are certain colors that just don’t look good together. We can use the color wheel to arrive at the right color harmonies, but first, we need to identify the components of color: hue, value and chroma.
Hue is the particular gradation of color.
Value is the level of brightness. How light or dark is a color? Colors with lower values are darker, and higher value colors are brighter.
Chroma is the level of saturation. How vivid is the color? Chroma is important because if your chroma is too low the colors will look washed out.
When you need to decide which colors to choose, our designers will do what they do best.
In our design of Big Pipe, a smart technology marketplace, we decided to use analogous colors for the inventory tracker and alerts. Why? It’s because red and orange sit well together on the color wheel. They are analogous colors.
When we pair red and orange, the color harmony allows for all of the attention to be put on the list. Analogous colors are great to use for lists.
You can see that we’ve also played around with values. If we had all bright colors, the screens would be difficult to read. So there are some cases where the background needs to be darker, and other cases where it needs to be brighter.
Since Big Pipe is dependent on being easy to read, keeping value in mind is important.
We also made sure that the background and foreground were complementary colors. Complementary colors are on opposite sides of the color wheel. This is to form a strong contrast so that the attention is placed on the content itself.
We did not want to overload the senses with too many bright colors. Color contrast can evoke various emotional response from people, which is why we had included some white on those Big Pipe screens.
Strong contrasts can be a draw. Light contrasts can bring comfort and relaxation. Since we combined complementary and analogous colors, this is called a split complement.
Always be thinking about the impact of colors for your app
As I began to think more about the emotional impact of color, I began to notice it everywhere in my life.
When you are using other applications, start to think about how the colors make you feel.
Think about the context in which colors operate. What colors motivate you?
Sometimes it’s difficult to know exactly which colors will work for your application until we have worked on the designs.
This is why our team will never move onto developing your application until every color, right down to the last pixel on every screen is right.