Table of Contents
As promised in part 5, in this part you are going to dive into the world of colors. Colors are one of the crucial steps to create great user interface, so make sure to don’t skip it. Before leaping off with this part of UI Design series, let’s briefly look at the content of previous part. In the previous part we discussed buttons, check boxes, drop-down lists, sliders, icons, pagination and when you should use these elements. It was a bit more theoretical and maybe even boring part. Today, it is gonna be different …
The power of color in UI design
Color is one of the most important factors of your UI design and design in general. Through small change in color palette you can alter the mood and overall experience your user will get while using your design. This is not just about making things nice, but also about the nature. In the nature, colors are pragmatically used to suggest convey specific meaning. This is so powerful we even prefer certain colors over another. This applies to animals as well.
For example, color helps animals to recognize what’s eatable and what’s not. Well, if they are not color blind. The best example of this can be red color. It will be hard to find animals willing to eat something red or purple (except carnivores and some fruit). Color is also used for camouflage. Some animals raised this advantage to mastery to either hunt and kill their prey or avoid being killed by a predator. Another role of color is to help males attract females.
Even though this might sounds weird in today, it is males who use more vivid colors and decorative elements, not females (at least in animal kingdom). People were used to this too, take a look at 18th century. Remember this fact guys when you will be whining about how much cosmetics your girlfriend use. By the nature, this should be the other way around. Whether you want to get attention or avoid it, color can help you achieve both. So, what are the best tips and advice for UI design related to color?
No.6: Use pleasant color schemes
First things first. Before you jump right into designing another cool thing and playing with object, you should create a color palette. Sometimes, your client will brig the colors he wants to use, so it will be less hustle for you. Anyway, don’t go any deeper with the project without set color palette. Creating a color palette should precede all parts of design process. Yes, even wireframing. The reason is that color conveys specific mood.
“Don’t go any deeper with the project without set color palette.”
This mood can influence the whole design to a degree you will need to completely rethink and rework your wireframes. It may sound weird since I previously wrote about designing without colors, but that has nothing to do with color palette. It is about applying colors from set color palette to design. Please don’t interchange these two things. Remember, before getting into that amused, depressed or whatever state applies to you to always work out the color palette first. It doesn’t need to be set in stone, just have it set.
OK, you are about to create a color palette, but what colors should you choose? This question gets tougher when you imagine how many colors is available. What’s more, don’t forget the shades and tints. Choosing color can quickly turn into madness, so how to make it easier? Well, the first advice coming to my mind is to pick vibrant colors. Vibrant colors should be your number one option any time. This can be problematic with some clients.
“Stick to vibrant colors.”
When it comes to vibrant colors, they may think about festivals and other things using screaming colors and not like this idea. This is not true at all. Vibrant colors don’t have to punch you right in the face when you see them or overwhelm you. They can be subtle and balanced. What makes the difference between turning the UI design to chatty Dr. Jekyll or pissed of maniac Hyde, is what colors will you use and how will they work together. More about this later. For now, remember to stick to vibrant colors.
One thing to consider when choosing a color and creating a color palette for your UI design is contrast. Contrast will help you bring clarity in no time. Imagine a website or store. Both of these examples can contain dozens or hundreds elements and objects placed around. How can you distinguish between them? How can you at least guess some of them are usable (buttons on website) while others are not? Quick answer is through contrast.
Did you hear about that experiment with buttons and how colors influence the click rate? Researchers found that you should prefer some colors over another. Sounds good? Well, not so fast. Yes, some colors are better in catching attention, but the most important factor is contrast. Those researchers would tell you to use red. However, this is not the end. You need to consider the background. What if the background will be in color close to red? Exactly! No contrast. In short, use whatever color you want, just keep the contrast.
“Contrast brings clarity.”
The color palette for your UI design is set and you are ready for the next step, but before moving on … Have you considered the industry your design will be used in? Since every color convey a mood and more or less visible message, you need to consider the industry your client is in or where the final design will be used. Choosing the right color is not just about the hue, tint and shades. It is about the psychology.
In fact, type of industry can be one of the biggest constraints you will have to face. You might have a complete color palette, but when you will approach your client he will disagree with it. This doesn’t have to do anything with his opinions or personal tastes. It can simply be inappropriate for his industry and business. For example, while red can be a good choice for hospital and emergency, it will be complete nonsense wedding or funeral service. Remember, when choosing colors, think about the industry. Keep this on mind.
“When choosing colors, think about the industry.”
We haven’t discussed one important thing yet … How many colors should you choose? Too many colors can make the UI design overwhelming while no colors can lower its usability. So, what is the best number of colors to go with? To avoid overwhelming users with colorful disaster or black and white experience, if it is not the goal, use rule of three … Stick to three colors. Nothing more is needed. To help you remember this number, you can think about rule of thirds from layout and composition theory.
“Rule of three … Stick to three colors.”
How skilled in choosing colors are you? Someone can pick the right colors in a couple minutes while other will need hours just to decide about the color of t-shirt. They will go with black or white anyway. Choosing the right colors to create a color palette for your UI design is a real science. What if you don’t want to spend hours in books about color theory? The safest bet will be complement colors. These or the opposite colors on the color wheel.
What these colors have in common is that they work well together. In other words, you don’t need to worry or even care about creating a contrast. By choosing complementary colors, you are already solving these issues. Isn’t it nice? So, the last advice to remember today … When in doubt, choose complement colors. That is the safest option to go with.
“When in doubt, choose complement colors.”
Final words
You are prepared to manage the colors in your UI design like a pro. From now, nothing can surprise you and make you doubt yourself. You are good to go. Before leaving, let’s quickly summarize the main points … First, create the color palette before going deeper. Second, prefer vibrant colors. Third, bring clarity to your UI design through contrast. Fourth, color preferences will vary with industry. Fifth, three colors is the best amount. The last one, choosing complement colors is the safest choice.
Thank you very much for your time and see you in the next part of UI design – 10 steps for great user interfaces. In the next part you will learn secrets about fonts …
What are your favorite colors or palettes for UI design?
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
