Posted on

Color Secrets: Brightness

Color Secrets: Brightness

There has been a trend lately in app design where white or very light backgrounds are paired with minimal use of color and flat, simplified shapes. Why this shift when sites had been trending darker and darker? Is it the Star Wars reboot? A renewed interest in futurism? Or are we just all tired of looking at gray or black displays?

As more and more sites provide lighter sites or options to choose what backgrounds we want, designers and user experience professionals will need to take another look at how people are using devices as part of their daily lives. People don’t use devices in well lit, climate controlled areas. Being able to observe and take into account the key environments where users are will then have an impact on choices about color including brightness, contrast and saturation.

My personal ideas about why interfaces are getting lighter:

  • usability in all lighting environments (indoors/outdoors, stores with poor lighting)
  • unpredictability of display brightness on devices
  • creating a neutral but positive backdrop for tasks

Usability in All Lighting Environments Makes for Happier Users

While there could be come pop culture reasons for the brave new world of lighter interfaces, when I am transitioning from indoors to outdoors, especially most often when I am outdoors, it is very hard to use apps when the background is dark. This leads to frustration which then leads to me not using an app.

One of my favorite features of the Kindle app is having full control over whether the reading pages are light or dark. Using a brighter, lighter colored background by default makes the transition from different lighting environments a pleasant experience for the user. I don’t have to stop and hunt for my display settings or growl at my phone because its idea of a bright enough screen and mine in full sunlight ARE NOT the same. We are using these devices not just to easily ignore social interactions with family members, sometimes we actually have some banking to do.


A Renewed Focus on Delight and Positivity

There seems to be a psychological component to all this use of brightness and white for interface backgrounds. There is a modern, upbeat vibe lighter interfaces can give off that helps support a positive mood and good feelings that companies are hoping people associate with their products and tools. If an interface can keep a warm vibe and not tip into coming off as sterile and cold, then the careful crafting of a lighter background color and related elements become a part of the experience, letting the tasks the user is there to perform become center stage.


Brighter, Lighter backgrounds Don’t Have to Rely on Display Brightness

Phones eat a lot of battery when the screen brightness is turned up. Like many people, I turn that setting down so I can go without charging my phone part of the day. If an app uses a light background I will have a high contrast experience even with the brightness of the display dialed down. It won’t matter if it is a desktop, tablet, phone or something else – I will consistently have a better overall experience.  It comes down to practical business outcomes really. The less time I am able to use my phone because I have it on a charger, the less I am spending. The easier it is for me to use apps on my phone or the phone screens themselves, the more money I will likely spend.


What Does Brightness Have to Do with Color?

Brightness in color theory terms is the amount of white added to a hue (what most of us think of as a color like red).  When using physical pigments, there are actual thick, opaque substances in white paint (usually titanium white) that permanently impact other colors added to it. Black is made from the physical blend of many colors together. White is the combination of all colors in the RGB spectrum, which is what all device displays use. How does this relate to the brightness of screens or the choices product designers make in background colors? When you dial up the brightness to maximum in a background, it is a way to also portray calm, serenity, confidence and peace. It also acts as a neutral background for other colors. It is a canvas for charts, videos, and interactions. It is also important to take into account the effect that too much white without some tinge or other color or good use of background patterns can have. Too much plain white can make an app or experience seem sterile, especially paired with dark colors and somber images. I think this is one of the reasons we are seeing more and more custom illustrations on websites and apps.


In the End, Our Role is to Make a User’s Day Brighter

The rise of so many different digital devices used daily by a wide range of people has shifted the design conversations I have lately. More and more people are focusing on the imagery and how they feel when using an app or site on a device. Are they frustrated? Did the app make something that is usually difficult or boring easier? Did it save them time or brighten their day?  While changing the background of an interface alone won’t save a buggy or hard to use app, it can be part improving the overall product design. When we support the goals of the user, we make the goals of our companies and projects easier to achieve too. And our days (and experiences) are brighter for it.


Posted on

Five Tips for Creating Better Color Palettes for the Web

Color palettes using simple and complex colors

I’ve put together five tips for creating better color palettes based on a recent talk I gave to computer science students. Faced with working on their first mobile apps or sites, they had never really been given advice on choosing color palettes. I realized this is one of those gaps in knowledge; part of the missing manual of design experience you build over time as a developer or designer. I hope you find them useful too.

Continue reading Five Tips for Creating Better Color Palettes for the Web

Posted on

What Does That Color Mean?

eight common colors with different meanings

It can be hard sometimes to choose the right color or set of colors for a project. Learning what different colors may mean to your audience and matching the right ones to the goals of your project takes research and careful thought. Different shades, tones and tints of the same color can have a very different impact. Today we will explore the Western meanings of eight common colors.

Continue reading What Does That Color Mean?

Posted on

Sketch to Finished Graphics in a Day

case study sketch

I had a problem a lot of designers face. I spend so much time designing other people’s web sites and assorted miscellany that things like the design of my own site tend to fall to the wayside. I had a long weekend ahead of me and a fire in my belly after seeing some of the amazing designs of other people. It was time to take action.

It began with a clean up of the overall layout and template of the site, but I was still lacking an awesome hero header for my home page. After some time spent thinking about what I do and what it means, I was ready to start concepting and sketching.

The full case study is available in the new case study section of this site.

You can see the end result on the home page of the site.

Pretty cool huh?

What frustrates you most about designing graphics like this? Do you get stuck in the concepting phase? Do you start at the computer and spend precious minutes or hours staring at the screen?


Posted on

Finding Color Inspiration in Games

Commodore 64 color palette by Ricardo Cancho Niemietz

Sometimes we need a quick jolt of inspiration to get out of a color rut. I often hear from other designers that they use the same colors over and over again. There are perfectly good reasons why – we may be known for a certain color palette (Nubby and her black, white and reds), or be restricted by brand guidelines or we just gravitate to some colors. While constraints are great, pushing ourselves progressively as creatives means going outside our comfort zones and also challenging standards. Color is a great way to alter mood, focus, and revitalize. Today I’m taking a quick look at three sources of color inspiration with a gaming theme.

Continue reading Finding Color Inspiration in Games