dataviz2.png

History of Modern Art

 

The Evolution of Modern Art

Enjoy the awesome paintings of famous art movements over 1870 - 1932

 

We are doing a gallery page showing the famous paintings of 9 art movements in modern art from 1870 to 1932.  Many people find art is professional and abstract, and far away from their life. However, paintings are treasure in human history and those awesome work should be accessible to everyone.

We therefore want to create an immerse and exhibitory experience for normal audiences to enjoy awesome artwork from those art movements, and attract their interest to learn more. After drawing three versions of wireframes, we eventually decided on developing an interactive website to introduce the history of both art movements as well as the famous paintings. 

In the project, I was In charge of the data collection, web development and assisted the UI designer in part of the visual design.

My role:

Front-end Developer

Time:

Mar 2018 - May 2018

Skills/Tools:

HTML/CSS/JS, Data Viz, D3.js

Team Member:

Tianmi Fang, Chenxin Wang

 
201.jpg

Data collection

We searched for 9 art movements of modern art from 1870 with 20 major work for each:

Impressionism/Post-impressionism/Fauvism/Cubism/Expressionism/ Dadaism/Constructivism/Futurism/Surrealism.

Source:

  • Wikipedia and, Museums and art gallery websites (e.g. MoMA), Google Art

  • Python crawler

 

Highlight Features

ezgif.com-video-to-gif (1).gif

Users could press the right key on the keyboard(->) and control the little girl to walk along the timeline. One row will be shown as she moves forward.

Each page will display 20 pieces of artwork. The tooltip would show the name of the artwork.

ezgif.com-video-to-gif.gif
Screen Shot 2018-10-07 at 8.54.00 PM.png

The detail page shows a bigger image to audience and tells the story of each piece of artwork.

It includes the painter, year, dimension and a brief intro.

The final page shows the size of the artworks in each art movements. We tried to analyze if the average canvas size is different in each movement, unfortunately, there are no significant differences. But we still figured out in certain movements such as fauvism, the canvas size is much bigger than the others.

Screen Shot 2018-08-23 at 9.17.18 PM.png
 

Behind the Scene

180 pieces of artwork and 14000+ words description

 a sample of our dataset

a sample of our dataset

9 movement pages design

We chose a master color for each movement.

ezgif.com-video-to-gif.gif
 

Reflection

Through this project, I got experience in the following aspects:

  • Learn D3.js

  • Deep understanding and hands-on experience of HTML/CSS/JS

  • Visual Design