The Power of Color / by Gavin Lau

Color is powerful. It evokes emotion, captures attention and helps to communicate a message. Selecting the right colors for your brand’s identity, website or app can be a frustrating exercise. And with big implications, it needs to be considered carefully.

Our early interface iterations used dark and muddy colors with many gradients and shadows. These worked okay with the skeuomorphic environment we had created, but as we began to add more functionality – interactive widgets, automated dashboards and reports – we began to realize our color combinations needed adjusting to allow users to focus on their tasks rather than their environment.

When using color in any form of design it is important to consider many factors, such as visual hierarchy, emphasis, relationships, meaning and balance across the whole interface. In Bipsync we need to understand how our users move around the interface and interact with certain parts of it. This understanding helps to ensure we give important functions such as the “New Note” button or the “Selected Note” a bright and bold colour, to emphasise it and establish it as a frequently used part of interface.

  Example of New Note and Selected Note color choice

Example of New Note and Selected Note color choice

When we selected our new color palette we ensured our knowledge of user interactions informed our color choices. We didn’t want to stray too far away from previous colors or introduce more as that could have caused issues for our users (or even worse a response similar to Spotify’s recent color change). Instead we selected a brighter palette that factored in color contrast ratios, while at the same time stripping back to a smaller palette for main interface elements.

  New full color palette

New full color palette

  Monochromatic color palette

Monochromatic color palette

We now use two color palettes in Bipsync, one (monochromatic palette) is used for elements such as icons, dividers and section backgrounds, the second (full color palette) is used for elements such as buttons, labels, dashboards, widgets and reports. The full color palette gives us the flexibility to allow users to customize their experience by selecting a color scheme that suits their workflow and also for showing their data in a useful and meaningful way.

  User dashboard showing all ten colours being used.

User dashboard showing all ten colours being used.

  Users custom label tree

Users custom label tree

It’s also worth mentioning that while there is much debate on whether white is a color, we treat white with equal respect as any other color in Bipsync. We understand that our users require enhanced productivity and ease of use, so we use plenty of white space in order to create a visually spaciousness environment.

  A typical user dashboard

A typical user dashboard

We don’t rely on color alone, given that color blindness is one of the world’s most common disabilities, affecting around 8% of men and 0.5% of women worldwide. This means that we must not only consider the colors we use in Bipsync, but also label interface elements simply and usefully. Take our “New Note” button for example. If we labelled this as “New” it would be confusing: “New” what? While most of us will see the bright green as a primary button or call to action, someone with the most common form of color blindness (Deuteranopia) will see this:

The button is less noticeable, making it harder to distinguish from other elements. For that reason we label things clearly and usefully.

So, color is powerful and selecting the right colors is a task that takes time, but rewards users with a productive environment that delivers meaningful information.

Some tips on choosing colors:

Experiment with colors: Either mock things up in a graphics program or edit your CSS style in Chrome Developer, the latter is great for real usage.

 

Test all your colors: Whether you test among your team or with your users, don’t just stick with your first choices. Find out which works best for your product and continue to test them by looking at your usage data.

Avoid too many colours: Whether you have vast amounts of data to show or a super simple interface you need to keep colors to a minimum where possible. Select your core colors and build out from there. Remember that white is an essential part of any interface and can be used for great effect.

 

 

 

 

Source: https://www.bipsync.com/blog/the-power-of-...