Click on the image below to view the infographic in a separate tab.
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.
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.
We browsed books and online references to get a stronger idea of the information space we wanted to represent.
We sketched low-fidelity versions of our UI in order to make important decisions before designing and coding the infographic.
We chose popular art pieces that we believed, based on research and visual impact, to be representative of each movement.
The color palette for the infographic was extracted directly from these quintessential pieces of art.
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.