My Visual Map of a History of Art Education

Summary:
This semester, one of my greatest challenges was to learn how to synthesize all of the readings and lectures in my history of art education class in one cohesive map. I had originally done a map on paper but was dissatisfied by the limitations of the size and constraint in holding info. I’ve also realized that when I was looking up information on art education, there would be at least ten tabs open on my browser. I knew there was a way to make the experience in learning and retaining information a lot more efficiently and in a more enjoyable way,  and so I thought about creating an interactive map for my final project in this class. The goal was to create a map that I could access and change as often as I liked. I imagined this map as a resource for myself and others who are interested in the history of art education. I began in two directions, first starting with historical movements that shaped art education and then I decided to draw out my place within the history of art education, guided by three questions, “Who am I? Where am I coming from? Where am I going?” From there, I was able make meaning and find connections between how my own personal history and values of art education and the larger local and global context of the history of art education.

Inspiration:

The genesis for this map came out of Herbert Spencer’s question, “what knowledge is of most worth?” (Broudy, 1982, p. 574) because the question prompted me to critically think about art education in relation to other general education subjects. That question was posed during the early 19th century, which was heavily influenced by industrialization, science, and Social Darwinism. That was a time period of crisis and also technological advancement, not unlike today where we are experiencing a similar social-cultural unrest and another burst of technological advancement. So, I was compelled to ask myself, “how do we shape art education so it can fully support the next generation to be active creators of a just and compassionate multicultural society”? Do we integrate more courses in creative technology and build bridges between art classrooms in school to the local communities? And lastly, who is still under or not represented in the historical or “grand” narrative of art education? In doing this map, I am reinvigorated to research more about women of color who were art educators from California, such as Ruth Asawa.

Another inspiration for this map came from MoMA museum educator Sara Torres’ spiral map – http://www.saratorresvega.com/2016/11/art.html . I liked her reinterpretation of history of art education in a nonlinear way through spiral shapes.

I was also inspired by the user experience of of MoMA’s online exhibition on “Century of the Child”, which allows the viewer to explore interconnectivity between modern design and modern childhood in a seamless, cohesive way.
https://www.moma.org/interactives/exhibitions/2012/centuryofthechild/#/

Research:

I used Illustrator to create the graphics and Brackets to write the code.
I referred to https://www.w3schools.com/html/default.asp for HTML, CSS, and Javascript help, though most of the technical help on the coding for creating this interactive map came from Zhen Zhen.

Process:

The process was pretty challenging — I don’t come from a background of web development but I have always wanted to learn so this was a good, high-pressured opportunity to do so. There were many things I’ve learned so far as I went through trial and error.

I learned the difference between HTML, CSS, and Javascript in Brackets. From my understanding, HTML is like the skeleton of the website, CSS controls the style or look of the website (font color, background color, etc.,) and Javascript controls the interface and activity of the website (hovering, etc.)

Screen Shot 2017-12-09 at 9.49.00 AM

I also learned how to inspect the code and identify the polar coordinates and adjust the width and height of the text container and move it around.

Screen Shot 2017-12-20 at 2.10.04 PM.jpg

I understand that there’s a steep leap learning curve to this, and so I didn’t like how cumbersome and time-intensive the process (and it needed to be that way) was as I learned about the different elements of coding and how they corresponded to one another. But, once I got the hang of figuring out how the coordinates work, it was really cool to see how I can control the specific locations of the text and the size of the container. It was also great to explore the option of embedding the text into the graphic.

More to learn — in doing this, I discovered the interactive map will be constrained to screen sizes (something that I had trouble reconciling with in a visual sense). This led to more questions: what happens if this was projected on different browsers, desktops, tablets, and mobiles? How do I make this map clickable so that I can put more information in different tabs, or add links that point to other resources relevant to the history of art education? I do want to make this accessible to public eventually, so I’m excited to learn more about front-end development!

Visual Documentation:

Phase 1 – designing the graphics in illustrator

12

Phase 2 – Drawing connections between my art education history and the larger global history of art education
Screen Shot 2017-12-13 at 5.46.03 PM

Phase 3 – realizing that I could embed the text in the image instead of awkwardly having it sit below the image. I went back in illustrator and made the graphics larger and moved downwards, and left a space for the container of text.

visual map larger for web no lines-01

Phase 4 – Finalizing where the container went, changed the container background to white to make it blend more with the overall aesthetic, and chose which graphics I wanted to have text show up.
visual map larger for web with lines-01

Phase 5 – was able to pin point specific graphics and made the corresponding text show up; I also changed the font color to blue.

psmap

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s