COLOR SYSTEM_____

During this fifth session, we're going to discuss how to set up a color system that supports the navigation throughout the platform and how to make a good color scheme. Colors are a very emotional aspect of design, often said to be the undisputed king of the visual language. They are the loudest and psychologically probably the most deeply rooted visual asset we have along with shapes. Due to their powerful nature, to create a color palette for a UI we need careful attention and extended visual practice; otherwise, the result may end up looking like a children’s coloring book.

EXAMPLES_____

Please check some of the most common issues and their explanation below. Click on the numbers to load the related image.

TRANSCRIPT_____

The colors of a UI can be grouped in several ways, but the most effective grouping I’ve found so far is to group them by function. This gives a steady framework for choosing good color combinations.

  1. Interaction colors. This includes the colors of the links, buttons, switches, menu items, and all kinds of interactive elements, everything that represents the functionality, hence the value, of the platform. Traditionally, this color derives from the company’s logo (in case of a new branding project, it might be chosen by the designer based on industry research). Serving as a core color, the interaction color not just defines the 'taste' of the interface, but set up the main aspects of choosing any additional colors as well. For example, having a high saturation, medium dark, basic shade of blue as an interactive color (core color) already defines the saturation/lightness/hue for all the additional colors chosen to be in the color scheme, e.g., flat colors won't work with this vivid basic blue. Besides the core color, for promotional purposes, an additional color is often added to the color scheme. Since that color needs to stand out, it needs to be a far in terms of hue from the core color, yet keeping the saturation and lightness consistent.
  2. Communication colors. These colors are used for communicating with the users, e.g., providing feedback about the user’s actions or about the platform’s performance. They allow less freedom of choice since there are conventional colors associated with the different feedbacks coming from the environment, such as red for danger/error, green for available/success, and yellow for pending/work in progress. If we want to conform to the users’ heuristics and with that, minimize the number of erroneous responses, we need to stick to the conventions. Translating these colors requires very little cognitive effort, which means a very short learning curve for the users. However, in a good color scheme the shade of these colors is always adapted to the current theme, e.g., for a vivid basic blue as core color, the communication colors are also chosen with high saturation, medium lightness and basic shade.
  3. Supportive colors. The colors of the supportive elements (graphics, backgrounds, patterns, icons, dividers, and so on) that create a decent matrix for the interactions. For a good color scheme to be created, it is advised that the basic supportive colors are being created from the core color by setting up different opacities in front of white background (for lighter swatches) and black background (for darker swatches). That method increases or decreases the saturation and lightness simultaneously, resulting in even swatches where no shades sticking out and hijacking the users' attention.
  4. Color coding is technically creating connectedness via colors for a specific grouping purpose, such as displaying access levels or grouping related functions. There are two things that need to be considered when creating a color code system. First, users have a limited color memory. The average user is capable of memorizing 3-5 colors confidently (and their associated meaning) if they are distinctive enough (far apart in hue to be perceived as different colors). Above that number, it’s very hard to make further distinctions with colors. If we have more than 3-5 groups to be color coded, I suggest other visual tools to be used, such as icons or shapes. Second, the color coding should not be altered for any reason on any page of the platform. It needs to be applied in an unchanged fashion on every page; otherwise, it won’t be color code anymore, but mere coloring, losing its function as a supportive tool.

Considering the above, it can be said, that in term of a good color scheme, a single color choice itself is irrelevant; it’s always the dynamic of the chosen colors and the consistent use of the color scheme that defines the efficiency of the color system.

SESSIONS_____

Fontlogo-simple2

Contact me via hello@juliannasudi.com

All rights reserved © 2020 Julianna Sudi Design Strategist

 Home - Works - Biography - Publications - Design Guideline