The Visual Hierarchy of Pittsburgh Shorts Poster
Explore typographic variables in clarifying a message based on the content’s hierarchy
Objective: Create a poster that explores typographical hierarchy accordingly
Experience the Pittsburgh Shorts
My assigned task on the last week of October was to go to the opening night of Pittsburgh Shorts, a local short film festival. I visited Southside Cinema with Jina and Annalisa on November 1st.
History
Pittsburgh Shorts started in 2017 and has been occurring every year since then. This year’s Pittsburgh Shorts is from November 1st to 7th at Southside Cinema and is showing over 110 films from 33 countries. Pittsburgh Shorts is also showing local Pittsburgh or Pennsylvania related films, such as Dream Homes According to Kids: Milo and The Return. The tickets $20 for the opening night and $10 for other nights. The audience demographics is mostly older Caucasian male and female, mostly forty and over.
Experience

The first thing I realized when I walked into the theatre to retrieve my ticket was that Pittsburgh Shorts had a lot of brochures. The volunteer workers there handed me a lot of papers with various informations. This made me wonder if there would be an efficient way of combining the information into a single brochure, as it is hard to keep track of scattered information across different pamphlets.



I really enjoyed the opening night of the short film festival. The films were carefully crafted and had quality content. During about hour and fourty-five minutes of showing time, seven diverse short films were played. After followed a QnA session by a former Steelers player Rocky Bleier (the man in the photo!), the producer of the documentary about Bleier, a child name Milo who featured his voice in one of the short films, and the producer of that film. Then was finger food catering. The entire event took about three hours and I went back home around ten. If it did not have the followup, however, the film would have taken less than two hours.
Visual Hierarchy Exercise
Assignment 1: StrokeWeight, Linespacing, Margins
After visiting the theatre, I worked on my visual hierarchy assignment. This assignment allowed me to explore information hierarchy of preexisting text by manipulating three different features of text: stroke weight, line spacing, and horizontal shift (margins).

The image above shows the sample of four different exercises of I had to complete for the assignment. One manipulates the stroke weight, the other line spacing, and two horizontal shifts. I ended up creating five variations per exercise, making 20 different version that explore the hierarchy of text. (View full PDF exploration of typographic hierarchy here.)
Assignment 2: Colors
Before getting the assignments, Jina, Annalisa, Sarah, and I got into a group and created a list of words that would appropriately describe Pittsburgh Shorts. The list we have created were variety, emotional, passion, empowering, community, contextual, approachable, relatable, casual or grand (depending on the night), personal, friendly, honest, inclusive, expressive, unique, modest, supportive, goal-driven, diverse, dense/compact, local, comfortable, and vibrant. These words are supposed to aid our direction for the second assignment.
The second assignment of the project is to explore hierarchy using color combinations. To understand the existing limits of CMYK print, I ripped out colored pages from multiple magazines and organized into different color swatches. After exploring with over 30 color strips, I landed on the color combinations below.

Based on my color exploration, I decided to go with the color palette on the top right color but increase the saturation of colors. In order to achieve this goal, I digitized my color process and created color swatches on adobe illustrator.

The set of colors on the very left of the file are spot colors obtained from the magazine cutouts. After getting the basic color scheme, I played around with hue, saturation, and luminosity using adobe illustrator’s color feature. After test printing and analyzing how the colors look on paper, I decided to go with the colors on the right that have box outlines. The colors I have landed upon are #d63854(magenta), #db6f48(orange), #f1ddbc(beige), #698d43(mustard yellow), and #317461(green). I changed the file type to RGB from CMYK due to display color issues.
After settling on a color swatch, I added colors to one of previous exercises.

I realized that creating a pretty color palette and using those colors for text and conveying information are different. Since most of the colors on the color swatch were bold, I first struggled with creating enough contrast to convey information. But the end, I was able to come up with a combinations of colors on the poster that work relatively effectively. While studying color combinations, I discovered that I visually like the contrast and tension of magenta and green. If done well, I think I will be able to create an effective and interesting poster using the two shades. (View full PDF of color explorations here.)
Assignment 3: Scale
The following assignment is to explore hierarchy using scale. To achieve this, I cut the printouts with various size and stroke weight of the informational text. I then reorganized them across a letter-sized paper, exploring informational hierarchy. The image on the bottom are a few examples of my work during this exercise.

Similar to the first and second assignment, contrast is very important for this exercise. I learned that balancing places with high contrast and lower contrast is important to achieve a well-designed poster. (View the full PDF of scale explorations here.)
Afterwards, I digitized the selected scale work using adobe illustrator.

Since appropriate amount of contrast is the key for this exercise, I ended up creating most variations using Roman 55 and Bold 75 Neue Haas Grotesk. Since the assignment got more freedom while working with scale, it was interesting to analyze the personalities of each poster. (You can view the full PDF of digitized scale explorations here.)
During class time, Vicki suggested the class to explore more on scale. So I created another set of variations that explore different scale of text. I stuck with Roman 55 and Bold 75 for the entire exercise for this iteration.

I ended up making bolder and riskier choices than my previous iteration. Andrew commented that the variations seem clustered without enough white space, but white space problem should be somewhat solved after changing the paper size to 11" * 17". (View the full PDF of second scale explorations here.)
Assignment 4: Images
After completing the scale exercise, I added an image to the text. I understood that the image may change the layout of the text, so I practiced organizing information on one set image.

I decided that color detracts the purpose of text layout because it distracts the viewer after composing two “posters” with colored text. Hence, I only used black and white for text while completing the exercise. (View the full PDF of image and text relationship exercise here.)
After the first exercise, I gained confidence in arranging text according the needs of an image. So I played around with adding an image and forming layouts according to the image.

During this process, I realized that a picture does not have to completely fill the screen to convey similar effect. In some cases, not filling up the entire page with a photo may be even more effective. With that in mind, I went on a search for more photos. (View the full PDF of image explorations here.)
Pittsburgh Shorts Poster
After completing the visual hierarchy assignments, I was expected to choose a direction and finalize ideas for the Pittsburgh Shorts poster.
Image Style and References
For a few days, I was struggling with finding an image that I wanted to use. I went back and forth between images with people and abstract, artsy collages. But after a while, I ended up settling on a specific style of images.

This style of film photography is colorful, abstract, and engaging enough to draw the viewer in. It adds a mysterious aspect to the image, making the viewer question what the poster is about. In addition to the stylistic aspect, I also found that the style does not hint a specific genre of film, which is desirable for this poster design.

Since the image is horizontal and the poster orientation is vertical, I knew that I would have a lot of fun exploring cropping and rotation.
Body Text Grouping & Reducing Text Hierarchy
While working with the images, I realized that I was not providing enough visual cues to separate the film titles. So I created a series of body text layouts to see which design is more effective.

At the end of the exercise, I decided that incorporating both space and a central dot, with providing enough leading allows the viewer to separate the short film titles. (View the full PDF of image explorations here.)
Additionally, my friend told me that the text itself had too many type size variations. She suggested me to reduce the variety of type sizes and prioritize certain information over other. During this exercise, I stripped the colors and the background image to clearly visualize the hiearchy.

I was debating on having four or five type sizes for the final poster, and decided to go with four different type sizes. The part that I have been most concerned of was the time frame (7pm and 9pm) within the poster, but I decided to emphasize the time frame using color. (View the full PDF of image explorations here.)
Image + Text

My early explorations included cropping and rotating the selected image, selecting colors that have enough contrast, and analyzing text–image relationship. At the end, I decided to design the poster using second left image’s rotation / cropping due to reading direction. I then started to incorporate grids and properly lay out the text.
Grids

I used inDesign to explore grids and realized that a 12 column grid is more suitable for this poster than an 8 column grid. An 8 column grid would force the title to be in the center, reducing the type size. I tried to work with a 6 column grid and discovered that anything below an 8 column grid would jam the information on the poster.
Layout Variations
While talking to Vicki about my project, I realized that I have been stuck in the same layout for recent variations. In order to break the strict layout, I completed a little exercise that explores different layouts.

Reflecting upon the new layouts, I realized that I like the image squares that fill the page. Therefore, I decided to go towards that direction. (View the full PDF of layout variations here.)
Choosing between the two
After spending more time on the posters, I landed upon two final designs.

I was honestly more visually drawn to the poster on the right due to the ways color and text interacted on the page. However, the left poster has clearer hierarchy, allowing the viewer to absorb information at a glance. (View the full PDF of the two versions here.)
Final Poster Direction

For the final direction of the poster, I used a 12 column grid system and 3 varying type sizes. I enhanced simplicity by using a point color of red, accompanied by a very dark brown and white. This clean and simple layout uses white space and image to grab the viewer’s eyes.
Final Poster
For the final poster, I adjusted location and boldness of the text. See below for the final result:

The actual poster file has brighter colors than this. View the accurate color PDF version of the poster here! I am satisfied with the way it turned out and am exited to be done with the project. I look forward to the typography project and applying the new knowledge into the magazine spread!
