Designing with color
Color, in both a conscious and sub-conscious level, can generate an emotional response based on the visual stimuli that a person is seeing. Companies rely on creating an emotional connection with their customers, not only with their products, but with the colors selected to represent them.
As a UI/UX Creative Designer at Code Authority, it is my task to trigger these sensory emotions within a consumer so they are left with a positive impression of a brand. Utilizing my skills and understanding of color theory, selecting the the right scheme to label a business has been a crucial component to successful design.
Color theory, is considered to be a set of guidelines and practices to understand how colors are used. By applying the theory into my work process, I have taken colors of the spectrum to create schemes for products that I have designed. Being able to understand how colors are used and can be utilized in a design are essential factors in making a successful product.
First before even creating a color pallet, as a designer, it is important to know the distinction between primary, secondary to tertiary colors. Primary colors, red, blue and yellow are those that aren’t able to be combined using two or more other colors. Secondary colors, orange, green and purple are the colors created by combining primary colors. Another term for these terms are hues, as both primary and secondary colors are considered to be such. Tertiary colors, lastly, are created by combining both secondary and primary together.
Diving deeper into understanding how to get darker and lighter colors are to attain that colors shade and tint. By adding or mixing black into any hue would be to attain its shade. You are able to get different shades of a color by how much black you are adding into it. On the other hand, by mixing white into a hue, you are adjusting the hue’s tint.
When creating a color pallet, you want to be able to choose colors that will enhance a design or brand. It is about how these colors will be used for your your designs and how it appeals to the user. In the end, you want your work should be eye catching, elicit an emotion response and be appealing.
To have designs be visually appealing, high contrasting colors can be used to easily view text and content on the screen. You want information to stand out to the user, not cause eyestrain, which can potentially push them away from your product. In the process of creating a layout, you wouldn’t use low-contrasting colors as that forces the user to strain while viewing content, creating a negative user experience.
Being able to differentiate between good and poor contrasting colors is key. Selecting contrasting colors that are viewed as “good” doesn’t cause strain on the user, rather it creates a harmonious balance and ease of viewing the content. Smart UI designers will be able to find a balance in selecting “good” high contrasting colors to drive designs and create a positive user-experience.
A color pallet that is visual appealing will allow your product to stand out from competitors, giving you an edge when it comes to a consumer choosing your brand. During my time at Code Authority, I have had the privilege working on a multitude of projects ranging from clients that have had distinct branding guidelines to others that have nothing but strictly an idea.
Client's without color scheme
Clients that don’t have a distinct color scheme creates a unique yet rewarding challenge.
My goal when meeting clients is to learn about their business, getting to know their team, goals for the project, and spending time researching their target demographic. These aspects greatly influence the decision on colors that should be used. Each company also has their own unique personality. A personality that can be translated into a color scheme to aid in branding their business to appeal to consumers.
Following client interactions, I take time to consider information that I learned about the company along with characteristics that could influence color choices. Utilizing the color wheel, color theory and other tools, I create multiple schemes that I feel would properly communicate what the brand is trying to convey.
I will select a singular hue that I feel encapsulates the personality of the company. Then, once a color has been selected, develop multiple monochromatic, taking a singular hue and using different shades and tints, or analogous, paring one main color with two located next to it on the color wheel, schemes to find a harmonious balance.
Creating multiple schemes prevents being stuck with a singular color choice. It gives the designer the opportunity to show various pallets to the clients for approval or even potential user-testing, to see how it engages with a small target audience. The end goal of this process is to have the consumer connect with the brand based upon the scheme chosen.
An additional method I use is creating black and white wireframes of the project. Once I have completed my layouts, I use notes taken about the company to create an array of colors that I feel would represent the brand. I tend to create 3 to 4 pallets so that I am not limited to a singular set of colors. Creating multiple schemes, provides the opportunity to see what works toward creating that unique identity.
There are times when working with a client, they have already decided on their own scheme. This provides a convenience as a designer but also an opportunity to use a chosen pallet to be the driving force in your designs.
Client's with a color scheme
If the company already has a color pallet, this provides a less challenging approach. These clients already have understood what defines their culture and the colors their consumer associates them with.
Even though they have already selected a pallet to identify themselves with, there is still the need from the designer’s side, to focus on understanding the target demographic and learning about company culture. From a designer’s perspective, this provides the ability to take the colors selected and use it accordingly. Unfortunately, you cannot take the colors given to you, splash them on the canvas and then call it a day. Balancing and utilizing the selections in a manner that works appropriately for the product is crucial for making an impact on the customer and improving user engagement.
There is now a focus on the colors that are selected and the percentage of each hue that I will use in the designs. While designing, colors should balance with each other, accents used to drive user-engagement and attention to important areas, and high priority content gets attention it deserves without being overshadowed. All of this plays into how human emotion and psychology can influence color choices.
Psychology of Color
A key component to selecting the right array of colors is understanding the mindset of the consumers being targeted. The psychology of the consumer plays significant role whether a product may succeed or fail. What might appeal to a male in his early 20’s may not appeal to a woman in her early 40’s. Each person has a different pallet that stimulates their senses. Making it crucial, for the role of the designer, to connect with those emotions based upon the colors that are selected.
Designers want to be able to connect with the consumer. Giving them a reason to associate with the brand and generate an emotional response with the pallet chosen. By selecting incorrect colors or those that "differ" from the audience’s expectations, it is easy to create disassociation with your customers.
Upon the time of opening an application or website, a business has around 4 to 6 seconds to grasp the interest of the customer. Selecting the right color scheme aids in the ability to improve a company’s retention rate during this short time. Understanding the need for the right pallet enhances the importance of the designer to be able to research the brand, acknowledge the target demographic and select colors that will emotionally connect with the consumer. Predicting the reaction of the customer with the colors selected is another key aspect in selecting the right pallet.
If your client is a healthcare provider, you want colors that are able convey their message of health, professionalism and care. Health providers use blue in their pallet to convey a sense of trust, loyalty and dependability with clients. This plays an integral role in the initial “pitch” to potential customers as selecting a healthcare provider is a stressful process. By conveying a sense of trust towards the consumer, it increases a business’s chance of attaining the individual as their customer. This applies to the psychological approach of choosing the appropriate color scheme to appeal to customers.
One company that I like to look at as an example for color psychology is Geico. As dealing with accident claims can be an extremely hectic and stressful process, Geico selected a pallet that calms and relaxes the user upon using their service. The use of blues and other cool colors creates a dependable and trusting experience throughout the time the visitor is using their services. A company like Geico, uses the psychology of color to elicit an emotional response from customers, associating their brand with those traits.
Color as a driving force with product engagement
For UI and UX design, not only are you trying to create a pallet for a brand and make it easily recognizable with consumers, but you are utilizing colors to drive user engagement.
Accent colors are made to draw the attention of users to areas where they are meant to make interactions or navigate to next. Buttons, links, icons, and notifications are all driven by the use of these colors. Without the use of proper accent colors to drive navigation or highlight areas of intended interaction, it creates a negative user experience, making your product meaningless to the end-user.
An example would be on a payment page; users will fill in the content for their purchase within the input fields. Once completing the forms, accent colors are used on the payment button to guide the user to finalizing their purchase.
In today’s age of mobile applications and software, from personal experience, users don’t want to spend the time having to learn a product. Many tend to expect instant gratification and want cues to lead them in the right direction. If a user gets lost, they are likely to give up on the product, citing bad user experience and interface. Having accent and color cues within the product can aid in improving navigation and how a user will interact with the product in the manner intended.
Consistency is key. When navigating throughout an application, the user is already introduced to your first selection of colors, which to them creates a “distinction” and “character” for your product. By keeping the color scheme consistent throughout product, you are allowing the consumer to connect with your brand and develop a positive association. Switching up the color scheme mid-usage or using colors randomly will negatively impact user engagement.
Keeping it simple
Keep it simple with color selection. Typically, for myself, 2 to 4 color options work for many of my designs and mocks. Bombarding the user with a multitude of hues can cause sensory overload, leaving a negative perception of the brand. It is important to make sure that both the color pallet and the content are working in unison to create an ease of flow and positive user experience. Finding a balance is key. If you can appeal to the customer in this manner, you will leave a lasting impression and improve overall retention.
I typically start a color scheme with a color that I am fond of or find appealing to the human eye. My favorite color is blue thus I tend to start selecting colors to create my pallet around this hue. From there I am able to find harmony between my selections to properly create a pallet that will help brand the project that I am presently working on. I also make sure to save any colors schemes that I have created to refer back to when working on future designs. This provides me the ability to look back at pallets that I have created to see what has succeeded or failed, guiding me in the right direction for the next project I will work on.
Perceived Appropriateness of Color
Have you been able to understand your client’s business and the message they are trying to convey to their customers?
With color, upon first opening of the application, you want to provide the user with a sense of character based upon the scheme chosen. Leaving a lasting imprint, so when they see those colors on a repeated basis, they are reminded of your product.
A customer is able to make a clear distinction about your brand within the first few seconds of opening up either your website or application. Determining whether a color fits for a brand or it's “perceived appropriateness” is a crucial component to selling a product. Customers are able make instant judgments about a business, making it an integral part to connect with the consumer. If a customer notices a color that doesn't suite the brand or represent what is being conveyed, they will develop a negative association.
Designers should be able to select suitable colors that will define the brand moving forward.
Being Inspired
Designers, like many other creative individuals, fall susceptible to creative roadblocks. I am not afraid to seek inspiration from various sites like Dribbble and CollectUI to see what the latest trends or intriguing color schemes may be.
Such websites allow designers to share their work with the community to receive feedback for what they have created. Seeing work by other designers can spark the idea to try colors that you never thought would work for a brand or think outside the box when selecting a scheme. By seeking out inspiration from other designers, it can guide you in a direction that you could be seeking for your own work.
What colors do competitors use?
Another source of “inspiration” can be from seeing what colors competitors are using for their brands. If they are trying to keep with current trends among various competitors, you can select colors that follow industry standards but keep you unique from the competition.
Being unique can either work in the favor of the company as long as the colors selected for the brand match the personality being presented to the customers.
Though in turn, being unique and not selecting colors that match the company’s personality could be harmful in its ability to capture new customers and retain them. Let’s say your company is about the preserving and protecting the environment but you end up using a warm color pallet to differentiate the brand from its competitors. This can cause the viewers to develop an alternative association with your brand and potentially a negative perception of your overall objective.
The importance of understanding the business and selecting colors that will distinctly characterize the brand is key to choosing the right scheme.
Tools to assist you
There are times when you are on a crunch or are having trouble choosing colors that would fit for a pallet. Thankfully there are a number of tools to assist in making the process easier and quicker to get the job done.
For myself, I have used a various number of websites to aid me in finding colors schemes or have inspired me to try a selection in a pallet to brand projects being worked on.
BrandColors.net
This website is a great tool in viewing color schemes from top companies. If you are working with a client and want to compare your color scheme to a top name in their industry, this site provides a lengthy list of businesses compare with. Since the brands on the site are largely successful, it provides a great learning opportunity to observe the colors used for their brand and what made them as successful as they are.
Google’s Material Color Guide
As a proponent of both flat and material design, Google’s main material design color guide has aided me in creating a color pallet for Android applications along with vector illustrations that I produced.
Scrolling through the site, you are shown various hues of colors that they have selected along with various shades and tints that work within their material guidelines. This has allowed me to select colors that balance well together and make the piece I am designing be eye catching to the end-user.
Coolors.co
Coolors.co is a fantastic website that enables you to quickly generate a color scheme, lock colors that work for your project, and then easily generate new colors that balance well with the ones you have selected. For those projects that require a color pallet in an instant, you are short on time or just looking to find a balance in hues, this site is a great tool.
Materialpalette.com
Continuing with my love for flat and material design, this website allows the selection of various hues, pairing them together and generating a visible pallet preview to view on a Google “card”. Projects that are driven by material design or follow this style benefit from using this site.
In Closing
Designers hold tremendous responsibility when it comes to selecting the right colors for the designs they have created. Colors hold a distinct power over human emotion and the reaction it generates from people who engage with them.
Selecting the right colors for a brand can either create a lasting appeal or turn potential customers away. For a project to succeed, designers need to successfully use color to their advantage and connect with their target audience. If the designer fails, then the brand fails.
As human emotion and connection with colors have evolved over time, it will be intriguing to see how color theory will continue to advance, play a roll in brand recognition and alter design methods.