DTC 478
"Design" vs Design
Color in user experience
scroll down
The purpose of this module is to understand the role of color within user experience. Color plays a crucial role with user experience - it sends a psychological message to the user to make them feel a certain way and choosing the right color help makes your website more recognizable. Theres a reason Coca cola uses the color red and twitter uses the color blue. The correct use of color can create a postive experinece for your website, however, a poor use of color can create a negative experience as well and sometimes can make the website unsuable. Futhermore, color is a key part in making your website memorable, it triggers all the senses and delivers a message without saying a single word. Below I will be discussing techniques and rules that will help you in making the best choices for your website to improve user experience.
60-30-10 rule
Balance is key when choosing a color palette. Using 60% of the dominant hue, 30% of your secondary color and 10% for the color of your accents is recommended. This porportion is meant to be easy and pleasant to the human eye having a gradual flow and balance of your visual elements. However, I enourage you to experiment with the porpotions and be creative with it be careful though because a poorly balanced color palette can be harsh on the eyes.
Color contrast is crucial part of your user experience and visual composition. It can highl-ight certain elements and make them stick out guiding the eye of the user to where you want it to. Color schemes that are monochromatic can be less effective on grabbing the attention of the user. Furthermore, Colors that have little contrast can make the elements look illegible which make the experience with your website frustrating. The color contrast depends on the goal youre trying to accomplish. For instance,if you need special attenti-on on a certain element use two high contrasting colors like white and black. High contr-ast colors are espeically used for CTA buttons. Be careful with having two colors that co-ntrast too much. Colors that are very high in contrast can be distracting and make it diffi-cult to read or scan text. Mild level contrasting is highly encouraged and high contrast should be used for the elements that you want to have special attention.
Psychology of Color
Colors can really influence the mind and evoke emotions - changing the way we percieve something based on what colors are present. This behavior is a branch of psychology called Psychology of Color. This theory explains how we react to colors, however, most of us are unaware of it. When we see colors, our brain gives signals to the endocrine system relea-sing hormones responsible for mood and emotions. Every color has its own perception - designers can use this to send a certain message to the users and make an expected action. Here are a few colors and their purposes:
  • Red
    It represents both the good and bad emotions. Such as love, rage, passion and intensity
  • Blue
    A color that brings feelings of calmness, stability, sadness, tranquil, and trust.
  • Green
    Symnolizes growth, rebirth, nature, and greed.
  • Yellow
    This is the color of happiness, enthusiasm, hope, joy and creativity.
  • Black
    Associates with tragedy and death but also is seen as modern or traditional.
Ultimate ux guide to color design

The language of color - effects on our experience and behaviour

A better approach to color theory
Choose a photograph, website, logo, design or painting that piques your interest in terms of the color use. Consider the things you learned from this module and explain why they use those specific colors and what their "Design" reasons were for it. Additionally choose another color scheme for the object you've chosen to create a different experience for the user. Compare/contrast your two color schemes and write a one page paper explaining what youve learned. Consider questions such as : Do the colors evoke an emotion in you? What are they?
What was their "Design" process behind the color scheme?
Did they use color to emphasis a certain element?
What is the purpose of using these specific color?