top of page

A Website Prototype for Visualizing Color Palettes from Paintings

16 Paintings  |  4 Artists  |  4 Years

Watch this video with audio to see the final product, or scroll down to see the goals, concept, and process of the project. 

THE BRIEF

Student Project

September 2020

The task for this project was to redesign an existing piece of visualization in a creative and insightful way. 

I chose to go with “Ten Artists, Ten Years” by Arthur Buxton that aims to portray ten extraordinary years of art history (1895-1905) – the Impressionists, Neo-Impressionists and Post – Impressionists which were responsible for a revolution in color. Within this color trend visualization, each pie chart represents an individual painting with the five most prominent colors shown proportionally.

buxton.jpg

Ways in which I think this piece can be redesigned 

This minimalistic & elegant piece by Arthur is beautiful in a way that it enables us to have a quick scan of most used colors, techniques or styles by each artist over ten years. However, this urges me to ask more questions as a visualizer:

1. How efficient is it in conveying quantifiable information to the audience?

2. Can we compare various artists in one particular year?
3. What is the inference that we get from the pattern in color usage?

Though Buxton’s work is impressive due to its minimalism, white space and concept, I wanted to go a step further in giving the audience an opportunity to make comparisons by simple interactive visuals that give more insights about how color was used in paintings over the years.

How I brainstormed about features I wanted my website to include:

Brainstorm_For_Color_Project 2.jpg

concept #1

COLOR BARS

Edited Concept 1.png
  • This visual will allow the users to filter the color palettes used by artists through time (1900-1905), and also by artist. Each "Artist" shows the pictures of the paintings done by that artist during that year, along with its color palette.
     

  • The color scheme has 3 tabs to choose from - All, Warm, Cool. For example, selecting warm will highlight all the warm colors in the spectrum and fade the rest. This gives us an idea about the frequency of warm colors used in that artist's palette in that year.
     

  • The quadrant plots all the colors based on warm, cool, and its respective tints or shade.

UNDERSTANDING THE USER

I'm a paragraph. Click here to add your own text and edit me. I’m a great place for you to tell a story and let your users know a little more about you.

concept #2

HISTOGRAM

Edited Concept-2.png
  • This visual lets the user select a timeline, which then displays the hue usage pattern as a histogram for 6 different artists in that year.
     

  • Each histogram has a tab "Artwork", which when clicked, expands to show the painting used to produce the hue pattern, its title, and the color palette used by the artist.
     

  • The histograms help us understand which colors were mostly used by each of the 6 different artists in a particular year. Here, I have avoided showing a comparison between the artists, as it might be too convoluted for a user to see many buttons, considering the 6 histograms that are already present.

concept #3

COLOR TILES

Edited Concept 3.png
  • This visualization portrays a set of color palettes, with the intention of being compact and minimal. Each palette has 8-9 most used colors displayed in proportion, similar to the concept of a heat map.
     

  • The second visual allows the user to hover on the color wheel and select a color range. This lets us understand how that color range was used by different artists at various time periods. In the visual I have shown, the mid-tones of blues are revealed.
     

  • The last visual allows the reader to hover on it and select the palette, which shows its corresponding painting by that artist in that year.

THE INTERFACES

Homepage.png
The palettes.png
The palettes- color wheel_blue.png
The palettes- color wheel_green.png
Artist + Palette - Gauguin 1886.png
Artist + Palette - Monet.png
Artist + Palette - Gauguin 1887.png
Compare Artists.png

Tools Used: Python, Adobe XD, Adobe Illustrator, Procreate

Development credits: Yuhang Li, AI Skunkworks, Northeastern University

To view the Python code, click here.

Like what you see?
Let's chat.

bottom of page