Visual Hierarchy: Pittsburgh Arts & Lectures
9/10–9/12/2020: Part 1
Research and explore the assigned local organization and the typographic variables “through a set of specific and systematic exercises” to clarify “a message based on the content’s hierarchy”. In my case, I was assigned to the Pittsburgh Arts & Lectures.
To start, I did some research to find out more about who they are and what they do.
Pittsburgh Arts & Lectures was officially launched on September 16, 1991 with a lecture by Annie Dillard at The Fulton Theater in downtown Pittsburgh. Now based in the Carnegie Music and Carnegie Library Lecture Hall, Pittsburgh Arts and Lectures became more known as they connected the people of Pittsburgh with lectures by “iconic authors [such as] Kurt Vonnegut, Margaret Atwood, George Plimpton…etc” over the years. As of now, they present five signature series and do partnerships with schools around the area + non-profit organizations in order to “maximize the impact of visiting authors to [their] region”.
With the organization and content assigned to me (Pittsburgh Arts & Lectures: New & Noted Virtual Series), there are six author speaker lectures scheduled over the course of five months (from July to November). Typically, these lecture series can include anywhere from around 2–10 author speakers scheduled over 5–6 months. In the New & Noted lecture series, its focus is to bring together nationally touring authors with their new releases to Pittsburgh. Among the authors on the roster, I noticed that some of the authors’ books hold concepts that are politically left leaning—with a range of topics from racism to the importance of free expression in order to maintain democratic debate.
3 Adjectives:
After having looked into what the Pittsburgh Arts & Lectures is and what they do, I thought that they were educational, connected, and timely.
Descriptive Sentence/Their Mission:
The Pittsburgh Arts & Lectures connects celebrated authors with the community to elevate civic discourse, and inspire creativity and a passion for the literary arts.
Exploring and Analyzing Hierarchy:
With 8.5 x 11 in. paper in vertical orientation, use the typeface Neue Haas Grotesk with four stroke weight options (Light 45, Roman 55, Medium 65, and Bold 75) to do the four sets of exercises. Content should be in text form, using 17 pt font/21 leading, flush left, rag right and nothing can be changed.
The first thing I did before doing the exercises was to look at the original text first and figure out what levels of the hierarchy there are.
Using green as the primary, blue as the secondary, and orange as the tertiary level, I found the general pattern of the content after highlighting them. Since the focal point of the event was on the authors and their books, the author came before the book, then before the date, and this pattern followed with the title as well.
- Stroke Weights
In the first (medium + Roman) and fourth composition (light + bold), I bolded what I earlier highlighted as the ‘first level of priority”, which was the organization name and the authors. For these two exercises, the light + bold combination contrast was much stronger than the medium + Roman. However, even though the fourth’s hierarchy was much more clear, the bold against the light stroke weight was far too heavy.
With the second (light + medium) and third compositions (Roman + bold), I experimented with emphasizing the different types of information by varying how much information I wanted to emphasize. With the second composition, the varying amount of lines the title of each book breaks the rhythm in the hierarchy. With the third composition, too much was emphasized and made it much harder to differentiate the title of the book and the date of the lecture. Despite this, I found that the light + medium and Roman + bold combinations to be more successful and communicative than the other two composition stroke weights.
2. Linespacing
In the first composition, I split the information by the title + series and the author’s lectures. This created clear separation between each lecture and its date even though the Roman stroke weight was so thin. One issue with this composition is that there is such a consistent rhythm with the author, book title, and date that the organization and event blends in with it. Its distinction with the author lectures becomes too weak, making the hierarchy less effective.
In the latter two compositions, I used the medium stroke weight while experimenting with where add a separation in the content. For the second one, I attempted to separate the dates from the author and their book to see if it would help the dates from being blended in with other information. It did work, however, the consistent leading/rhythm throughout the text made it hard to differentiate which lecture the date belonged to. In the third composition, I applied the same layout as the first composition, only adding an additional linespace between “Pittsburgh Arts & Lectures” and “New & Noted”. This was an attempt to break that consistent rhythm with the first composition, only to find that the linespace was too wide and it made the organization title look too lost and alone.
3. Horizontal Shift: Two Flush-left Margins
I first attempted this exercise with a lighter stroke weight (Roman) to see if it has an effect on readability. In the first composition, I indented the book titles while leaving the author title and date untouched. With the title + series name, I only dented “Virtual Lecture Series” because it was less significant than “New & Noted” to “Pittsburgh Arts & Lectures”. The issues with this layout is that some of the book titles take up more lines than others, making the overall hierarchy look like it has no structure. It is also hard to see which date belonged to which lecture. In my second composition, I tried to emphasize the dates more, but the similar issue of some book titles being longer than others made the composition look like it has no structure.
In my third composition, I only indented the details while keeping the main title (Pitt Arts & Lectures) and authors untouched. To me, this was the most effective composition as there was a clear hierarchy between what was important and its details. Even though this didn’t fix the issue of not being able to differentiate the title to the author lectures, it still fixed the issue of the composition looking like it had no pattern/structure.
4. Horizontal Shift: Three Flush-left Margins
With three horizontal shifts, it allows for more options of clearer hierarchy. In the first composition, the horizontal shifts were used too liberally to make a distinction between each piece of content. This made the overall layout appear too chaotic and hard to understand.
In the second composition I made, I indented the lecture series names and then indented all the author lectures under that. Even though the title is clearly differentiated with the author lectures, it became too hard to tell how many lectures there were and which lecture is which. As such, I grouped the organization name and lecture series name together and used horizontal shifts with the book title and date under the authors in my third composition. This made it clear what information was under which authors lecture while also differentiating between lecture and event names.
Combining Stroke Weight + Other Exercises:
After reviewing which compositions of the exercises were more communicative/effective, we were asked to combine stroke weight with either margin shifts or linespacing in class. This was to see how we could incorporate stroke weight with our previous exercises to further the hierarchy within them.
9/15/2020: Part 2 Color + Scale
Overview:
- Picking one final solution from the previous exercises, explore color and how it could help with hierarchy.
- Can try color with type, background or both.
- Then, experiment with scale (two stroke weights only).
- Can try changing the order of the content as well — go bold.
Color:
To start, I cut out various little pieces of color from a magazine. After that, I took each piece and tried to pair them up into clusters of color to draw out potential inspiration for what I thought could be applied to Pittsburgh Arts & Lectures. The palette generated on Illustrator above were inspired directly from the magazine. Something I noticed when curating the digitalized color palette was that how much space (contrast by extension) each color takes can determine how readable each element is on the page.
In addition to the magazine, I also looked at the Pittsburgh Arts & Lectures website. I found that the color palette they follow on their website usually consists of a bright/saturated accent color against the white background. With each program/lecture series, they assign a different color to differentiate and color code it. With New & Noted, they used a bright green that portray a sense of “new and fresh”. I personally feel like this falls in line with what New & Noted is about, which is to bring nationally touring authors together to Pittsburgh with their newly released books.
Color in Text:
- Helps visualize how a single color can strengthen hierarchy.
- Looked at different colors with the same brightness shown in the website.
Color in Background:
- Looks at how color can create a feeling of a certain thing, place, or event.
- Colors turned out to be less saturated than expected, however, white words would be hard to see if color was extremely bright.
Besides looking at what the website did (bright colors + white background), I also wanted to look at the other end of the spectrum: the darker colors. In the homepage of the website, there was an image that portrayed what the venue looked like when a lecture was in session. The dimmed lecture hall prompted me to experiment colors inspired by the lecture setting rather than what feel I got from the website design and branding (the Pittsburgh Arts and Lectures logo is a sky blue).
Something that I have noticed after printing out a few of my prints is that it printed darker and desaturated. As a result, one of the purple, ‘darker’ compositions printed out more gray like and made the overall poster feel more muted.
Scale:
Critique:
- Play around with color more — how can you use two colors?
- Be more bold with scale explorations, challenge the margins
- Try emphasizing other things besides the content—bold+scale the authors instead of the main title?
- Play around with smaller point fonts, should try go smaller than the 17 pt font
- Title breaks— think about how spacing out the words can affect how it is being read: “Pittsburgh, Arts and Lectures” “Pittsburgh, Arts, and, Lectures” “Pittsburgh Arts, and Lectures”
- Which of the colors “feel like the literary arts?” What type of energy?
- Try to avoid vertical orientation of text, can be hard to read
- Don’t make type hard to access, but also play with movement and action
Trying It All Again:
After seeing what others had done and going through critique, I realized that I haven’t been playing/exploring around enough. I was also unhappy with the final solution I ended up picking as it felt a bit too constrained when I tried to break up the text and move it around. As such, I picked a different solution from the previous exercises and attempted to apply color and scale again.
Some notes:
- Using a layout with line spacing doesn’t make the text too dense on the page, more breathable
- Emphasizing “New & Noted” adds more intrigue than “Pittsburgh Arts & Lectures”
- Warmer colors like yellow, red, and oranges feel more welcoming and less edgy(??) — what I associate books and literary arts with.
9/20/2020: Part 3 Image
Overview:
- Using an iteration from the previous exercise, consider how the use of an image can further communicate the message of the content.
- Image can be a photographic or graphic (illustrated).
- Image can cover entire page or sit behind type, explore how you can include this into the page.
Brainstorming:
- Adjectives: educational, connected, timely
- Plant imagery: connected life, new, growth, green, a nonliteral way of representing Arts & Lectures
- Library: more literal representation — new books.
- Hands, String: connectedness, very human.
Plant Imagery:
While using stocksy.com and unsplash.com, I came across this very mellow and clean image of a plant. The image itself is very simple, the light gray background along with the few sprigs of the plant gives the page a very minimalistic feel.
- Orange and the green looks harmonious with each other, orange brings attention to emphasized content but doesn’t clash with the green.
- 1st composition: author lectures split into 2 and 3 feels unnatural with uneven number of lectures, orange clashes a bit with the upper sprig, overlap is not as obvious.
- 2nd composition: black “New & Noted” type makes the text to image integration more obvious, author lectures are together in a chunk by itself, content is read more clear.
- Theres a big area of negative white space in the center of the poster however.
Cats Cradle:
Notes:
- Red pops out and puts emphasis on the title, however, the redness from the hands and arm draws some of that emphasis away.
- Image shows meanings of connectedness with the string, however, overall concept of image doesn’t speak “Pittsburgh Arts & Lectures”
- Personally like how the “New & Noted” is working with the strings into the image itself.
Library:
With this iteration, I wanted to do a little more than add text to an image. As such, I played around with blend modes and overlays.
First Composition:
- Color and scale of title brings effective emphasis to it even with so many things happening around it.
- Using the luminosity blend mode on the image made the image feel very book/newspaper-like.
- Orange-yellow background looks like parchment.
- However, the background is a bit too orange, blends in a little too much with the orange accent texts.
- Orange rectangles creates leading lines around the poster.
Second Composition:
- “Mo Rocca” gets special treatment due to the negative space around it.
- Although small, Pittsburgh Arts & Lectures draws in the most attention also due to the negative space surrounding it.
- Overall composition is ‘flatter’ than first one, no leading lines.
___________________________________________________________
General Critique from Peers and Vicki:
- “If first composition of the library image was the cover of a book, the second composition variation of it would be the inside of the book.”
- Person in the image evokes a sense of wonder: “What is new? What’s more to explore?”
- Good use of space, eyes can take in everything.
- Already on a good start, leading lines are effective.
- Tighten the clusters on the poster! Tighten everything! (Library poster)
- Use grids to help further structure all the text, adds organization.
- Look into metric vs optical kerning.
- Think about adding a descriptive sentence that help make what the poster is about clearer to viewer.
- Remember to not over spoil/overwork the tweaking and details.
9/24/2020 Final Iteration:
Taking into account of what Vicki and my peers have said, I ultimately decided to continue working on the first composition with the image of the library.
To start, I created a few grids to see what I can use to align everything better.
I ended up following a 12 column grid because I didn’t want all the text to perfectly line up with each other, I wanted to keep some aspect of asymmetry while tightening everything structurally. Luckily, the originally placed text already aligned very close with the grid.
Besides the grids, I also looked into adding a descriptive sentence as suggested by Vicki. She suggested looking on their website and use something like: “Something for every reader, writer, and listener.”
After exploring various placements of the descriptive sentence, I ended up moving the “Virtual Lecture Series” above the author lectures and shifted the sentence above the website. I picked this layout because I felt like the sentence further introduces/clarifies what the event is about and links the viewer to the official webpage + tickets.
Final Critique:
Brett:
- Image itself is pushed into the back of the poster, image is not what draws you in.
- However, the colored boxes help frame the text with the image, helps with hierarchy.
- If I had more time: recommend playing around with even more images.
- Poster is very geometric, consider playing around with more shapes if I had more time!
Elena:
- There’s something different with the treatment of the image compared to other posters.
- Something nice about the rectangles is that they aren’t over the board.
- Color selection is nice.
Reflection:
Despite the fact that this project whizzed by, I still personally enjoyed learning more about software, type, and hierarchy. Even though the first few layouts of my poster with imagery was mostly (I admit) eyeballed, I feel like Vicki’s suggestion with using grids really helped me further understand why grids are useful. Using grids and guidelines can help make your poster look and be more structured, even if the core of it is based on asymmetry.
Besides this, I realize that my poster isn’t very noticeable far away. There’s a lot of things going on in my poster and the words that you can see from 5 ft away (New & Noted) doesn’t really tell much about what it is—especially compared to other people’s works during the critique. Even though that may intrigue some people and encourage them to walk closer for a closer look, the light background color makes it a little hard for it to get noticed in the first place. If I had more time, I would definitely take Brett’s advice and look into playing around with more shapes and images that could potentially create an even more effective poster.
