Code Climate Icons

Building a visual language for tertiary actions.

Code Climate Icons

When creating a user interface for a web application, there are many different types of interactions. Primary, secondary, and tertiary interactions. Primary interactions are usually in the form of blue buttons aligned to the left side of the screen to create a clear left hand scan line. Secondary actions most of the time are gray buttons or text links inside text. Tertiary actions are tricky, since they need to sit back behind everything, yet still be visible and identifiable enough to have a user recognize and interact with them.

We identified a plum / purple color that was able to achieve this look inside the Code Climate interface. The purple was close enough to our standard link blue that a user would recognize it as interactive but enough differentiation to not be confused with a primary or secondary action.

Final ticket icon design.

Designing a Ticket Icon

The exclude pattern icon came pretty quickly. The ticket icon was another beast. If you look at most ticket icon designs, they feature a very heavy, bulky ticket that is turned 45 degrees. A ticket icons needs to be turned at an angle since if it is aligned upright it looks like any sort of peice of rectangular paper.

A ticket's defining feature is normally a ragged edge at one or both sides. Large renderings have no problem showing that unique and defining detail, but at small scale you lose that quality. The successful design that I came up with features a "T" that reinforces ticket at small scale.

Preliminary ticket icon iterations. It is hard creating a ticket icon that scales down well.

When you have a stack of buttons in very close proximity it is important to refine the interactions on hover and active states. Here are some iterations:

Working through all the different icon states.
The final designs highlighted in the Code Climate interface.

Related posts