Modern Art Movements Infographic

Click on the image below to view the infographic in a separate tab.

Art Infographic

Skills I used: data visualization, research, design direction, coding

Collaborator: Jennifer Tran

Summary: The Modern Art Movements Infographic was coded in Flex and ActionScript with the intent of dynamically organizing information about modern art to show the connection between art movements. The movements are color-coded, and the length of their bars corresponds to a timeline to indicate how long each movement lasted. Hovering over a movement brings up arrows of influence from and towards other movements. Clicking on a movement brings up a pop-up box with crucial information, such as a quintessential piece of art and key players in that art scene.

Process

The Idea
I decided to make this infographic out of what I felt was a necessity. In a design course I was taking in the fall of 2012, I learned about the Bauhaus movement and its influence on typography. I began researching Bauhaus and other modern art movements, but was overwhelmed by the amount of information available and wanted to understand how the many movements that fall under the umbrella term of “modern art” relate to each other across time, people, and philosophies. I brought the idea to my friend Jennifer Tran, and we began the process of making the infographic.

Research
We browsed books and online references to get a stronger idea of the information space we wanted to represent.

research

UI Sketches
We sketched low-fidelity versions of our UI in order to make important decisions before designing and coding the infographic.

First sketch of initial interface

Screen for clicking on a movement

Zoom in function

Hovering over a movement

Visual Creation
We chose popular art pieces that we believed, based on research and visual impact, to be representative of each movement.

Quintessential pieces of art

The color palette for the infographic was extracted directly from these quintessential pieces of art.

Color palette for the infographic

Coding
Before coding, we wrote out a model-view-controller framework and a finite state machine to better understand how to represent our information in code. The code consisted of many layers, including a desktop with the timeline as its base, the movement icons spread across the timeline, arrows for the hover state, and a component for each movement’s pop-up on mouse-click.

Once again, the infographic can be viewed here.