Learning in public

This week we learned about composition, and were tasked with creating a design for a personal business card. I do data analysis full-time, but I’ve been moving toward data visualization at ITP. I knew from our typography exercise that I wanted to use Raleway for the font. As an initial step, I printed out my name and information in a few different point sizes and weights. I hoped to get the process of analysis and visualization across, and to showcase a few different projects, but showing just one was plenty of work. There are many components of a good data visualization that don’t work well on a static and small business card, so I abstracted the elements to tell a story.

The final version:

In earlier sketches, I developed the “disorganized data” to “organized data” visualization, but I wanted it to relate to something real, meaningful, or something I’d at least worked on before. I explored the idea of using data from a map of NYC recycling I made last semester, or a project I had done on women’s representation in government. I moved away from the women-in-government idea after I didn’t find a good way to summarize the data (for now). There are 96 countries that have more women in their respective parliaments than the U.S. does!

My final idea was the connect the data on the front of the card to the community districts in NYC that I had mapped for the recycling project. The bars organize the community districts by borough. It seemed like too much to include words and numbers on the back, so instead I abstracted the outline from the base map, and included a link so curious people could check out the entire thing. The colors of the boroughs on the front correspond to the outline of the colors of the boroughs on the back. I used a diagonal line to take advantage of what we learned in class about composition: that the eye moves from the top left and the weakest portion is the bottom right. I extended the line to the back, hoping to convey that this is the logical 3rd portion, and that all the parts are related. Printing, folding, and securing the front and back with surface mount was another challenging part that resulted in some imperfect cards.

Some good feedback I’ve gotten since showing the final product around is to add a QR code to the back that links to the map, or to outline each of the community districts in the borough color. They seem like good ideas to explore in a future version!

Color Hue Test

Color palette of food/drink before and during ingestion

For the color palette of my life I chose to photograph everything I ate and drank for about 75 hours. I chose food and drink partially because I was concerned that this would end up being a project about my office environment, but largely because I’m somewhat fascinated with the phenomenon of people photographing food and presenting it on social media. Sometimes I do like looking at people’s food (I have instagram-searched dumplings, for example), but a lot of the time I find it unappetizing. Also, since people are performing on social media, the food they post is selected based on various criteria (deliciousness, trendiness, etc) depending on the person. I wonder what their diet might look like outside of the curated version they present to the world.

I wanted a full data set of everything I ate and drank, but since photographing my food before eating it isn’t part of my eating ritual, I usually remembered this project some (or several) bites in. For the purposes of the assignment, which is actually about color, I also eliminated some ‘duplicates’ (my second cup of coffee/water from the same mug). Creating the composite image made the sad sequence of take-out apparent, but was an interesting color study. In isolating the colors themselves, which are mostly brown-orange, I became a bit nauseated.

I don’t usually eat sour patch kids, but I thought it was interesting that this, the mango, and the tomato on my bagel were really the stand-out, brightest colors. I think this would look different at the beginning of the week, when I have more mental energy to devote to eating vegetables, or in the summer, when produce surrounds me more. I’m not particularly proud of my role as busy-metropolitan consumer in the mess that is American food culture. Perhaps this palette is another visualization of problems related to it.

While adopting the practice of photographing food, I went to see Ukeles’ Maintenance Art exhibit at the Queen’s museum and found these standard colors for glassphalt, the processed pieces of recycled glass that are added to asphalt. Inspired by the process of transformation that they represented, much like the consumption of food, I applied my color palate to an image of glassphalt.

Standard glassphalt colors – I would like to research these more but google wasn’t a helpful start

I focused on a brown of which I think there were varying shades and tints in my diet, with small amounts of the brighter colors I ate.

This week was a challenge since I started out knowing nothing about typography or illustrator, but I considered it a cool opportunity to analyze fonts I like and have used in the past without thinking about why, and a good chance to practice very useful software. I’ve had to choose fonts for web projects, so in addition to understanding these choices differently, I was also importing them for use in a very different environment (illustrator, instead of a css file).

I realized very quickly that I don’t like to see my name in sans serif fonts because I’ve always put a cap on my J… I didn’t consider the cap a serif I was led to believe my whole life that this was part of the letter. I’d also never liked the roundness of the J in cursive and generally don’t like when it descends too far past the baseline. I also found some fonts do strange things with the dots on i’s and j’s, which very important in my name, and eliminated fonts where the dots didn’t seem to align with the rest of the letter. I also assessed fonts based on the distance between the J and A in my first name, finding this is often not uniform (although I did take the opportunity to experiment with kerning in illustrator). I chose to display my name in all lowercase or all uppercase since I’ve come to learn I strongly prefer a lowercase j, but also find it useful to assess the all-caps version.

My name in selected serif fonts:

 -slab serif, geometric, short shoulder on the r (I would not use this if my name had an R in it)

-transitional, round terminal on J

-another slab font, finer stroke, is that a spur on the N?

My name in selected sans serif fonts:

-grotesque/gothic, uniform weight

-similar but more oval, more stylized terminals

-fine stroke weight, diagonal stress and short finial on e

And all of them together:

The Word as Image exercise was a great chance for me to learn tools available in illustrator both for creating images and manipulating those found elsewhere.

inspired by https://www.pinterest.com/pin/538320961689783780/ and with ‘ree’ in Apple Chancery

manipulated from image from http://animalia-life.com/coloring/snails-coloring-pages.html

and simply…

Roboto condensed, and a figure placed to suggest distance.

I was looking through old movie posters when I saw this one for Harold and Maude that I hadn’t seen before. I found a different version that also included the sunflower motorcycle in English, but from what I could tell this one and its variations were used for a European audience.

The blocks of text make the poster seem to have a square grid, though could see an argument to be made for one that runs along the lines of the motorcycle. The use of negative space emphasizes the three areas of the poster: the title, the image, and the credits. The background is also subtly given some texture with a paintbrush-like effect in a slightly different tint of dark blue.

The bright colors contrast the dark blue space to draw the eye first to the bright yellow title and the orange-pink sunflower wheels. In terms of hierarchy, the next points of attention are the smaller but also vibrant details: the figures on the motorcycle in red and yellow, then things like the plant riding on the back, the noose around Harold’s neck, Maude’s socks, and “Police” written on the bike. It’s also a compelling and funny image that reflects the zany, dark humor of the movie. Last in the hierarchy are the production credits on the bottom of the poster.

The poster uses two sans serif block fonts: Newhouse (I think condensed and bold) for the title and varying sizes of something like Gothic. I searched around but couldn’t nail down the exact font used here.

Edit: After using alternative methods to try to find the title font, I still found the title font to fit the best. The height of the bar on the A, the shape of the O and U AND D all seem right. Many similar fonts had very different M’s… I could see an argument for the leg of the R perhaps not being quite the same. After spending more time looking at font, the kerning between the U and D in “Maude” and the O and L in “Harold” became quite bothersome.