Milton Glaser—Booklet and Mobile Experience
Design a 16 page booklet for someone who knows nothing about your designer.
Booklet
To start off the booklet, I did a lot of research on Milton Glaser to understand his designs and philosophy. From this understanding of him as a person, I sketched out what overall narrative would be. I wanted there to be consistency throughout the booklet, so I tried to create a visual motif that would reappear on some spreads. Some ideas were using paper folding as a story telling method with one side providing color and the flip side of the “paper” show his work. Another motif I played with was psychedelic space. Since Milton’s early work had a lot of psychedelic style, I wanted to show that through some spreads in the booklet.
Sketches Process
Concerns:
- Would having paper folding images (without a physical fold out to interact with) on a booklet confuse viewers or cause dissonance?
- Inside front cover and inside back cover consistency
- Consistency of motif throughout spreads causing boredom or lack of consistency causing disconnection
Feedback:
- Having the motif disappear and reappear is what you want. There should be a balance between using it and not using it.
- Experiment with the paper folding images to see if it works. Can’t say for sure without seeing it executed.
- The inside front cover and back cover can be consistent or can be different. It is not something set in stone.
I wanted to have a clear concept of two different booklets, so I mixed and matched spreads from my 5 sketches to come up with a coherent story. I ended up going with two similar concepts of a paper folding motif and played around with the progression of the story through presenting information differently. Some spreads that I particularly enjoyed went into both the booklets, and some were unique to the booklet. I ended up enjoying the flow and concept of the booklet to the left more since there was a clear build up and climax (build up is the first three spreads and climax is the middle three spreads). This booklet idea also had the most spreads that I enjoyed. From these sketches, I went on to making them in Figma to lay out general ideas and colors.
Top Left (Inside cover and first page): Table of contents and first portrait of Milton Glaser. This spread is a continuation from the cover as the folding paper eases the reader into the booklet. I continue the appearance of his works on the underside of the paper slips to give the reader anticipation by showing crops of his work.
Bottom Left (Intro about Milton): This spread is the first real content the reader sees. It has a lot of background information about his childhood and about how he was heavily influenced by the city of New York. I wanted to have an image accompanying the text and also to have a building climax for the next three spreads, so I thought that the large paper strip city skyline made sense in the context. I also wanted to include some of his iconic works into the city to personalize the city as “Milton’s city” to pay respects to his immense influence on the design of New York as well.
Top Right (Poster Work): A sampling of his posters is shown in this spread and I decided to make it diagonal to break up the composition. The diagonal orientation of the posters made it more dynamic and allowed for me to play with interesting type placement.
Bottom Left (Milton at his desk): The center spread has the timeline of Milton’s life and career. It showcases Milton at his desk surrounded by his work and the timeline.
Top Left (Album covers): A large part of Milton’s early career was album covers, which matches well with his psychedelic style.
Bottom Left (I Heart New York): This spread is not that developed as I wanted to do a concept of having the page be ripped and showing New York bursting out from underneath. This along with some “I heart NY” merchandise has the goal of demonstrating how prevalent the logo is in the city and the world.
Top Right (Inside back cover): I wanted to add in some more of his work, so this spread is dedicated to his logos and interior designs.
Bottom Right (Front cover and Back cover): I wanted a simple yet incising cover, so I decided to have peaks of his work show through the paper strips. For the back cover, I decided on a heart to reference his iconic “I heart NY” logo.
After completing this first round of iteration, I had an easier time with some spreads rather than others. In particular, I had the most clear vision of the middle three spreads (the posters going diagonally, Milton at his desk, and space psychedelic spread) and the most difficulty with the last two spreads (I heart NY and logos).
Feedback from Langston and classmates:
- Try making the paper assets in real life instead of digitally.
- The city skyline may be unclear, adding windows would help.
- Take the collage elements up a notch to make it more clear or don’t use it.
- Having more information on the last page is strange for a conclusion. Make it more of a final saying or final take-away
Feedback from Brett:
- Agrees with Langston about the last spread. The last page should be a wrapping up of the booklet and not introduce new information.
- Add in some texture to the paper strips
- Alter the image and type of the first spread. The intro feels weird starting on the very first page and could be a quote instead.
- Opportunity for a pull out quote in the waves under the city of the third spread
- Find ways to connect the paper strip motif between spreads
- Pay more attention to the placement of type
There were a lot of helpful insights from Brett, and I really appreciated the comments about the last spread. I think that what he said about it being the conclusion and being the main takeaway helped me pinpoint what information I should display there instead.
Because Milton Glaser is so influential as a designer and he inspired many other designers after him, I wanted to pay tribute to that aspect of his career. I think one of my main takeaways from studying him is how so many people look up to him and how he transformed the design field in America.
Version 2
Alterations:
The changes from this spread was that I enlarged the portrait to encompass the whole page. Previously I had his image underneath a cut out of the page, but the placing was awkward and there was too much layering happening. I decided to change this by making his image more muted and beige and have it more as a background to the foreground of paper strips.
I added in some windows to the city buildings and put in a quote from the paragraphs. I also added in some wavy strips to make the illustration more understandable.
I reorganized the timeline for this spread and changed to previously beige line into a smaller version of the paper strips.
Before this spread was all about the “I heart NY” logo, but I decided that I did not have enough content to fill two spreads. I moved over the logo page to this page and tried to refine the “I heart NY” page. However, I was still having a lot of trouble with it since something felt off but I could not pinpoint what or how to make it better.
I had a really difficult time with this spread, so I tried many different iterations of it to try and make it work.
None of these really worked or had potential to work in my opinion, so I decided to ask for some help from Brett. I wanted the spread to showcase how widespread the logo is for people who are unfamiliar with it. With this goal in mind, Brett commented on how I was using cut out product images and how it felt strange since I didn’t show the products in real life. If I wanted to show how influential the logo is, I should show the logo in real life. This made a lot of sense to me, and I decided to shift tactics for the spread.
This last spread went under the most alteration. Before it was about his logo work and his interior design, but I changed it to house quotes of people who were influenced by Milton Glaser. The page on the right talks about his work at SVA, his accomplishments, and his social work. I think that this is what Milton is best known for, and I this this conclusion works much better than what it previously was.
As for the design, I wanted to bring back the thin paper strips and have that incorporate into a design that encapsulates a bunch of quotes by people who looked up to Glaser. I had a difficult time doing this since there was so much text and I didn’t want to overwhelm the reader. I tried to have the quotes within the strips in a long horizontal line, like some of Milton’s poster work, but I realized no one would read it and it also did not look visually appealing. I decided on making the strips a grid of sorts housing the quotes. I ended up removing his portrait from the center as the “I heart Milton Glaser” intention would be implied with the outline of a heart, and it looked better.
Other Feedback:
- Make some of the quotes on the last spread larger to give some hierarchy and make it interesting
- Change the really large quote on the last spread and move it into the paragraph. This will give more room for the work to shine.
I decided to try and make the paper strip graphic physically. I think that this looks better, but it was time consuming, and having some of the graphics as paper and some as digital would be off putting, so I decided to hold off on creating the physical strips. If I have time left over after refining the design of my spreads, I want to replace the digital graphics with these physical ones.
Version 3
The spreads that I worked for this iteration were the last two pages still.
This spread was really difficult for me and I wasn’t happy with the concept of this version, so I kept iterating upon it. Layering photos on each other looks messy and the viewer can’t see the images clearly, so I decided to scrap it.
Then, I experimented with simply putting the images in a grid so that the images are more of a focal point in the spread on the left. I think that what bothered me the most about this idea was the white lines in between the images. I wanted to draw attention away from the borders of the photos, so I tried putting cut outs of the images within the shape of New York city; however, it was difficult to understand that the map was of New York, and the disparity of the images was muddling the clearness of the map’s silhouette. Going back to the grid idea, I removed the white borders and placed a pull quote where the “ I heart NY” logo was. Brett suggested these changes since the logo is already quite prominent in the page, and repeating it would be redundant. I was also advised to work on the right page some more by playing with the grid for the logos (which I do later).
As I worked on altering the grid, I was not really enjoying the altered logo placements. I think that the middle spread is the more dynamic and interesting, but I was worried that the diagonals would make the words difficult to read. I also had to cut off a couple of the logos, which may or may not also be an issue from a readability or a “preserving the design” perspective. I ended up going for the spread on the right since I think that the original grid allows for the most readability while the stair shapes in the background add more interest for the viewers.
For this page, I moved the pull quote from the black square on the left page into the paragraph from Brett’s suggestion and put his work in the space instead. It allows the viewer to see the work better, and pulls away from having too much text on the page. The spread still needs more work, as I’m not completely happy with the left side.
I ended up removing the blue/green teal color from the page and made it fully black. I did this because it gave more unity to the spread rather than having an awkward divide on half of one of the pages. I wanted to expand the patterning of the right page to the left, so I thought the best way to do this was to keep it within the same background/environment. Some feedback I got from Brett was that the displayed work has the same weight, and that there is a lack of hierarchy. I altered some of the works to be bigger/smaller, which I think gives the spread a better entry point.
Version 4
Mobile Experience
Next we were tasked to create a mobile experience for our design hero. I started the process by creating a sitemap of the pages I wanted to include in the app.
Then I moved onto drawing sketches of each page.
From this, I was able to come up with a couple of viable ideas. I wanted to have the timeline be in horizontal scrolling view and there to be a grouping of his work in categories for the users to flip through. After this, I created some simple wireframes.
Moving onto actually creating the pages…
I started with the home page to also decide the overall visual language of the app. I played with a couple of varying concepts taking inspiration from my booklet and poster.
The main issue of these ideas were that they were not suited for a digital experience. I found that the concepts from my poster and the booklet (top left and top right/bottom left) were too complicated and did not provide a visual library that I could use later on in the app. I wanted something simpler for the landing page, so I created a altered version of my booklet.
I also tried the paper strip concept with the menu page, but it seemed clunky, and would only work if I used the paper strips as the main visual motif throughout the app. I decided that I was a bit tired of that motif, and I wanted to do something different for the app. I was still struggling with what exactly that would be, but I first laid out the timeline page to get some more ideas.
When I saw this Google doodle, I wanted to use a similar symbolization for Milton Glaser. I also wanted to have NYC in the background become more colorful as Milton’s life flourished. Milton Glaser was a main contributor to NYC’s rebound in its image during the 1960’s and 70’s, so I thought it would be appropriate to alter the NYC skyline from gray and dull to colorful and lively.
I wanted the timeline to be a horizontal scrolling experience where the user would land on a different time period for each screen. However, there was still something I didn’t like about the overall timeline, and I believe it was due to the use of too many dull colors. I decided to create a more cohesive composition using a better color palette in my next iteration.
This is the main landing screen. When a user opens the app, they will be greeted by this logo and have the option to press the down arrow to start the expereince. I wanted this screen to be simple so I removed Milton Glaser’s work from the underside of the paper strips. I also changed the background to white to match with the rest of the app.
This page is the about page. It gives a brief overview of who Milton Glaser is and some of his main influences from childhood as well as his philosophy on design. Also, I have scrollable images to accompany the text.
The timeline page requires the user to turn their phone horizontally. I have a beginning screen that advises the user to turn their phone before the timeline appears. Then, once the user is in the timeline, they can read what Milton Glaser did in different eras of his life. There is a central bottom timeline that guides the user and allows them to backtrack or fast forward to a different time. Because I didn't want to block the background, I decided to have the images in a pop up. If the user clicks the image button next to the time card, some accompanying images will appear.
This page contains Milton Glaser’s work. It has his posters, identity (logos), and albums of which the user can select and view more closely. It also has a features page which navigates to a unique page dedicated to the project.
This page is dedicated to Milton Glaser’s “I [heart] NY” logo. It talks about the large impact the logo had on NYC and also how it was developed. The user can scroll the “I [heart] NY” logo from left to right and also the images of the logo in real life. If the user clicks on the heart on the taxi image, it will reveal Glaser’s initial sketch for the idea.
This page has a simple explanation of the poster and an interactive unboxing of the poster. Since the poster was packaged with Bob Dylan’s album, I wanted the users to have a similar experience. If the user clicks on the album, it reveals the poster and the record. They can then unfold the poster to view it more closely.
