Massimo Vignelli: Booklet & Mobile Experience

Communication Studio II

Overview

For the second part of the Design Hero project series, I will design a booklet for Massimo Vignelli. Through the use of text, images, and typography, I hope to tell a story that is both captivating and inspiring. The main question to consider throughout this project is: How do I make a publication that both delights and resonates with my audience––people who know nothing about Massimo––while also informing and educating them?

Project Details:

• Trim Size: 8.25 in x 10.5 in
• Page Count: 16 Pages including self-cover
• Binding: Saddle-stiched

Flat Plan Sketches

March 9, 2021

Narrative Directions

To begin generating ideas for my flat plan sketches, I started by creating a couple of possible narratives for my overall booklet. For the first direction, I decided to lay out the pages in chronological order, beginning the story from when Massimo was a young adult living in Milan to becoming an old, wise educator of design toward in end of his career and life.

For the second approach, I decided to section the booklet into 3 different parts. The first part would talk about Massimo’s work, illustrating his prolific life. Transitioning to the second part of the booklet, the focus would shift to explaining his design and life philosophy. Essentially, this section would help show the rationale behind his decisions. Coming to the end of the booklet, in the last section of the booklet, I would highlight Massimo’s legacy as a conclusion to the narrative.

For the 3rd direction, I wanted to start the story in medias res, being with an excerpt describing Massimo’s work process with a majestic picture accompanying it. I thought this might be an interesting way of capturing my readers’ attention before diving into other sections of his life and work. The remainder of the pages then follows a similar structure to the first direction I can up with.

Having some solid directions for my narrative, I then translated these ideas into visualizations of my spreads. Sketching helped me think through visual elements such as size, placement, and interaction of type and images.

Feedback

1. Consider density while dealing with images of his work.
2. Having the subway may run through the whole booklet could be cool.
3. Be mindful of how the covers look both as individuals and as a spread.
4. There are some problems with how the name might be cut off in the first and second flat plans.
5. Play with the density of objects.
6. Consider how to emphasize certain quotes or texts with space.
7. After finishing your first spread, start considering what grid system to use.

First Iteration

March 12, 2021

Refining my flat plan

Before starting to work in Indesign, I created another quick flat plan to finalize the overall narrative for my booklet.

The booklet would start with a quick introduction to who Massimo was. The booklet would then transition to Massimo’s early life, showing how his childhood shaped him, before showing the rise of his success in the US. Following that spread would be the timeline spread, where I give a recap of his work and life. Later, I would go into his philosophy, before ending the booklet with his legacy.

Initial Spreads

The first spread I wanted to work on was the introduction spread since I had the clearest vision for it. The spread would include the quote “If you can design one thing, you can design everything” while giving a quick glimpse into Massimo’s prolific life as a product, graphic, and environment designer. I wanted to use big type for the quote mimicking Massimo’s style, then I would add layers of his work to the spread to make it more intriguing. To accomplish this, I began scanning pictures of his work from the book Vignelli: From A to Z.

Here are some of the pages I scanned:

After photoshopping these objects, taking away the background, I then moved into InDesign. I started laying out my first spread as I planned, first laying out the quote and kerning it. After I was satisfied with that, I then added the pictures and the section of my essay that goes along with it.

Having completed this spread, I moved on to thinking about the grid structure for my booklet. Since the six-column grid seemed to work well this introduction spread I would use it throughout my booklet to keep consistency.

I followed my flat plan and made 4 other spreads for class.

Feedback

1. Start thinking about folios and caption systems.
2. Play with the balance between space and text.
3. Don’t always put big pictures on the right. Change it up.

Iteration 2

March 16, 2021

For the second iteration, I focused on making the rest of my booklet spreads. I began by working on the inner cover and the table of contents. As the readers open the first page of the booklet, I wanted them to be drawn in by a portrait of Massimo. Since I only planned to use Massimo’s name on the cover, I thought it would be great to introduce an image of him next. This would allow people to associate the name with a face and set the mood for the spreads and content that follow. Inspired by Massimo's design for American Center Garth Fagan Dance and the book Anyone, I treated his portrait in a similar manner.

Moving on from the portrait I then worked on the table of contents.

I wanted to reference the subway directory. However, after doing so, I felt that the style of the two pages did not go well together; it felt a little too playful. I ended up exploring and making another table of content using a warm tone color and tightly kerned Bodoni. This resulted in this spread:

Overall, I liked this table of contents better as it aligns well with the aesthetic of Massimo––very clean, simple, and stripped to the core of the information that is being conveyed.

Next, I worked on the front and back cover of the booklet. I wanted to bring in the subway motif as the subway map is arguably Massimo’s most well-known work. I also found Massimo’s signature and thought that it might be cool to use it on the back cover so that it would look like he signed this booklet. For the front cover, to keep it minimal and cohesive with the back, I decided to layout Massimo’s name in Bodoni. This also connects back to the style of the table of contents.

After designing the covers, I then tweaked the first two spreads of my booklet. I changed some pictures to show more of Massimo’s work and added a caption system. I thin included big letters from the section’s name as another visual element. Keeping in mind the feedback, I alternated the placement of pictures in large scales on the spreads.

For the timeline, I decided to reference one of Massimo’s calendar layouts. I set up a 7-column grid structure and started laying out the important years of his life. I then included pictures of his work throughout the years on the timeline to make the spreads more interesting.

The last spread I worked on before class was the spread about Massimo’s design philosophy. Massimo had a lot of quotes so I wanted to do a spread highlighting that aspect of his life. A vision I had for this spread was to be filled with Massimo’s quotes; however, I didn’t develop it fully for class, which was a bit disappointing.

Here are all the pages to my booklet in order:

Feedback

1. Way too many photos of Massimo. These photos are taking up too much space that could be use for showing his work.
2. Bring in the subway motif to the inner cover could make the overall booklet more cohesive and interesting.
3. Cover is still lacking elements that are attention-grabbing. Don’t just resolve to Massimo’s style. Push beyond it.
4. Bring in a caption system for the opening spread.
5. Massimo has such a prolific life. How can you represent that more in the timeline.
6. What can you learn from the spreads that you have done well? Why are those spreads interesting? What is working?

Iteration 3

March 18, 2021

For this iteration of my booklet, I began by working on the cover. I mostly played with the scale and position of the booklet title. One idea that I thought might be cool was to make the name follow along the subway track. Although I made some progress, I was still not satisfied with how the cover was looking. I was a bit stuck, so I moved on to making other spreads and planned to return to it later.

The next page I worked on was the inner cover. I brought the subway colors to the page and added more portraits of Massimo, which I thought might help transition better into the first spread with his work all scattered around.

Moving on to the first spread, I added captions to the spread so that readers could navigate the spread and see the title of each work and the year that specific work was created. Having this helped increased the richness of the context and created a more interesting but logical visual hierarchy. I also changed the type size because after testing printing it, it seemed too big. I also tried the quote in black, but didn’t really like it as it did not pop up enough.

After finishing the captions, I then worked on the timeline, mainly increasing the density of the page by adding more pictures and years. I decided to use justified text to make the texts follow the rigid structure of the lines that separated the columns. However, this presented me with rivers that I would later have to fix.

Moving on to the philosophy spread, I wanted it to be dense similar to the timeline. I started adding in quotes. Every single quote is in red; except for the quote: “design is permanent; styling is ephemeral.” I wanted to underscore this quote as it is at the core of Massimo’s work, so I put it in black.

In contrast to the philosophy spread, I created a simple, clean design for the legacy pages. I began by pushing the scale of the word “legacy” then made the spread half black half white. I thought that doing so might provoke a sense of nostalgia which is often related to legacy.

Here are all my iteration 3 spreads:

Feedback

1. Last two spreads are still missing some elements. They lack the right complexity to make them interesting.
2. Having quotes in different opacity might help make the second to last spread more interesting.
3. For the last spread, integrating more of Massimo’s work similar to the first spread might help with leaving the readers with a powerful impression.
4. The timeline could be more interesting if certain years are in different opacity.
5. Description for each year on the timeline is too bright. They are competing with the years.
6. Cover still doesn’t draw readers in. Maybe lacks density.

Iteration 4

March 23, 2021

I began by working on the last two spreads of my booklet since they needed the most refinement. For the legacy spread, I pivoted from the direction I was going in. Since it would be about his legacy, I thought maybe I could use it to show even more of his work. This might help illustrate the prevalence of his work and his impact on today’s life. To compile more of his work, I went back to the book Vignelli: A to Z and scanned more pages. I still also wanted to keep the legacy spread in black and white as this helps create a sense of something that has withstood time.

Next, I put these pictures in circles masks, similar to how I portrayed his work on my poster from the first project. Then, I put them onto the spread, alternating scales and keeping in mind the black and white contrast between the pages and the pictures.

Working on the philosophy spread, I focused on rearranging the quotes to create a more interesting composition. I also explored using different opacities to differentiate each quote from the others. I only kept “design is permanent; styling is ephemeral” in 100% opacity as I wanted to underscore its importance to the Massimo’s way of working.

I then returned to the second spread of my booklet. When I talked to Hannah early, she commented that using the color red for the quote seemed a bit out of place since nothing on the page adjacent to it is red. I also suggested that I could still make the quote more interesting, which can be done by highlighting certain sections of the quote. Here are the changes I made:

Besides these changes, I made other small tweaks such as resolving the rivers in the timeline, adjusting the opacity of each year, using the Indesign justification function, rotate the table of contents, and adding the line motif across multiple spreads. I did not leave enough time for myself to work on the covers, which was a bummer.

Here are all my iteration 4 spreads:

In class today, we had individual meetings with Brett and Andrew; however, we ran out of time during class, so I didn’t get as much feedback as I would like to. I decided to schedule another meeting with Brett over the weekend. Before that, I worked on adjusting my caption system to further distinguish the hierarchy.

Feedback

1. Covers are not working. Lacks intricacy. Bring in more subway will help.
2. For the legacy spread, the values are also the same. Bringing in color might help with creating more dimensions. Also, adding captions like the second spread would help to add more information but still be digestible.
3. Adjust the picture on the third spread. It barely covers “you” and “are”.
4. For the timeline, instead of doing a gradient from 1931 to 2010, using opacity to highlight important years.
5. For the last spread, to differentiate the quotes even more, bring in color from the subway map might be helpful. Also add attributes for where the quotes are taken from.
6. Justified texts are hard to make perfect. Use left-align for the timeline would work too.

Final Spreads

March 25, 2020

I followed the feedback I received to create my final design. Firstly, I worked on the covers.

Overall, I was pretty satisfied with covers I ended up with so I moved on to the other spread.

For the Legacy spread, I decided to change the big type to “timeless” design. I thought that this title still alluded to Massimo’s legacy without being too direct. I so had to rescan the pages from the book since the first time I scan them they were in black and white.

Here are all the final spreads:

After finishing my booklet, I then printed the spreads out and stitched them together.

Reflection

Looking back on this project, I am pretty satisfied with how my booklet turned out. However, there are still many things that I can improve upon. One thing that I learned from this project is to be either be consistently consistent or consistently inconsistent. Anything in between will be interpreted as unintentional or sloppy. When looking at any design piece, the observer will always try to understand the intention of the designer either subconsciously or consciously. Being consistent will enhance communication, lessen unintended ambiguity, ultimately creating a more pleasurable experience.

Besides this takeaway, I also realized that I need to improve on my work efficiency and time management. I should probably set goals for each day that are both achievable and measurable so I could keep track of my progress.

:((

The Mobile Expereince

Overview

In addition to the booklet, I will create a mobile experience that works in conjunction with it. Working with a different medium, I will take into account what a mobile prototype affords that a booklet does not. I will also consider the difference between the audience of the booklet and that of the mobile experience.

Project Details

• a home page
• navigation
• your designer’s work
• a chronological timeline

Making a Site Map

March 23, 2021

To begin, I created a site map, planning out the overview of the mobile experience. I decided to split the mobile experience into 4 sections. Similar to the first few pages of the booklet, the first section of the mobile prototype gives an overview of Massimo’s life throughout the different stages, from being a kid to retiring as a legend. The second section is the timeline, highlighting key moments from year to year. Next is his work section, where I displayed his most prominent work and give insights into his design process. Massimovalued the principle of “Dal cucchiaio alla città” (from city to a spoon), meaning if you can design one thing you can design everything. Living up to this philosophy, Massimo had work in product, graphic, and physical environment design, so I thought it would be appropriate to represent his work according to these categories. Lastly, I chose to include a section on Massimo’s philosophy and its effects on the field of design.

Initial Wireframes

March 26, 2021

With the site map planned out, I then created wireframes to further visualize my idea. I wanted to use the subway map motif to create engaging visuals for the mobile prototype, so I came with two variations. For the Life section and work, I would implement a simple grid system with pictures and lines, alluding to many print designs Massimo did, especially with newspapers. The philosophy section would then be in a similar format as my booklet’s last spread since they provide the same content. Next I translated these sketches ideas to low fidelity wireframes in Figma.

Prototyping

March 30, 2021

Since this project is a fast-paced project compared to the booklet, I began both prototyping and making high fidelity wireframes at the same time. Some suggestions I got during this process were…

1. Navigation is key to success. Unlike the booklet, where the only interaction you can do is flip through pages, the mobile experience affords multitude of interactions such as swiping, clicking, scrolling, and etc. How do you provide enough sophistication to making it engaging without overwhelming or confusing the viewer?
2. Mobile interface doesn't allow for much horizontal real estate to work with. Keeping the layout consistent and simple can be appropriate as the main element of the expereince would be the interaction.

Here are some key frames from each section:

Using smart animate and overlays, I prototyped the interactions.

Final Video

Reflection

Since this project was a quick turn around and I had never used Figma for prototyping before, I did not want to work on it in the beginning. However, reflecting back, I really enjoyed the process and was satisfied with what I had accomplished. I learned a lot about using smart animate and how Figma prototyping works. Learning what digital interfaces afford compared to print materials––like the poster and booklet––was also very interesting for me. I am glad to add another tool into my toolbox. Being able design across different media is an important skill for C designers; now I can both design for print and mobile! 🥳