CD Studio II: Connecting History — Massimo Vignelli

The goal of this project is to do research on an influential designer of our own choosing and ultimately capturing the essence of their life and their work through 3 spreads in print and a website. My writing of Massimo’s biography can be found here: https://medium.com/@lucyyify/massimo-vignelli-a-biography-3a687a8f1d1f.

/ 02.09.16 / Introduction

My designer is Massimo Vignelli, and frankly I couldn’t have been more pleased — his work, as well his character, exude pure elegance and diversity. Having briefly seen his work (as a type designer) in an earlier project, I was mesmerized by the timelessness of his designs. Something about his work radiates a sense of permanence; there’s nothing superfluous about his work. Simple, classic, and everlasting, the works of Massimo Vignelli fascinated me since the very beginning.

The posters below capture some of Massimo’s most famous sayings reflecting his design philosophy.

Posters of Massimo Vignelli’s design philosophy made by Anthony Neil Dart

/ 02.10.16 / Starting Point

After doing some basic research about Massimo Vignelli online, I had a general idea of his life. I watched interviews of Massimo, one of which is from Big Think; it was very interesting to me how much seeing the designer talk and act really communicates his or her persona much more effectively than any words can describe. That is the power of visuals — it’s so real. Below are some notes I took of Massimo based on Internet research as well as the interviews I watched.

/ 02.11.16 / To-Do List

As a class, we discussed the possible categories that we could use to organize the life of our designers.

To-Do List:

1. Biography (300–500 words)
2. LATCH / Lynch diagrams
3. Read: Davis on Lynch

/02.14.16/ “Helvetica” + Research

Today I decided to watch the documentary Helvetica which was namely about the font itself. Massimo Vignelli had a partially significant role in the documentary, and many comments he made in respect to the typeface reflected his design philosophies and principles.

/ 02.15.16 / LATCH Diagram

We learned about the LATCH method of organizing information:

L(ocation) A(lphabet) T(ime) C(ategories) H(ierarchy)

Below was my first shot at organizing (some very brief) information about Massimo’s life.

/ 02.16.16 / Davis on Lynch’s “Image of the City”

In class today, we talked about the physical embodiment of design that was covered in Kevin Lynch’s “The Image of the City.”

Notes I took on the reading by Meredith Davis on Lynch’s “Image of the City,” which describes the physical embodiment of design.

In class, we physically labelled different work based on the Lynch system of organization.

/ 02.16.16 / 3 Books in the Library

I decided to make a trip to the library, where I worked on writing more post-its to fit onto the diagram we were creating collectively as a class.

Three books I used (front to back): “Vignelli: A to Z,” “The Vignelli Canon,” “Design: Vignelli”.

I was very inspired by the images of work (especially interiors) that Massimo Vignelli designed, as shown in the book “Design: Vignelli.”

After a couple of hours of skimming and reading, I wrote jotted down some notable things that happened in Massimo’s life based on the readings.

Post-its after reading Vignelli’s autobiography in “Vignelli: From A to Z,” which helped me understand his life experiences.

After writing out the post-its, I organized them based on the categories we decided on in class, and sorted them into their respective places.

Seeing the post-its in their respective categories helped me see their connections with other designers.

It’s pretty amazing to see how everyone’s research is coming together as one collective piece; these designers all coexist in the world of design, influencing each other and overlapping with each other, possibly even collaborating. Seeing everyone’s post-its together also helped me put Massimo’s life and work in context of the larger picture.

Adding my post-its to the wall helped me see Vignelli’s life and work in a larger context.

/ 02.17.16 / Diagramming + Lynch Layouts

With even more research at hand, I frankly had trouble visualizing my information in a diagram. There’s so much to cover about every aspect of Massimo Vignelli; however, I want to focus on Massimo’s unique and strong design philosophy. Question is, how do I integrate design philosophy — something relatively abstract — with the work and events and experiences of his life?

Layering work in progress.

I also noticed my way of layering the content wasn’t doing hierarchy much justice on the diagram (especially the clustered area where I had many dashed lines going on). Perhaps I should try using a different method to make distinctions between the different levels of importance / districts of information.

In addition: If there’s enough time, I’d like to try using Alphabet to organize the content (after realizing that Vignelli A to Z is literally organized that way, namely so.)

Here’s also my first attempts at Lynch layouts:

1st try: I wanted to keep a defined grid, which I think would appropriately convey Massimo’s life.

2nd try: I experimented with using a timeline (at the bottom of the spreads) in a similar way I had it in my LATCH diagram, running through the spreads as a landmark.

/ 02.18.16 / LATCH Diagram + Lynch Layout Crit

Taking a look at everyone’s different approaches to LATCH diagrams and LYNCH layouts helped see what was effective and what wasn’t.

Notes taken during the crit.

It was really helpful to see everyone’s different methods of organization in their diagramming. Natalie’s LATCH diagram was particularly effective, dividing chronological events by categories in different columns and by colour. Maybe I could consider implementing that as well.

We then reorganized the wall of post-its about our designers, sorting the categories into organized groups. Lily and I sorted the categories “Style” and “Major Contributions,” which we respectively sorted by unstructured to structured and physical works to movements.

/ 02.19.16 / Celebrating Vignelli

This is just some personal reflection that I wanted to take note of; I’ve been thoroughly enjoying this project. Every minute spent on researching was done with great joy and curiosity, particularly because examining Vignelli’s work has almost a therapeutic effect for me. He’s the type of designer that makes me fall in love with design.

/ 02.21.16 / LATCH Diagram Redo

I redid the LATCH diagram based on the crit on Thursday, and feel pretty satisfied with this version even though it’s done on my sketchbook (hopefully I’ll have time to make an enlarged version).

This LATCH diagram is a lot more organized, linearly and simultaneously with the development of Vignelli’s design philosophy.

/ 02.21.16 / LATCH Diagram Redo (Updated)

I redid my LATCH Diagram after drawing inspiration from the crit we had in class. After making many modifications and reducing certain elements from my initial LATCH Diagram, I’m much more satisfied with this version.

Color coding really helps distinguish different categories in the visual organization of my diagram.

/ 02.22.16 / Lynch Layout

I remade a Lynch layout based on what we discussed in previous classes, focusing on the way content flows. I’m still not entirely sure how we’re supposed to construct these layouts without thinking too much about formatting…

/ 02.23.16 / Lynch Layout Crit

Everyone’s Lynch layouts put up on the white board. As you can see, we as a class focused too much on formatting.

In class today, we talked about the way to construct a Lynch layout; it certainly wasn’t the way most of us interpreted it. Many of us made the mistake of focusing too much on structuring the layouts instead of on the way that content actually flows.

Lynch layout of content flow we talked about as a class, drawn by Stacie.

After Stacie noticed our misinterpretation of how a Lynch layout is supposed to be constructed, she decided to improvise an activity; we took our biographies and broke them down into the Lynch categories, then drawing it out on 11 x 17" paper. This was the way Lynch layouts were supposed to be done.

(Left) Path/content flow of information on the page; (right) Details of the respective types and a general structure.

We also talked a bit about the different types of grids that are used, which we could start thinking about for the layout of our spreads.

There are many types of grids that are available, and we should choose the most appropriate one based on content flow.

/ 02.23.16 / Thoughts on Biography Writing Process

Personal thoughts:

Writing Massimo Vignelli’s biography has been the most intensive amount of writing I’ve done in a while. Every bit of research I had done on this project had been done with great joy; however, synthesizing all the information I gathered about this incredible designer was a pretty difficult task. Considering that his design career easily lasted more years than double my age, imagine how difficult it would be to crunch all his accomplishments and experiences down into 1500 words. Nevertheless, I took a shot at it, with a result I was pretty happy with.

Feedback from others:

According to a few of my peers who proofread my biography, it was their consensus that I may have spoken too highly and too vaguely of him. Because of my initial fear that there would not be word count to fit details of his work, I skimmed through a lot of the work he did, and focused on his background and philosophy (areas that I was more interested in). However, it’s probably a good idea for me to revisit my writing and support the statements with more substantial content.

/ 02.24.16 / Layout Explorations

Previous crits have helped me understand content flow a little better, thus informing the way I structured my grids. I also looked at a lot of Vignelli’s own book designs to guide my design as to ensure some uniformity in conveying his style.

Spreads I used from Vignelli: A to Z to reference for my design.

Here are some very rough sketches I did of layouts with the intention of keeping a simple flow of information as well as trying out what would a timeline possibly look like.

To better understand the precise measurements we’ll be using as a class for designing the spreads of our book, I cropped the spreads down to 8 x 10".

During the process of narrowing down styles for my spreads, I immediately decided on using serif for the title. I felt that serif gives off a classic feel, and carries a sense of timelessness to it, and not just modern. However, regarding which serif font to use, as there are thousands out there, I decided to refer back to what I knew about Massimo as a designer, and the investigation on typefaces that we did in class.

Some serif fonts I examined while trying to narrow down my options.

Massimo was famously fastidious about his choices of typefaces. To preserve the integrity of his belief about typefaces, I decided to choose in the pool of the 5 typefaces that he believed to be essential: Helvetica, Futura, Times, Century, and Bodoni. At first, I really wanted to use Bodoni (his absolute favourite), which emitted a sense of elegance and modernism while being a serif typeface. However, as the typeface is high contrast, it wasn’t quite as legible as I would’ve hoped for it to be. The ‘s’ especially creates a strong visual dissonance that I didn’t quite like at the scale in which we are constrained to.

I also considered Century at one point, as I really appreciated the sense of balance in contrast in the title. However, after learning that it doesn’t have a family, I decided to try other typefaces, in case the limitation would pose itself to be a problem later on.

I decided to use Times after some experimentation. I felt that Times was clean but also created enough visual dynamics in the contrast in its serifs. In addition, its large family was easy to work with.

I also chose to use a symmetrical 6 x 8 modular grid, which gave me a reasonable amount of flexibility in composition, but still holds as a visually strong grid.

Below are the three spreads I created with the styles above, with Vignelli’s own book design as the main influence/inspiration of my design.

/ 02.25.16 / Learning About Layouts

Today’s class was very insightful. We got a glance at the progress of each other’s work as a class and see from the broader scale of what works, and what doesn’t. I really liked how the images are really blown up (thus showing details) in the Cipe Peneles layout. However, we also learned that the collage of multiple images without gutters doesn’t work very well.

My layout:

Notes pertinent to my layout:

• pay attention to the use of white space
• fix leading
• fix hanging quotes

Notes of general things to pay attention to:

/ 02.29.16 / Notes from Ambrose Readings

Some notes about forming grids from Ambrose’s book, focusing on the rule of thirds and symmetrical grids.

/ 03.01.16 / Crit + What’s Massimo’s Approach?

Some notes I took during crit today:

I decided to examine the design approach Massimo took when designing his books. The primary source I referenced is the video below, in which Massimo narrates his process:

/ 03.14.16 / Where I am Now

It’s been a good break away from staring at these grids all day; but now it’s time to get back to work. Just as a refresher, here are the layouts so far (still without the actual images I’ll be using):

Reminder of things due for tomorrow:

Notes from conversation with Stacie:

/ 03.15.16 / Print Piece, and Things to Fix

An overview of the current design of my three spreads

A breakdown of each spread with feedback from Stacie:

Things to do:

• add lists, callouts (collaborators, notable work, mentor/mentee)
• somehow highlight locations?
• try adjusting grid — adjust column widths (narrower?)
• fix captions; pull all to bottom of page
• tracking of paragraphs
• beware of widows/orphans
• play with alignment of text
• emphasize certain margins — horizontal driving lines (try drawing through the page)

We also talked a bit about how to structure the web design for our designers. The HTML that we write for the web page will determine the bone structure for our content, which is fundamentally what will direct the organization of information. Andrew suggested for us to first draw out the way we want to organize our content, then create the format via code afterward.

/ 03.16.16 / Updated Layouts

After talking with Stacie and Robyn, I figured it was probably a good idea to narrow down certain driving horizontals across my spreads to keep some sort of consistency. I tried to reinforce a few specific grid lines to create strong horizontals across the page by changing my grid to a 8 x 4 grid and changing the column widths.

Here’s the breakdown of each spread with a grid overlay:

Here are the spreads without the grids:

/ 03.17.16 / Notes from Stacie

/ 03.20.16 / Latest Layout

/ 03.22.16 / Almost Finalized

/ 03.25.16 / Details to be Refined

After talking a little bit with Stacie today, I found out there are actually quite a number of things I’ll need to fix about my layouts…

In summary, some major issues are:

• leading that do not follow the baseline grid
• awkward rags (fix with tracking)
• column heights that are too short to fit content flow
• overcautious bottom horizontals
• unintentional use of white space

/ 03.26.16 / Reflections + Reminders

To be honest, this week has just been a lot of struggle in terms of finding time to really sit down and think about the effectiveness of my work. This semester just feels extremely restless and I feel constantly bombarded by things, whether it be academics, extracurricular responsibilities, personal issues or whatnot little nitty gritty things that just appear out of nowhere. Anyway. This project is almost over, and I’ve definitely enjoyed it for the most part, and learned a lot from it. Just gotta pull through to the end — the light behind the tunnel is already in sight!

Lastly, from Stacie — (just a reminder of schedule)

BY START OF CLASS TUESDAY
• Revise the folio information on your spreads (see the attached inDesign package, which includes fonts)
• Review the table of contents pdf I’ve attached, making sure info is as you intend (download and open in acrobat).
(Note the letter assigned to your person to denote book section. This goes with your page numbers on your spreads.)
• Print, trim, and mount your three spreads on black mat board.
• Upload a word doc of your endnotes to your google drive student folder.

BY START OF CLASS THURSDAY
• Upload a pdf of your FINAL spreads to your google drive student folder.
• Upload digital files of your web and mobile pieces.
• Make sure your medium posts are up-to-date.

/ 03.27.16 / Some Notes + Reflections

After talking with a design friend who graduated from here, I realized that there are a lot of characteristics of Massimo Vignelli’s style that I’d been missing in my pieces even though I thought I was imitating his style.

These characteristics include, and are not limited to:

• use of high contrast — colour, content density, line spacing, scale, etc.
• intentional use of white space
• rigid adherence to the grid
• tightly packed content vs. white space
• bold use of space — not bland, cluttered content vying for attention

/ 03.28.16 / On Careful Details, and Time

I realized that I’d been creating grids that I thought were pretty accurate imitations of Massimo’s. I was wrong; that was a much prideful belief that I don’t hesitate admitting to. I failed to sit down with his own grids, of which I looked at many, and break them down to observe how he actually used them. I ignored the most obvious traits of his grids — boldness, highlights in contrast, strict adherence to the grid… — and instead, created a grid based on how I thought he’d use it.

So today, I spent the entire day redoing my grid. It might sound crazy, but I think I restarted on much better ground.

Here’s how they look so far:

/ 03.29.16 / Finished Spreads

/ 03.30.16 / Web Portion

I hadn’t been giving equal weight to my spreads and my web, so that’s something I want to work on for future projects. If there are two portions, it’d be wise to balance time to work on both of them (or if one requires time to learn tools, accounting for that is important too).

I’ll be polishing up on my web content soon; learning HTML & CSS has been a bit difficult for me, so I chose to just stick with something simple.

/ 04.01.16 / Desktop + Mobile

When I designed the web portion, I decided to make it as direct and clean as possible, making sure to make the number one priority sticking to the grid. I chose to stick with the classic Massimo colors: black, white and red.

—

Desktop:

—

Mobile:

/ 04.02.16 / An Overall Reflection

I really enjoyed working on this project. Perhaps it was the immersion in another designer’s work — especially one that I truly admired — that enabled me to see the broadness of design and the vast span of design history, thus empowering me to love design even more. It gave me a lot of breathing room and time to heal from the previous project (as I was a little scarred by the experience from the first project due to how awfully it went overall).

Learning new tools, precisely In-Design and HTML & CSS, was not the easiest thing to do. For a long while I struggled with HTML & CSS, and honestly it wasn’t until I sat down with it one night and spent hours trying to understand the concepts that things actually began making sense. I wasn’t able to do a lot of the other fancy stuff I saw people doing, but was still content with the fact that I was able to build the website myself after all the struggle. I’ll be taking a look at it with Andrew at some point, and hopefully we’ll be able to get it cleaned up a little.

Again, I really did enjoy the process of getting to know Massimo Vignelli a little better, and also to observe the methods of learning / researching my fellow design-mates were taking. I really look forward to seeing the final result of our collaborative effort Visual Visionaries!

References:

Massimo Vignelli | Big Think

What Massimo Vignelli can teach designers today

Interview with Massimo Vignelli

LATCH - Methods of Organization

15 Subway Maps That Trace NYC's Transit History