Tuesday, October 14, 2014

Week 8 - Journal Entry 1 - Visual Hierarchy

I realized that I had not yet posted my visual hierarchy designs, so here they are.

For this project, we were given the following lines:
Dance
Jazz and Ballet
Kimmel Center, Inc.
Instruction in Ballet and Special Exercise Jazz
Pam Turner, Jazz
Gene Hammett, Ballet
Director, Myra Wrenn
Registration now through November 15, 2014
260 South Broad Street on the Avenue of the Arts
Philadelphia, PA 19102
Phone: 215.790.5800
Fax: 215.990.5801

For each design, we were given set parameters within which we had to follow to achieve visual hierarchy.

The parameters for each design were as follows:
1. Use the same type, size, and weight
2. Use the same type, size, and different weights
3. Use different type, different size, and different weights
4. Use different size, weights, and varied letter spacing for emphasis
5. Use an interpretive manipulation of type to reinforce the message

The objectives of the assignment were:
Use visual hierarchy by changing typographic parameters
To view letters as forms and experiment with combinations
To utilize type as a visual element, and an abstract and interpretive design element

Two sets were created. The size of each individual composition was 6" x 6", but for the purposes of sharing them on the blog, I took my before and after compositions, placed them into a single photoshop document, and uploaded them afterwards. That way, they would appear next to each other to make it easier for people to compare the two. People can also click on the image to enlarge them. Because of screen resolution differences, I figured the safer route would be to not make the resolutions of them smaller. In each composition, I switched between uppercase and lowercase letters to create emphasis, so I will not be mentioning that further in detail, but below are comparisons of my before and after sets with the image on the left being my "before" and the one on the left being the "after".

The first composition utilized only Tw Cen MT. The second utilized only Futura. Without being able to create emphasis through different weights, typefaces, or varied letter spacing, I had to base my composition off the fact that people in the US read from top-to-bottom and from left-to-right. I wanted to avoid centering all of my information in a vertical column down the middle, because it felt cliche. The one on the left reminds me of a letter or memo. Professor Mata suggested that I put the "Dance, Ballet, and Jazz" into a single column and mentioned that the size of the font was a bit small. I made the alterations and ended up the one on the right. The biggest lesson I learned from creating these two was how effective a simple change in font size could make.

The first one includes only Tw Cen MT, while the second includes only Helvetica Neue. Because the type and size had to stay the same, while the weight was allowed to be changed, I had to pick a typeface with many different weights. On the left, it's evident that I didn't take full advantage of the use of different weights and mistakenly chose Tw Cen MT as the typeface. The hierarchy is there from top-bottom as previously, but it's not appealing. I chose Helvetica Neue for the one on the right. My main goal was to capture the reader's attention through the contrast of bold type against the light type. From first glance they would see and read the bold type, and if interesting, could read into the details of the lighter type. The negative space in the second composition helps to make the positive space more noticeable.

I used Futura and Myriad Pro for the first one. For the second, I went with Future and Helvetica Neue. Type, weight, and size could all be changed. The hierarchy is there on the left, but it's still boring and doesn't appear as modern as I wanted. On the right, I took what I learned from the first composition of using type size to my advantage to make "Dance," "Ballet," and "Jazz" stand out. It activates the negative area and captures the reader attention from first glance. Similar to the last composition, I wanted to achieve hierarchy primarily through weight and placement.

I used Myriad Pro for the first one and went with Futura for the second. Again, the hierarchy seems to be there on the left, but it still appears a bit boring and generic. I switched to Futura, because it's a typeface that appears modern and seems to resemble the one on Kimmel Center, Inc.'s website. Those are also reasons why I used Futura frequently in my other designs. The way the "N" slightly extends beyond the cap-line and baseline appeals to me. I wanted to try to take full advantage of being able to vary the letter-spacing, so keeping in mind that I wanted to fill up the entire space of the picture plane, I eventually ended up with the design on the right. I still tried to maintain visual hierarchy through weight, size, and placement, but added the letter-spacing for emphasis and visual appeal. It is probably my favorite design of all of the ones I created. The only things that bother me are the commas in the second one. I contemplated deleting them, but didn't want their titles getting mixed in with "& special exercise jazz". I should have perhaps gone with Helvetica Neue so I could have used the light weight for one of those to differentiate them.


For the first one, I went with Helvetica, Helvetica CY, Helvetica Neue, and Futura. For the second one, I went with only Futura. The inspiration for the first one came from both Professor Mata's T-Shirt Design rubric, and my older brother's resume. I screen-captured an image from Kimmel Center, Inc.'s website and used the eyedropper tool to get the colors to match their site. The black background was meant to resemble a dark theater. I wanted a modern and clean look in the first one, which I partially achieved, but the typeface in "Kimmel Center, Inc." appears a bit old and not as appealing as "Jazz Ballet Dance." The inspiration for the second one came from some images I found on Google after typing in "good typography". From the first critique, we discussed the fact that placing a word at an angle creates movement. I later realized that movement in type is created simply from the order in which they are presented. Whereas in a drawing, people move around a composition according to line they see, type creates the same effect. People read information and words in the order that makes most sense to them, so I tried to use that to my advantage. I wanted to create the idea of roads or pathways and parking lots, with smaller roads connecting and intersecting with each other. I prefer it without the black background, because it seems easier to read. I didn't fully achieve the look I was going for, and while the hierarchy still seems partially there, it's not visually appealing enough for me. I should have turned the entire composition counter-clockwise slightly so that none of the lines of text would be at an exact vertical, which would make those lines of text more legible. The part with Gene Hammett, Myra Wrenn, and Pam Turner should maybe have a different typeface, weight, and/or placement. I tried to balance the horizontal lines extending from Jazz and Ballet with the lines of type on the left, but I'm unsure if it's enough. The vertical line in "Kimmel Center, Inc." resembles a road which I wanted, but it also makes the word "Center" almost appear as "Icenter," which isn't good. Overall, it could still use some work before it's where I would want it to have that "wow" factor. I do think it's better than my first rendition of it, however slightly. I'm unsure if it's better than my fourth one though.

Overall, I learned a lot about typography through this project. Experiencing it first-hand and discovering all the work that goes into trying to create good typography provided a good connection to what I have read and been taught about it in lecture. I have a new respect for designers who create good typography, because it's extremely time consuming. It's fun, and hopefully, I'll be able to effectively integrate into my future designs.

0 comments:

Post a Comment