The Surprising Parallels between Oil Painting and Product Design

7 tubes of oil paints. Photo from Susan.

Years before I get to call myself a ‘Product Designer,’ my parents sent me to classical oil painting lessons. When I heard about these art lessons, I thought of my box of 128 Crayola colors. All the colors, all of the creative expressions! In reality, I showed up to Lesson 1 and found just 7 tubes of paint: These were the constraints set upon me and they were not negotiable. As a color loving doodler, I was quietly livid by these constraints.

A quick crash course in mixing colors with oil paints

All the painters trained by this instructor had to create the entire spectrum of colors from 7 roster colors: a dark blue, a blue green, a moody crimson, a pure red, a bright orange, a lemon yellow, and a humble white. To make things more dire during Lesson 1, we were only allowed to use the Green, Crimson, and White. And, surprisingly, we were going to make Grey.

GIF from Susan demoing the oil paint color mixing process.

This surprised me because it was a known fact Grey came from Black, not Crimson nor Green. And remember, Black wasn’t in the original set of roster colors. Intrigued, I was waiting to hear what was next. It turns out, we will make Blacks from mixing two complementary colors.

Technically, these are all Blacks and Greys. Photo from Susan.

The magic began there. Instead of purchasing Black, mixing our own Blacks meant we could control the ratio of color in our Blacks. One Black had a proportion of 2 parts Green:1 part Crimson and another Black had 1 part Green:2 parts Crimson. You would add White to your Blacks to get a Dark Grey, and then White to the Dark Grey to get a Mid Grey, and then finally, White to Mid Grey to produce Light Grey. Shades of the same color, dark to light, were called values. Two differently proportioned Blacks resulted in two kinds of grey: a cool colored grey and a warm colored grey. Intuitive to their names, the cool color grey had a blue-ish tint while the warm color grey had a red-ish tint.

Applying lessons from parallel fields

Sometimes when we pick colors while designing, it may seem random. The thing is, you will see principles from warm colors, cool colors, and values applied in interfaces. Through this lens, we can examine why certain choices work really well.

Inspecting the Typography Color. Screenshot of Treehouse Community:

For example, everywhere on the Treehouse site the typography is set in grey. However, these greys were not purely neutral. The typography is set in dark to mid value cool greys — This makes the typography complement well amongst warm colored calls to action which were often bright green, sometimes yellow or red. Warm colors come forwards while cool colors fall back visually.

Inspecting the Background Color. Screenshot from Treehouse Community:

Also, sampling the background, you can see that it is too a light value cool colored grey. This makes the neutral colored white panels stand out more from the page. Furthermore, the visual experience is unified because the background and typography colors are within the same family. Details such as these are what makes experiences feel lush without having to add too much visual complexity.

Similarly, when we create assets for student projects, we have the freedom to create whatever visuals we’d like, but our visual design choices tend to follow the same principles.

Visual Design for student project Macky’s Minerals by Chris Michel.

For example, Chris Michel designed the assets for an application used to track a Minerals collection. It uses a monochromatic palette (sampled from a crystal!) and has dark, medium, and light values applied appropriately on interface elements to bring objects forwards and backwards in space. Darker values come forward while lighter values fall back. The exception may be in an inverted interface such as the command line, but you would still want to keep the readability high by applying the appropriate values. You can use these color principles to make clear distinctions between the foreground and background. This is important since software products are more accessible when they are readable by all users. A problem which often is fixed by reworking color values.

Constraints and best practices come together

When you show up to work on a digital software product, you are presented with the ability to pick any color. It would’ve been my childhood dream to be able to do this. However, since then, I’ve learned that even if you can pick any color you’d like, you probably shouldn’t. While there are 140,737,479,966,720 combinations of hexadecimal colors, the vast majority of them do not meet accessibility guidelines. In addition to breaking accessibility, these combinations would also likely break our best practices for using cool colors, warm colors, and color values.

One way to make it easier to work with all these colors is to create a common language in the form of a style guide. When I first started working with style guides, it was delightful to open up variables.sass and find things organized similarly to my painting palette.

A typical used palette after a session. Photo from Susan.

On the palette, the left side were my cool colors and the colors would get warmer incrementally on the right. Darkest colors were organized on top and lightest were on bottom.

Screenshot of Text Color values from _variables.sass.

In a style guide, you can get a sense of how things come together in the visual language just by examining the variables.sass file. For example, there’s often a structure that goes from dark to light. The way we use darken() and lighten() functions in Sass are similar to how painters create values in their palettes.

Visual design is often regarded as the least scientific practice in Product Design. It’s thought of as magic, a skill reserved for those who have an intuition for it. This is not true. It can be learned. There are principles that will get you far and measured amounts of mindful practice will fill in the gaps. While I’ve only talked about colors in depth, illustration composition and icon creation are also quite scientific. The principles explaining visually pleasing proportions are rooted in geometry. Vector files are, after all, made up of numbers.

Whatever it is you’re passionate about, it will have a way of informing best practices in everything else you do. Of course, it is not a requirement everyone goes through classical oil painting lessons to become a Product Designer. The important thing wasn’t the lessons themselves.

One of our Treehouse team values is Work-life Integration. Specifically, this means ‘Delight in your loved ones as well as our mission.’ I believe one of our biggest competitive advantages is having folks who are diverse in what they choose to do with their time outside of work. Many of us have families, side ventures, and hobbies outside of a keyboard and screen. The more dimensional the folks engineering your product, the better that product will be. I hope you use this a reason to create more time and space for any passions you may have put on hold.

Susan is a Product Designer on the Engineering team at Treehouse. We’re on a mission to design, build, and maintain the best online learning service in the world. Sound awesome? Join us!

If you enjoyed this post, we’d be thrilled if you clicked the below! And be sure to give the Treehouse Engineering publication a follow for more posts like this one. 👋