Milton Glaser –Animation and Website experience
A video about Milton Glaser’s perspective on drawing and a website experience
I started out the video by thinking about what kind of narrative I wanted to create. Because Milton is such an influential and larger-than-life designer, I figured that a video talking about his achievements and work wouldn’t be as impactful. Instead, I wanted to showcase a certain part of him that makes him unique from other designers.
When I was searching for an interesting narrative about Milton Glaser, I stumbled upon a video of him discussing about drawing and how important it is. Because Milton is a designer who incorporates illustrations into his works a lot, I wanted this to be the focal point of the video. In my research, I found that Milton Glaser believes that art supports design and that drawing is a strong fundamental to design. I think that this is somewhat of a unique take in the design world since I often hear about design as being detached from art or being different from art. So, I wanted to construct a narrative about this by incorporating my own drawings and Glaser’s style to demonstrate his take on drawing.
Audio
I took my audio from this video where Milton Glaser is interviewed and gives his take on drawing. This interview gives a lot of insight to his process as well as his general philosophy on life. Because Glaser sometimes talks in a way that produces many side stories, I had to construct my audio carefully.
I ended up taking bits and pieces of one section of the interview and rearranging it to make sense (like putting something he said later at the beginning and moving around some things in the middle). Although I rearranged it, the overall meaning is still the same.
Storyboard
I knew that I wanted to have a style that was in line with Glaser’s style, but since the narrative was about drawing, I had to incorporate that as well. This proved to be a bit difficult since his finished style is very bold and not sketchy at all. Since his drawings are quite different from his illustrations, it was hard to combine without them feeling separate. However, I feel that the two styles are ok to have in the video, and that the style doesn’t have to be rigid.
Background Music
When deciding the background music I wanted, I thought that doing something more pop or jazz inspired would suit Glaser’s style better. However, I was not able to find something that was “pop” in essence without turning into a full on pop song. Having literal pop sounds would have been nice to animate with, but unfortunately this style of music was really hard to find. The music I ended up finding was more emotional and classical inspired, which ended up working well with the words he was saying.
These three songs from Bromeliad suited the voice over the best. I ended up going with Creative Destruction because the pauses and climax of the song worked really well with the audio without a lot of editing. It also had some moments of strong melody that I thought would be nice paired with movement in animations.
Animating
Before starting to animate, I had to reevaluate my storyboard. Since my original storyboard was based on an audio clip of 1:30 minute and I clipped it to 1 minute, I had a lot of extra scenes. Because of this, I had to rethink my storyboard.
Some ideas I had for the scenes were to combine live footage and Glaser’s drawings to convey the idea that drawings help people see real life better (which is his main point in the video). Because I had that vision, I knew I wanted to do a sketchy style of live footage that would reveal the live footage.
I converted a video of a girl dancing into a gif and drew over the images to create a short and choppy animation. I wanted the drawings to be really sketchy to give the perception of drawings in progress.
Previously, I had the original video in the background of the sketch. I thought that this would be better to smoothen out the choppiness of the animation; however, I got feedback that it was out of place and that they wished it was more integrated into the rest of the video. So, I decided to take the background out.
The beginning of the scene was a line that moves through a field of enlarging dots. Then the line morphs into the outline of a woman and turns into the sketchy animation of her moving.
This is one of the scenes where the animation turns into live action. I was worried that it would feel out of place in the animation, but I wanted to include it since it related to the narrative well. I decided to include another live action video clip at the end so that it would mesh well.
In this part of the voice over, Milton Glaser talks about ears and the strange curves and shadows of ears. My first idea was to have an overlay of an ear drawing on multiple images of Glaser’s illustrations with a close up on the ear. This looked really strange since the ears of the drawings were different shapes, which meant that it didn’t fit in the outline of the same ear. Also, the images were all different resolutions, which didn’t help with having it be cohesive.
My next idea was to use a drawing of an ear. I drew an ear on procreate and tried to make it look painted. I built the scene with this painted ear, but after hearing some feedback about using many mediums, I decided to recreate the ear in the pencil sketch style. This way, the drawn girl and the drawn ear wouldn’t be as disjoint.
For this, I just decided to show visuals that go with what he says, so a line appears when he says convoluted curves and shadows appear when he talks about the shadows of an ear.
The transition is a wavy thing that goes across the screen that moves to Milton Glaser’s work. For this section, he says that you wouldn’t see an ear in the context of life, so I took the chance to showcase his illustrations. The drawings I show are zoomed out from ears that I have shown before.
In this scene, an eye focuses on floating objects as Milton Glaser talks about being able to see without preconceptions. I wanted the visuals to go with what he was saying, and I thought that an eye being able to see clearly would be a good visual metaphor.
Then the eye zooms into this spiraling scene. I made it so that this is sort of like planets orbiting around, which goes with the next part when the earth is revealed. After this, there is a grand reveal!
Milton says that if everyone would be able to see without preconceptions then the world would be a beautiful place. I wanted to make the beautiful place but in Milton’s style, so I took inspiration from a few of his works.
I took the color palette of the first design and the composition of the middle design. I wanted to connect this last scene with the scenes from before, and those scenes had many floating objects of geometric shapes. So, I took some of those objects and incorporated it into the scene.
He then says “but its not” (a perfect world) so I made the scene darker and had the objects slowly stop moving. I wanted to give the feeling of an amusement park turning off first with the lights and then with the rides slowly stopping. I think that an amusement park closing gives the same feeling as what I want to convey: a magical world returning to reality. However, I think that this transition needs some work since it is not really clear what is happening.
The last scene returns to Milton Glaser as he gives his final remarks. He restates that drawing is a way to try to see the world as it is, and I thought it would be fitting for this scene to come from Milton on screen.
Final Video
Website Experience
I knew that I wanted the website to be retro feeling since Milton Glaser’s work that I would be showing would mainly be from the 1970’s. However, I wanted it to be quite simple and minimal so that the style translates well as a modern design. Starting with some Figma sketches, I laid the ground work for what I generally wanted (although these would be altered later on).
These mockups are rough so that I can alter things when they get translated to code easily. I’m not very experienced in front-end web development, so I wanted to give a lot of leeway incase certain layouts were too hard.
Then, I coded the website and this ended up being the home page. It is pretty similar to my mockup in Figma, but I added a bit of text about Milton Glaser, and removed some of the floating objects since they are fixed on the screen when scrolling and could cause legibility issues.
This is what the timeline looks like. I went for a very grid-like structure to keep things simple.
Milton Glaser’s work is displayed in a basic 3 column grid. I didn’t want to overwhelm the user with all his styles of work, so I only included a few notable pieces.
I also included the video animation just for varying media on the website.
Because the website is quite simple, I thought it would be nice to add some moments of interaction. Each of the floating objects wiggle when hovered over and the navigation is color coordinated and shows the colors when hovered over.
View the final site here.
