Colors in UI/UX Design

Colors are the most recognizable part of a brand. Adobe is red, Apple is white, Google is rainbow. You could recognize their logos, websites, and products out of the corner of your eye because of their dedicated color branding. Your logo and website need that same recognization. But first, you need to figure out what colors will be most acceptable to your audience.

What is UX/UI Design?

UX and UI design are at the intersection of customer experience and product interaction. While often used interchangeably, the terms have different meanings in the marketing world.

UX design is short for user experience design and focuses on the technical design aspects to enhance customer satisfaction and loyalty.  It is involved in the branding, usability and function; considers the “why, what, and how” of product use.

• Why: The user motivation for using product/perception of the product
• What: Functionality and ability of the product/product features
• How: Accessibility and aesthetics

Taking these into consideration, UX creates an experience that solves a customer problem or satisfies a customer desire.  Its goal is to create products through the lens of the customer that also fulfill a company’s brand promise.

UI design is short for user interface design, often referred to as graphic design.  This type of design is a process of making interfaces in software or computerized devices with a focus on looks or style.  UI design professionals anticipate what users might need to do with the product and ensure the interface has elements that are easy to access, understand, and use to facilitate those actions.

Utilizing colors in UI design can add intentional impact to print or online marketing.  Color can be used to emphasize an idea, elicit an emotional response, make a specific part of a website the focal point, or make the site more visually appealing.  Color also contributes to branding and can reflect company values.

Users judge products online within the first 90 seconds of their initial view of the product.  Between 62% and 90% of this judgement will be based upon color scheme.

Check out how color is being used on websites in 2019.

Color Schemes

Almost every color scheme contains four of the five different groups of colors: primary, secondary, accent, highlight, and semantic.  The most common group includes primary and secondary colors.  There should be no more than 3 primary colors. For instance, ours are navy, red, and violet. Secondary colors, while enhancing, are optional.

Accent colors are used to emphasize or highlight information, whereas neutral colors play more of a supportive role with text and backgrounds.  The last group is semantic colors.  These are signaling colors.  They may signal success, error, warning or convey information and be reflected by green, red, yellow and blue.

Color details allow for a harmonious color scheme including tint/shades/tones, contrast, and vibrancy or what most refer to as brightness.  A designer would add white for tiny, black for shade, and gray for tonality.  Contrast is the variation between two very different colors and is often used to achieve balance (eg: blue and orange or black and white). Vibrancy is used for added emotion or increased energy.  Conversely, brightness can be reduced to increase a sense of calmness. Your color scheme will decide your logo, website, and how wide your audience becomes.

Color Branding

• Red
  • Meaning: Power, Passion, Energy
  • Companies: YouTube, KFC, CNN
• Orange
  • Meaning: Friendship, Youth
  • Companies: Nickelodeon, Amazon, Fanta
• Yellow
  • Meaning: Happiness, Enthusiasm
  • Companies: DHL, Best Buy, Ikea
• Green
  • Meaning: Growth, Environment
  • Companies: Whole Foods, Starbucks, Land Rover
• Blue
  • Meaning: Calm, Safety, Reliability, Trust
  • Companies: Facebook, PayPal, Dell, GE
• Purple
  • Meaning: Creativity, Wisdom
  • Companies: Yahoo, Hallmark, Monster

Color Placement

On websites, certain colors are often used for specific parts of the website.  Text is most often black on a white background to make it easiest for the user to read.  The majority of sites use blue or black for their link color regardless of their branding. Logo colors, however, utilize the company branding colors, whereas banners and navigation menus tend to use an accent color.  The most effective companies brand their websites in this type of formatting.

Color Avoidance

It is important to remember that colors take on attributes from their surroundings.  Because of that, there are rules around color that benefit the user experience.  For example, never use neon colors. While neon colors may feel spunky or seem to make the design ‘pop’, they are hard on the eyes.  They create problems paired with both dark and light backgrounds.

Rainbow colors don’t translate in graphic design.  They are overwhelming, overpowering and make the content difficult to decipher. Although Google uses it in their logo, you don’t see them impressing rainbow letters into their entire page. Similarly, dark-on-dark, bright-on-bright, and light-on-light colors create color saturation. These color combinations are unreadable and should also be avoided.

Color Implications in Businesses

Different types of businesses purposefully use color to influence customer connection to their brand. For instance, a combination of red and yellow is considered an appetite stimulant and can often be seen in restaurant graphics.  Picture McDonald’s, In & Out Burger, Red Robin, Sonic, Church’s Chicken, etc.

Since the color green is associated with environment and growth, it is common to see both energy and environmental companies utilizing green in their color scheme.  Some examples include BP, Brighter Planet, Planet Eco, and Crispy Green.

Blue, as a reflection of trust, is a top choice for banks and other companies in the financial industry. It is also used for other various business sectors in a darker shade of blue, emphasizing security.  Think Citibank, Chase, and Capital One. Blue also stimulates the brain and helps keep it awake, hence so many blue social media websites: Facebook, Twitter, Myspace, etc.

In addition to typical color implications, cultural differences should also be considered. Different cultures have specific beliefs, so they may interpret color choice differently. An example is a cultural difference around the color purple. In Western countries purple represents wealth.  In most Asian cultures it represents nobility.  But, in some parts of Europe, in Thailand, and in Brazil, it represents mourning or death.  The latter perception could have a significant negative impact on a company’s ability to connect with customers in those areas and to drive sales. Depending on the impact on different cultures, the use of color could impact buyer habits internationally.

Choosing your Website Colors

Color is the foundation of UI/UX design.  It is more important “how” colors are used versus which colors are used.  “How” colors are used sends a message about a company’s brand, impacts usability, and influences emotion.  Overall, the branding, schemes, and implication of color in design will play a role in a company’s ability to gain customer loyalty and drive long-term profits.

Still unsure about how to work color into your brand? Give us a call to see how we can help you establish a brand that stands out and sticks with your audience.