Confused as to what a particular design element does or is connected to?

Use the spotlight. That’s that eye icon to the right of a design element.

 

Here’s a rather dramatic example.

You are asked to fix the calendar below. If you are not so familiar with the CCB.events design elements, the amount of purple makes it difficult to understand what is connected to what. Enter, the spotlight.

***Notice: There is no line above September 10. More about that soon…***

We begin by hovering on [mouseover] the area to the right of Current day accent. The spotlight appears (eye icon, yellow box below).

Clicking on the spotlight causes a circle to appear somewhere on the calendar (yellow box below). Now we know that Current day accent is connected to this line on the calendar. Let’s change its color.

The color is now changed from purple to yellow. As this design element no longer fades into the background, so we can see it.

Design