Women of Broadway: Visual Hierarchy

Project Background:

“Through a set of specific and systematic exercises, we will explore typographic variables in clarifying a message based on the content’s hierarchy. Take your time in exploring each of these variables, so you fully appreciate what they can do. Take the time to look, analyze the results, and respond.”

Analysis of Women of Broadway:

Part One:

Our Tools:

8.5 x 11-inch paper, vertical orientation, content in text form, flush left, rag right. Neue Haas Grotesk Display Pro (Light 45, Roman 55, Medium 65, Bold 75).

Exercise One: Stroke Weights:

We are to begin by setting type with a size of 17 pts and leading of 21. Then, we select certain lines of type to make bolder, basing our decisions on content hierarchy. The full line, not individual words, will be bold.

Hierarchy Analysis:

I started by breaking down the hierarchy of my content into four sections.

1. Obviously, the title of the event should receive the most attention.
2. I then decided that the names of the artists should be the second largest.
3. The dates and streaming location are necessary information, but not needed to draw the viewer’s attention.
4. Finally, the event times and website should be at the lowest level of hierarchy as they are also not necessary for communication from a distance.

Stroke Weights Exploration:

I decided to create 10 different explorations to ensure I covered the spectrum of hierarchy that is achievable with only variations in stroke weight. In every composition, I emphasized the title of the event and then chose to go between either the names of the artists, the dates of their events, or both. Some compositions include bolded times of live streams or the organization presenting the event, but these were no longer communicating effective hierarchy and became too busy. After creating every composition I then printed them out to view them from a distance and understand how they communicated in print form.

Most Effective Composition:

While it is difficult to achieve a lot of hierarchy with the only variation being stroke weight, this composition worked well because of the grouping of lines. Since the title of the event spans two lines, it naturally separates itself from the bolded names of artists. I also created this same pattern of bolding but replaced the 55 roman with 45 light, however, the 45 light was too difficult too washed out when paired with 75 bold.

Exercise Two: Linespacing:

I attempted to follow the same patterns from the stroke weight exercise, but this time had to understand how to group lines of text to communicate like-content. It was somewhat difficult to achieve the hierarchy I truly want, but I had to take these designs with a grain of salt and embrace the limits within the exercises. For the most part, I tried to separate the title of the event, and the artists and their respective information.

Most Effective Composition:

I think that this composition is the most effective because of its ability to group information but not be too rhythmic in text block size. The title of the event is separated from the “presents” line and the “streamed live from” line allowing viewers to easily find this information. It can get lost due to it being right above another two-line block, but with the restraints of this exercise, some issues are unavoidable.

Exercise Three: Horizontal Shift (2 Flush Margins):

This exercise is similar to the previous in that grouped information is of similar importance, but this time around I am able to achieve more hierarchy and connect information. This is helpful when communicating the date and time of each artist’s show, but becomes difficult when trying to separate the title of the event and the “presents” line due to an indent sometimes inferring that information is connected.

Most Effective Composition:

Since the most important information is the title of the event and the artists, these lines are placed as far left as possible, and secondary information has been indented. The date and time, and the streaming location are both related to the information above their respective lines, so the indent is not too large.

Exercise Four: Horizontal Shift (3 Flush Margins):

Being able to shift lines one more time was very helpful when separating the title from the rest of the information. I was also glad that I could finally separate the names and dates and truly group together similar information.

Most Effective Composition:

This composition was the most communicative because of its ability to single out the event title and organize the names and dates.

In-Class Exercise:

During class, we took 15 minutes to combine any two exercises so that we could begin to transition to the next stage of the project. I chose to combine stroke weight and horizontal shifts, line spacing and horizontal shifts, and stroke weight and line spacing.

Part Two:

Exercise Five: Color:

To start this exercise, I first created swatches with color chips I pulled from various magazines. This exploration helped me get a sense of what color combination could possibly work, and how different scales of colors would affect communication.

Color On White:

This first exercise allowed me to see how different colors helped increase the communication of hierarchy within the composition.

White On Color:

I then switched the background and text color to see how a large amount of each color would communicate.

Two Colors:

Following the previous exercise, I decided to swap white text for a different color, incorporating some color combinations I discovered from my magazine swatches.

Three Colors:

Finally, I chose to increase text hierarchy by incorporating a third color.

Initial compositions:

Further Explorations:

Next, I picked the most successful color compositions and developed them further.

Most Successful Compositions:

Both the color combinations and hierarchy due to changes in hue make these two posters the best. After adding an image I may not want to move forward with the monochrome theme in the secondary information, but for the purposes of this exercise, I think it does a good job of communicating hierarchy.

In Class Color Exploration:

While looking at the entire class’ colored compositions, Vicki noted that we should get bold with the addition of color and move away from fully colored backgrounds and text.

Exercise Six: Scale:

This was the most difficult exercise so far due to limited constraints and free-range of text order, but having an understanding of the hierarchy within my text was helpful. I made sure to emphasize the title of the event while scaling down the initial line “Live From the West Side”. I also kept the names of the artists fairly large so that they would not get lost.

Most Successful Composition:

This layout and its hierarchy through scale does a good job of highlighting both the title and artists, drawing the viewer in. The slight diagonal that is created with “Women of Broadway” and “Concert Series” also moves the eye slightly to the left of the page to the names, dates, and times.

Part Three:

Exercise Seven: Images:

Now that we had full-page layouts, we were given the task of incorporating images and exploring the role it might play in communicating the content’s message.

Initial Explorations:

To begin this final exercise I browsed Unsplash and Stocksy for images related to Broadway, New York, City, and the actresses. I was successful with the first two but had some difficulty finding a dynamic image of the actresses that was high quality, so I ended up running an image through an ai image upscaler.

Class Feedback:

Curtain Image: Color and layout-wise, these poster explorations were successful, but the image was too safe and expected.

New York Image: This image was too busy and did not allow the type to be presented effectively.

Patti LuPone Image: These posters were the most successful, but I was warned to not move forward with the vertical type. The expressive figure of Patti LuPone offered lots of movement, so I was told to explore different compositions to more effectively utilize her dynamic pose.

Microphone Image: The use of color was well-received however, like the curtain photo, this image was too safe.

Moving forward, I want to be sure to explore the image of Patti LuPone, however, I am unsure about the quality of the photo as the ai upscaler has smoothed out the image to give it a very “posterized” look.

Initial Refinements:

I was somewhat wary to develop the Patti LuPone poster since there were image quality concerns, but I explored some different compositions that took advantage of her expressive pose and highlighted the fact that this event showcases the women of broadway. I also decided to fully embrace the “posterized” look and created a vector version of the Patti LuPone image. Since the microphone poster was generally well-received, I began to explore variations in the placement of typographic elements and different color palettes.

Feedback Before Final Crit:

To my surprise, Vicki enjoyed the “posterized” look and supported the idea of continuing with that poster. The microphone poster is successful, however, it is missing the imagery of a woman that is so crucial to communicating the event. From here on out my plan is to find the right color scheme and to nail down the placement of typographic elements.

Notes:

• “Women of” and “Broadway” should be the same size since they should be on the same level of hierarchy
• The lowercase “o” and capital “B” are lining up (but adjusting type size should fix this
• Achieve more hierarchy in the names of the actresses (different leading, different placement, different size)
• Give more thought to the text that communicates the fact that this is an online event

Path to Final Poster:

Final Color Palette:

I wanted to make sure the color of the type was similar but allowed for more hierarchy, so I decided to up the brightness on the event title. The deep eggplant background color was made to allow the red of Patti LuPone’s dress to stay prominent and to match the purple stockings. Now that I have my final colors decided, I will tweak the type placement and hierarchy.

Making the Final Poster:

Actress Hierarchy:

I first played around with the names and dates of the actresses’ events, and for all three iterations increased the size of the names. The composition I decided to go with was the middle one as its stacked type did not clash with the rest of the text like the other two posters.

To further increase hierarchy I explored making the names and title all caps. I enjoyed the middle poster so I chose to use it in the creation of my final.

Final Poster:

The last few changes I made were to the text at the bottom of the poster. I gave the “Streamed live from” a bolder stroke weight (65 Medium) to emphasize the fact that this is a virtual event. I also separated the website from the text above.