Communication Design Studio II: Project 2

Jan Tschichold

Prompt: Our design history is rich with people, places, things, and movements that greatly influence the ways that we teach, practice, and enjoy design today. Sadly, your exposure to design history is often limited to the discussion of a few people in the context of a relevant course or project, presented as a list to memorize, or simply touched on in passing, which often doesn’t stick.

To improve the usability and usefulness of our history, you spent the past few weeks investigating designers and collaboratively mapping your discoveries with your classmates. Now it is time for you to share your discoveries more widely through the design digital and physical pieces.


Initial Thoughts:

I’m excited to start this new project! I picked Jan Tschichold to study without knowing much about him, but when I looked him up, I was presently surprised. The first thing I noticed was that his work was very bold and reminded me of the Swiss style that I had come across when studying Helvetica. I also really love books and reading, so I was excited to see that he had done a lot of work with Penguin Books covers.

initial research on his life, and notes from class about elements in a communications piece

Research

Initially I was just using websites for research, but they weren’t too detailed, and it was hard to pull a cohesive story from them.

The sites:

Then I went to the library and got some books. They had so much more information and a better collection of his pieces. The one I used the most was Jan Tshichold: Master Typographer; His Life, Work & Legacy by Cees W. de Jong, Alston W. Purvis, Martijin F. Le Coultre, Richard B Doubleday, and Hans Reichart.

Diagramming

When I started writing my biography, I hadn’t done very much research. I mostly focused on his key works and the notable things that happened in his life, but I feel like I hadn’t captured him as a person.

first stab at diagramming his life

I feel like this limited me when I took my first stab at diagramming his life, because I didn’t have enough details to make meaningful connections. It helped when I saw other people’s because I saw that they had used categories to organize all of their information. So, for my next attempt I decided to incorporate a timeline and different categories of his life on two different axes.

The different categories I used were:

  • Historical Context
  • Personal Life
  • Style/Design Philosophy
  • Education/experience as an Educator
  • Work/Occupation
  • Notable Works

I started by going through my biography and just sticking relevant/important information into the timeline based on what category it fit into.

Lynch Diagrams

For my first try, I wanted the 3 spreads to show the 3 stylistic phases he went through. I started with very classic, centered ones, then asymmetrical yet geometric ones in an attempt to emulate the New Typographic. However, in class, during our discussion, I realized that I was jumping too fast into the designing of the layout, instead of letting the content inform where items our placed (this always seems to be a challenge for me).

Then, I tried again by more clearly labelling the items as nodes, landmarks, etc. However, I was still missing the mark. The exercise in class where Stacie walked us through placing elements on a spread without designing the aesthetics.

Layouts Round 1

I didn’t know how much we were supposed to do for this first round so I just set the type in columns on the baseline grid. I didn’t realize how close the margins were on the sides, and I hadn’t even thought to consider the ragging. I used three different typefaces to signal the shifts in style, but now I don’t think I want the form to reflect those shifts. I also got feedback that I didn’t need to both indent and start a new line.

content on the baseline grid
watch ragging

Class Notes: Grids, Layout, Typography

types of grids
line length, layout, hierarchy, typeface choices, paragraph styles, indentation, ragging

First Style Sheet

Avenir and Sabon at different weights

Layout Round 2

two column grid

Some feedback I got:

  • I have a very classical, centered layout
  • The timeline is a very strong, somewhat distracting graphic element
  • I need to not use filler text for captions anymore
  • be consistent with treatment of images (padding, bleed, size)
  • make sure that everything is placed in relation to the grid. Perhaps a two column grid is not enough? Use 4? or more?

Layout Round 3

stylesheet 2

The Changes I Made:

  • put the years next to the text instead of with a strong timeline.
  • added a “cover” page on the left side to introduce the spreads.
  • all-caps for titles and headers
  • added quotes
playing with Mrs. Eaves as a pairing with Avenir, and disregard the weird spacing on the right quote. The hierarchy on this page is weird. I realized that the quote is strong hierarchically, but it isn’t very relevant. I want this page to focus on the style of the New Typography, but that isn’t coming across.

Feedback:

  • Avenir and Sabon is a weird font pairing. It’d be better to pick a serif with rounder qualities like Avenir.
  • I’m being limited since the text on the left page is in the 3rd & 4th column while the the text on the right page is in the 2nd & 3rd.
  • again, put in captions, callout content.
  • watch cropping, put borders on pictures that have white backgrounds

I’m having a hard time putting in the callout content when I don’t even have a solid layout down yet. I’m having the same problem with images. I don’t want to commit to any of these yet.

Below: my attempts at finding another font to pair with Sabon. I wanted to use Sabon, because it felt appropriate to use his typeface. The new title/header font is Futura Condensed Medium. I don’t know how I feel about it though. I feel like it fits the style of The New Typography, but someone said that Avenir suits his personality better.

Layout Round 4

The Changes:

  • I experimented in using Sabon letterforms as a graphic element along the bottom of the spreads.
  • bolder header
  • kept Avenir for header font, changed body copy to Goudy Old Stlye because it is a bit rounder, though not as quaint as say, Mrs. Eaves, which I think is more appropriate.
  • changed the grid structure. 8 columns per page, 16 per spread.
  • had the text in more than one column per page. Earlier it was just a single column of text per page, and that limited me to only putting images on the sides. I want to utilize horizontal space and the new spaces above and below the text. I feel like breaking up the text into these sections also makes it less intimidating.
the grid
experimenting with large blocks of color. The red is a bit strong.

Layout Round 5

The Changes:

  • changing the first spread. I added photos of pieces that inspired him in his early years. They kind of break the grid though. I liked those colors, so I wanted to incorporate them in the spread. I tried to emphasize horizontal relationships.
  • I took out the Sabon letters on the bottom of the spreads, but I didn’t think they would communicate anything of real significance to the piece. It seemed more distracting.
  • Went back to a white background. It’s cleaner and more readable for text.
  • Unbolded the headers. They were a bit strong.

Other than that, I didn’t make many major changes to the later spreads.

Looking Ahead: I need to find more suitable images for the other spreads and add callout content to the second spread. I’m also not too pleased with the first spread.

Layout Round 6

The Changes:

  • softer colors, and having that color scheme throughout the piece.
  • using blocks of color as vertical and horizontal graphic elements, kind of similar to how Tschichold used them.
  • added more images, also trying to keep the colors consistent.
  • added captions and callouts
  • added color to headings

I got feedback from Dan Boyarski after this iteration. He said that my ragging looks almost justified, and there are some shapes being created, so I should track the lines to make it look more natural. He said that I’m treating the text very respectfully and that the overall layout is pretty strong. He asked me why I chose the images I did and suggested highlighting more of his work. The largest image I use is one of himself, and should the emphasis of the piece be on what he looks like or what he did. He also said that I could probably make some of the photos of his work bigger.

We had a pin up where I put this iteration up. It was a bit intimidating because some people’s work looked really good. In comparison, my work seemed somewhat dull and uninteresting. However, I had to remember that the goal of this project is not to be trendy or showcase our style, but to convey the life of the designer accurately and with integrity. Therefore, considering that Jan Tschichold’s style was a bit more quiet and subtle, my approach is appropriate. It’s hard to have confidence in my work because I see all of the flaws and hold myself to high standards. Stacie said to look back at our old spreads if we need any encouragement. It is true that I’ve gotten better throughout the course of this project, so I am happy with my progress. I do want to continue making my spreads better though.

FINAL!

My workspace for the final. There was lots of moving around elements and swapping out pictures. Here are also all of my guides. I wanted to have strong horizontal relationships.

The Changes:

  • new first page. I wanted to highlight the text instead and use the letterforms somewhat as a graphic element. I felt this was appropriate since he was a typographer.
  • using three colors: gold, red, and blue. I used different colors/combinations for each spread. I used the blue and gold for the first spread, because I felt they conveyed a sense of the past and youth. The red and yellow on the next spread were meant to convey the New Typography, which was new, bold, strict and organized. The blue and red on the last spread hopefully convey a sense of maturity, yet continued impact and influence.
  • I used colored bars on the sides of the text to frame the content and establish more horizontal relationships. I also used horizontal grey rules to create those relationships and echo his style a bit more.
  • I used larger pictures of his work which are more representative of what he did and which still fit within my color scheme.
  • Again, in the spirit of using text and letterforms as graphic elements, I showcased Sabon at the end in different weights.

Website

Working with html and css was really new to me. I’ve taken programming classes before, so it wasn’t completely unfamiliar, but it was a new language and way of working. Even though we were learning throughout the semester through Andrew’s demos, it was hard when we weren’t applying it. I feel like I learned the most through the actual making of my site, because then I had to apply what I had been taught or teach myself new things. It was nice to have the demos on the server that I could reference.

At first, I tried going about setting up just a desktop version of my site without thinking about mobile, because I wanted to make sure I had some basic concepts down. The result wasn’t super pretty, but it was simple and helped me understand hierarchy of elements and how to apply styles to html elements. It was a good recap of the basics.

For my final, I knew I didn’t just want to copy my spreads, but I did want there to be similarities. I wanted to find a balance between being appropriate for the medium and still have the same feel as the print piece. I used the responsive 12 grid code from one of the demos. There is a navigation bar on the side. As you scroll through the piece, the side bar changes colors (My implementation is a bit hacky, cause I didn’t know how to you javascript, so there are some bugs). Since I knew I didn’t have the most knowledge of coding for the wed, I just tried to do simple well.

Above: a recording of the movement of the site.