Color-Use Tips From Our Expert


Published on November 17, 2020

pexels-skitterphoto-1019341.jpg

Many people don’t recognize the importance of color until it’s not doing what it’s supposed to. We go through our day subconsciously expecting certain colors to be present in familiar situations. When those colors don’t meet our expectations, we get confused and need a minute to decipher the meaning. Imagine stopping at a “stop” sign, but instead of the familiar red, the sign is black. You’d probably stall a few seconds longer, scrutinizing and trying to understand it.

To learn more about color and the role it plays in design, we asked Reggie Sparks, Creative Director at Documents and Media to answer a few burning questions.

Reggie SparksHow important is color to design?
Color is probably one of the most important design considerations, if not the most important for impactful communication. It’s known that people internalize a message or environment within seconds of the initial experience, the primary factor of that reaction is based on color.

The use of color in design is multilayered… Color generates ideas, expresses messages, sparks interest, and conjures emotions.

Can you use color to convey a message? How?
Within the psychology of colors, warm colors tend to express excitement, optimism, and creativity; cool colors symbolize peace, calmness, and harmony. Some colors hold a universal significance, while there is also cultural significance to colors. It’s important to understand your audience and consider the layered influence of color for each project.

In addition to the psychological impact, more obviously, color plays an important role in information hierarchy. You can push design elements back or bring them forward using color and contrast.

Do you feel limited or guided by the UCSF Brand Identity color palette?
As designers for UCSF, we are lucky to have a rich and sophisticated brand color palette. The existing palette offers a strong foundation to develop a range of unique pieces, depending on the goal of the project, while easily being recognized as UCSF.

How would you recommend a non-designer approach color selection? 
Fun fact: I’m actually color blind (color vision deficient). Approximately 1 in 12 men are color blind and around 1 in 200 women. I have Deuteranomaly, a common type of color vision deficiency, mildly affecting red-green hue discrimination… however, understanding color theory, psychology, and working within an established brand palette nullifies the issue.

What’s your process for selecting a color palette for a project?
If you’re struggling to choose colors for your project, there are a couple of simple rules to keep in mind… First, use the brand colors. The UCSF primary colors, the teal and navy, both lend to sophistication and elegance, connote security, calmness, and trust. The secondary palette can shift the tone, orange and yellow are more energetic and signify optimism and confidence, green aligns with nature and sustainability, purple can add a touch of luxury, spirituality, or wellness… use red sparingly. Red is one of the few colors that has a very strong human reaction and should be reserved for alerts or urgent communications (there are some color combos that can soften this reaction).

Keep it simple, choose one primary color and a second accent color. The combination of contrasting colors creates a vivid and energizing effect; analogous combinations (colors that are adjacent to each other on the color wheel) creates a calming, likable impression.

Is there a best color?
Lastly, while I don’t think there is a best color, one of the highly practiced principles of design, “white space”, is crucial to help users make logical sense of the information presented.

“White Space in design composition is the same as the use of silence in a musical composition. Without proportionate use of silence, music is unstructured; some may call it noise. Similarly, without White Space, the design is unstructured and difficult to consume” -Alan Cooper

It’s a common misconception that white space is wasted space and that the space should be utilized to show more content… fight that urge. White space isn’t literally empty space, it’s a powerful design tool. Space between layouts and layout elements, help greatly in guiding the users through the page and prioritizing the focus area for the user and let the design breathe. And remember, white space doesn’t always need to be white.