Design Lessons & Trends, Marketing & Branding Advice

Design Lesson: Vibrating Color Theory

Vibrating Clockwork

It’s an exciting time to be a web designer. With modern typography, robust design tools, and technological advances, web designers have more options than ever before to design engaging user experiences. With that said, it can be tempting to mimic some of the vibrant color schemes found in print design. It is important to note the distinctions between print and web design. In print, vibrating color is more permissible, even an advantage to making your designs stand out amongst the crowd. In web design its a bit more finicky.

What on earth is chromostereopsis and why should you avoid it?

Chromostereopsis is a visual illusion where the impression of depth is conveyed in two-dimensional color images, usually of red-blue or red-green colors. These types of color combinations appear to vibrate when placed next to each other. This is especially problematic in digital environments. Some colors naturally appear to recede in space, while others seem to float forward. When certain colors are placed directly next to each other and are of the same spatial hue they appear to be moving or vibrating. All colors have a spatial relationship to each other.

What NOT to do:

Vibrating Banner AdArtboard 1spacer

vomit spacer

Color is a Cue to Understand the Space Around Us

When navigating the physical world, color is a natural cue that we use to understand the space around us. In today’s digital world we use color for the same thing. Occasionally, our mind will get hijacked by certain color combinations that just don’t play nicely together. These vibrating color combinations can be jarring, aggressive, and disconcerting. It’s especially important to avoid these color combinations in web design since legibility is critical for both navigation and comprehension.

Key Take-away

In web design, avoid using vibrating color patterns, especially in navigation and call-to-action buttons. Your visitors will thank you!


In Your Inbox