2 • Writing the biography

The next step is to write the biography. You can see my different drafts of biography here.

After several iterations, I decided that my biography will be structured in the following way:

Short intro

Important contributions and early life

A Design Practitioner

Her time as a practicing design professional who works for companies. Mainly focus on how each company gives her connections who influenced her in her styles. The most important companies include:

1. Unimark International ( learn typography, meet Swiss Design tycoons.)
2. Omnigraphics (meet Muriel Cooper, collaborate on MIT press. Muriel’s infographic design interest influenced Katherine.)
3. Design & Partners (met Ed Fella, influenced by his personal typography style.)

A Design Educator

Her time as a professor living and teaching at Cranbrook Academy of Art, where she thrived as an influential designer. Mainly focus on how she develops her design theories throughout the decades. Her development of design philosophies revolving around semiotics roughly includes the following stages:

1.Literal visual translation of words into images (connotation)

2.middle place

3.visceral, more visceral translation (denotation)(Example, voicemail design, first, just like a mailbox, second add elements that remind people about mailbox, third phasse, imbed the design in the wall.)

4. Personal and current work

3 • Structuring information visually & Choosing styles

Stacie had us read David and Lynch, who point out that information structure is similar to architecture. Architectural terms such as edge, node, path, landmark, district apply to a page.

Stacie walked us through an interesting exercise today that helped us understand how to organize our information according to their structural importance in terms of information architecture.

From this exercise, I concluded my own approach to design information :

Frist, draw diagrams that demonstrates how the information should be absorbed by the users. Use post-its to do it. Find a way to organize your information using the previous book Stacie gave us, and then use the diagrams to inform our decisions and then use the Lynch reading to think about the architectural relationship your information has with one another. Then in the end, look how information and spread is put together, the trend in book making industries.

During our in-class critique, Stacie suggested that I should use Gill Sans light instead of Gill Sans regular, which appears too dark. Secondly, the relationship between text and images are weak. She taught us the rule of thumb on building relationships:

When the spread is laid out in landscape, people identify information in the same group by how wide each elements is. For example, people will think an image and the text with width of 4 columns are referring to the same type of information. If the spread is in portrait style, the height of the elements determine similarities.

Stacies’ notes on my spreads

After the critique, I experimented with several line lengths to determine the optimal line length. 5/12 columns is the most optimal right now.

Danae also gave me advice on layout. She told me it is not okay to lay the edges of element in the gutter. Anything should be outside of gutter. Creating layout is similar to finding the common things between the text and images.

Typeface • 6

One of the emphases of this project is to express the characteristics of our designer through typography and layout. Therefore, I set out to find typefaces that are most appropriate to my designer.

After trying out a bunch of typefaces, I decided to go with Archer and Gill Sans. Archer is elegant, formal and playful; Gill Sans has a humanist touch, which I want to use to express Katherine McCoy’s work since her work is trying to express the stylistic characteristics of typefaces in contrast to Swiss style.

Then I laid out the entire font weights of each typeface on the table and picked out the ones that I felt to be appropriate for each of my content: titles, subtitles, quotes, etc.

Exploring the layout • 4

After studying different types of book layouts, I decided to use a 6x8 modular grid system for my book design because modular grid is best for placing images as it has a lot of flexibilities.

Here are two other grids I looked at:

1. A 6x8 grid with 6 pica by 6 pica spatial fields (leave too small a margin and infringe the folios)

2.A 7x9 grid which is not flexible enough.

I started the day with white board sketches because it is relaxing and I can quickly get ideas out. After going through 20 of them, I took photos of my sketches and printed them out on a piece of paper.

I started the day with white board sketches because it is relaxing and I can quickly get ideas out. After going through 20 of them, I took photos of my sketches and printed them out on a piece of paper.

When I was doing the sketches, I mainly focused on if my composition between the images and text makes sense according to the structure of my biography.

Afterwards, I picked several frames that are most in line with my biography and iterated them again on the white board, adding small elements (the circles indicate the time the content is referring to)

Then I finally moved to the sketchbook. In the sketchbook, I drew out 6 wireframes that are refined enough to be put into the digital versions.

From the six iterations, I picked three that are most interesting to me and implemented them to digital spreads.

However, at this point, I recognized that all of my sketches are abotu teh first two pages, the other pages remain untouched. Therefore, I came oback toeh te practice . However, at the is point, I have difficulties crafting the other three spreads so that they appear consistent. Therefore, I went back to the practice Stacie taught us: layout down every piece of information on an 11x 17a and then divide the content into the three sections and each section is one spread. This exercise has proven to be eminently helpful.

This is the first iteration of my full spreads

The second iteration. I decided to try making my intro text a different width and I got the feedback the three column layout make other pages look inconsistent with the first page.

I also produced this one just for fun. Each text is in a spatial field I created.

New grid exploration :

I changed my grid structure to 7x9, leaving the outermost column for call outs. The new grid also allowed me to have tighter relationship with the folios near the top of the page.

Based on the new grid structure, I developed several simple mock up pages to examine the relationship between the text and images. I am most satisfied with them because they have strong vertical relationships. The rightmost is my newest stylesheet.

Based on the mock up, I created the following spreads.

Feedback and reflections • 9

Today, Stacie, Natalie and other people gave me following feedback:

Natalie:

1.Archer is too obvious to miss. just use gill sans fonts. The typeface has a variety of types that I can use.

2.The images are not consistent. Don’t line up the image to the text block, just make sure they have similar horizontal widths!

3.Put small lists and call outs in the margin

4.Make sure the title differentiates itself from the content. Right now the subtitle looks a little bit cramped.

Danae:

1. improve the consistency of spreads across the pages — line up similar floweriness. Make a rule guide on where in the vertical space will you put the each different elements. Also I know that it is very Dense space — empty space .How every element on the entire page looks like and how every element on the entire element. All cap the entire section.

Stacie:

1.My grid is not working T_T, try a different grid. The margin should have relationship between each other

2.Put image against the flush side of the image

3.Try a 9 point for the typeface

4.Make sure that your images goes across the full grids , but not half ones.

5.Make my grids simple and not complicated.

6. Pull back, I am jumping the gun, make it boring first but make sure the system is consistent.

7.Make the text blocks in the same page are linked.

Stacie suggests that I make my layout look as plain as the full information sketch I made on the paper.

More iterations and feedback• 5

March 17th, 2016

I realized that I have not used my grid structure appropriately. The un-indentation of the titles are rather confusing to read.

1.People generally care more about how the other people influenced Katherine McCoy than what they look like. Show images of works from Massimo Vignelli, Edward Fella, Muriel Cooper

2.Show the images of Katherine’s works first because it draws people in.

3.Later, show who Katherine McCoy is.

4.Look at how other biographies are structured. Recommended by my parents.

5.Make the sections of the page clear.

6.Align the images to cap height.

Today Stacie lead a group critique and we looked at each of our spreads and try to find something in common.

This is my close to final iterations. Some people told me that some elements are working. However, I believe it is more important to play with some vernacular elements.

Advice from Stacie & Danae on my previous slide:

1.shorten your quotes

2.make the full bleed images cohesive by maybe changing the location of the image on the page (2nd spread) scoot it down a bit

3.break up the text on the 3rd spread, it needs a quote on that side or another title.

4.captions on the right of images are too long and are making the white space in between images look like rectangles so shorten them up a bit

5.Hide the folios when you have a full bleed images beneath.

Full Bleed:

1. Casual,more interactions with the spreads
2. Margins make the content look more desirable, precious

Coming next:

1. I need to email Stacie about working on the maps.
2. Tomorrow, Stacie will give us back the spreads
3. Document both HTML + Print elements
4. Work on the web design
5. Next Tuesday, submit the pdf file & mount our pages on black illustration board.

Second Iteration :

I made both mobile and web version ample with margins so that they look consistent with my spreads. The margin makes the images look much more elegant.

I also tried to make the styles seem consistent, which are relatively challenging. Overall, I am glad with the results I produced.

However, the feedback I get from Stacie and Adella state the following:

1. Why use images from Massimo Vignelli and other designers if the subject of your essay is about Katherine McCoy
2. The way the page cut off of the picture cannot guide people to read the page naturally.
3. Align the name of the quote to the left

In the following experiments, I try to use the images to guide eyes in a more natural movement (left → right, top → bottom)

For the first page, I also tried vertical texts, but they proved to be obtrusive to people’s eyes.

After the conversation Stacie and the class had on the feeling the margin conveys, I decided to use bleed as little as possible so that the images become more serious and less casual.

The introduction right now stands out like a sour thumb. Thus, I decided to not use a title for the beginning of the biography. Instead,

I fixed the text issue below. Now the reading sequence seems more natural.

I also added the infographic to relate to other designers mentioned in the book. At the same time, giving people a concrete sense of time of when did Katherine did what.

For my second to final spreads, Stacie gave me the following advice:

1. Try to eliminate the negative space in the middle of the page. People are more tolerant of the organic shapes created by the negative space if it leads their eyes out of hte page.
2. The middle of the spreads need to stay consistently strong since a strong horizontal middle can guide the eyes across the page, and make the reading experience quite comfortable.
3. Try a 6 column layout and see if I can solve the problem with my 5th page

My 6 column iteration:

I determined to still go with 7 column grids because the slight imbalance gives more dynamic to the spreads.

My final spreads:

5 • Web Design

Web design sketches. I try to translate existing elements on the spread to the web design. Therefore, I added the color block I used in McCoy’s spread on the website.

Second Iteration :

I made both mobile and web version ample with margins so that they look consistent with my spreads. The margin makes the images look much more elegant.

I also tried to make the styles seem consistent, which are relatively challenging. Overall, I am glad with the results I produced.