Information Design & Dealing With Color Values

Can optical illusions affect your information design? They sure can, especially when dealing with color. Understanding how colors, especially when adjacent, can affect the display of information is critical to choosing hues, tints, and values for data sets. Let’s take a look at this particular case in which simply switching colors can be the solution.

Challenge: Create an information design that separate James Bond films by aspect ratio.

Data: It turns out there have been only three different aspect ratios used in US theaters since the James Bond franchise debut in 1962. (UK theater aspect ratios may be slightly different.)

Goal: Display the range of aspect ratios in a way the viewer can quickly determine which ratio has been the most dominant, but also to keep the films arranged by year.

Color Palette: We created three different tints of blue to separate the titles. However, you’ll notice in the first screenshot below there appears to be four colors. That’s because, if organized by year, the 1.85:1 titles (the brightest blue) sit next to two different blue values. But the 1.85:1 are, in fact, the exact same color as show in the second screenshot below.

Solution: By using the more dominant (darker) blue for the 1.85:1 aspect ratio, the eye perceives those blues to be closer in value. Therefore, most would view the design to contain just three unique colors rather than four.

We’ll talk more about optical illusions when dealing with proximity, line, and contrast in future design articles.