Deliverable 03 – Design History Essay Webpage
For our third project in IXD102, has to do with being tasked to write an essay of no less than 1,500 words on one of the designers listed below.
- Jan Tschichold
- Saul Bass
- Massimo Vignelli
- Josef Müller Brockmann
- Otto Neurath
- Paula Scher / Natasha Jen / Giorga Lupi [Female Pentagram partners]
- Wolfgang Weingart
- Erik Spiekermann
- Tim Berners Lee
- Jessica Hische
- Aaron Draplin
- Pentagram multidisciplinary design studio
- Jon Hicks
- Kyle Tezak
- IDEO
Our lecturer, advised that we should structure our essay based on a question e.g., Stefan Sagmeister, creative genius, or exhibitionist? How has Tim-Berners Lee changed how we communicate? This would help to keep our essays focused on the topic at hand and how to go about presenting information on the designer chosen. I briefly looking over each of the designers listed, I immediately knew which one I wanted to analyse and discuss. Saul Bass was one of the most prominent on the list to be vehemently involved in the making if films. As I did a moving images art course in school, I was fairly used to analysing and writing essays based on the work of filmmakers. Also, I do find it rather enjoyable to deconstruct film scenes and speculate as to the filmmakers decided to use this sound, this shot layout, or this type of lighting. Perhaps what I found most appealing, was Bass’s quirky graphic design and typography. He seems also to enjoy animation as its featured in several of his title sequences. The question I decided to base my essay around was “How did Saul Bass change the face of the movie title sequence?” as that’s what he was most known for, and what I personally found to be the most interesting side to his work.
While I was developing the essay, I was also, in my other class, learning HTML and CSS in tantum to prepare for displaying my essay on a
webpage. I was already expecting HTML to be difficult, but when we were introduced to it for the first time in class it was so much more confusing than I had anticipated. To make the construction process faster we were advised to already layout the foundation of what we
wanted the web essay to look like. At first, I very briefly sketched out a visual I was constructing in my head on what the website should look like, in terms of trying to design it for a webpage based on Saul Bass’s work. After sketching the web design out, I then took it to illustrator to get a better visual od what I wanted the website to fully look like without the restrictions of my poor HTML knowledge.
One of the first introductions to the influence of Saul bass’s work without any prior knowledge on him was the heavily inspired title sequence from ‘Monsters, Inc.’ The Monsters, Inc title sequence seems to be inspired by the general work of Saul Bass, with its colourful and quirky composition it displays on screen, like many of Saul bass’s work e.g. ‘Around the world in 80 days’, ‘The Seven Year Itch’. The Seven Year Itch in particular, seems to have made up the bulk of the inspiration for the title sequence. With it’s use of a plain black background, contrasted with rectangular colourful cut-out style graphics. It mimics using the colourful shapes to reveal the credits in a fun stylised format. Even the typography that they use is very similar to the typeface used in The Seven Year Itch. Since I found the visuals of that title sequence to be so effective, I decided to use that as the main inspiration for the aesthetic of my own webpage. I thought that having the webpage be based on the visual aesthetic found in Bass’s work would be good way to coincide with the essay it houses. As the user can fully immersed into his work and be able to understand why he was so successful as a designer.
This is the design I constructed for the web essay, based on that initial sketch I did. This was just a brief outline of what I would like the website to look like, as due to my limited ability with HTML and CSS it’s basically a rough draft of what, possibly the website would like. I think that The Seven Year Itch opening credits format lends itself well to a web structure. While creating the website’s structure in illustrator, I realised the rectangular shapes used in the title sequence was perfect for sectioning off different segments of my essay, essentially, a colour for each different topic discussed. I just felt this would make the website more visually stimulating than your average white background website. I decided it would be nice to have the navigation menu, displayed on the left side of the webpage as I feel like I don’t see too many websites nowadays that still do this. Most websites nowadays have the navigation menu displayed horizontally under the website title. I did try to somewhat tie each coloured background to that section of the essay’s topic. For instance, at first the section regarding Saul Bass’s work on Carmen jones, was initially going to have a red background. But the poster Bass worked on was already predominantly red and black and therefore I felt that the poster paired with the background would look washed out, so I decided to go with red’s complementary colour, green. However, like everything else on this rough draft, can still change depending on how it looks in my final website.
Final website
After having now constructed my website after a very long and strenuous process of fighting with HTML and CSS. There were many changes that were made to accommodate the format of HTML and what design choices seemed to be most appropriate based of what our lecturers were demonstrating in class. The most significant change that was made to final website from that first initial design, is the navigation menu. Rather than have the navigation menu be placed vertically as the left side of the webpage, I opted to go for the more modern, visually pleasing horizontal navigation menu. The main reason for this change was due to limited knowledge on coding, that lead for me to decide to go for the horizontal menu. When it was presented to us in class, the menu was taught to us with a horizonal format in mind. Which I couldn’t argue with, as on further inspection, I prefer the horizontal menu. When I was picturing my webpage, I pictured the navigation menu to stay in place to make room for the text displaying my essay. With the horizontal menu, a user can scroll up and down the freely while the menu stays displayed at the top of your screen. Which in turn, drastically increases the navigation experience by optimizing the convenience of the navigation menu being displayed anywhere the user goes on the webpage. However, while I think the navigation menu being displayed horizontally at the top of the screen was a good change, I don’t think the change in colour was. Instead of the orange colour, from my initial design, I chose to make the navigation menu’s background be yellow, with the text remained white. In hindsight, I would have changed the text’s colour to balance out the brightness of the navigation menu. Due to the white and yellow colour combination, it’s led the text to be somewhat unreadable especially from further away as seen in Figure 1. But the reasoning behind choosing the yellow for the navigation menu is based on how it looked against the black background of the header to the webpage. The yellow menu just seemed to pop when displayed against the black header, which it always would be when the webpage is opened, which would add to a better viewer experience, when they open the webpage to a pleasing colour combination. The black background, as mentioned in my initial webpage design, was inspired by Saul bass’s work, The Seven Year Itch and The Man with the Golden Arm, in particular. The black background offsets the coloured sections of the essay making them more vibrant and alive. I tried to find a typeface that matched with the plethora of quirky typefaces Bass has used throughout his work. He seems to favour typefaces that are cartoony and less neat, favour inconsistent kerning and x-height. I found a typeface in Adobe fonts, while searching with ‘Fun’ tag enabled to filter in more quirk exaggerated fonts. I came across a font named ‘Ruddy’ which fit the exact description of inconsistent kerning and varying heights in lettering. It thankfully reminded me a lot of the type of font you would find it Bass’s work in the 50’s and 60’s. Namely, ‘It’s a Mad Mad Mad Mad World’ (1963) and ‘Anatomy of a
Murder’ (1959). This type of choppy papercut out style, lends itself well to a more simplified, flat background style. Which was very convenient as my coding skills won’t allow me to create an intricate and complicated visual style for the webpage. So, it’s good that Bass’s visual style leads more to minimalism than maximalism. For the secondary font I chose a simple Calibri typeface, as originally was simply going to have the whole text on the webpage be in Ruddy. But after looking it over, I decided it was best if went for a simple sans-serif font that completed the Ruddy typeface, rather than just use It. I kept the Ruddy typeface the header and sub headers, but the bulk of the text be in Calibri, it’s simply a more practical and readable typeface than Ruddy. This is also supposed to be an essay, so it makes sense that the typeface, that makes up most of the essay be in a more basic, straightforward typeface. In terms of the background for each topic, I used a div class in the HTML to provide each of the sections with their own colour. There were a few changes I made from the webpage I designed in illustrator. For instance, in the end I did decide to go with the red colour for the section covering Carmen
Jones, as the pastel tone of the red background, was different enough to not clash with the red featured in the poster and screen shots displayed. The use of pastel colours once again came from The Seven Year Itch and its use of pastel-coloured rectangles. The pastel colours simply make for a good contrast in terms of the dark, saturated black background, paired with the muted, light colours of each section of the essay. Though looking back, I would have made a more conscious decision to think about how each colour would look when displayed next to each other, as some of the colours I don’t think work as well when their put together. The orange and green of the ‘Saul Bass’s Innovative Work’ and ‘Conclusion section’ seem to work against each other as their both rather bright shades of their colours and don’t harmonize well. When looking at where the two section meet on screen, it can even be a bit strenuous on the eyes, as the bright tone of each colour fights for dominance. I chose to make the section containing Bass’s work on The Man with Golden Arm purple as purple is often considered a colour of pride and nobility which I thought was perfect for the title sequence that significantly impacted both Bass’s career and the title sequence format as a whole. Blue was chosen for the section instruction Saul Bass and his work, as its often the colour used most for a business’s colour scheme as well as having calming effects in the mind. This seemed like the appropriate colour to help introduce this designer and help establish what the type of work they do and what their forte is.
Green is a colour that represents stability and safety which I thought matched perfectly with the section of the essay which discussed Saul Bass’s legacy and how it worked out for him so well. Then for the conclusion to the essay I chose orange as the
background colour due to its nature in promoting general wellness and emotional energy. I also chose it as warm tone colours were primarily used within The Seven Year Itch’s title sequence and wanted to call back to that as the main influence for the webpage’s visuals. For the reference list and bibliography, I simply chose white as it’s a more serious colour and this section of the website was used primarily to showcase my sources and where the viewer can find them. Its also
technically not a part of the essay, so to differentiate this section from the others I didn’t give the bibliography a background colour. For contact information I made the background from that black not only so the whit buttons and text could stand out but also to call back to the very top of the webpage, which is also black with white writing, somewhat at like bookmarks for the essay.
In Conclusion, though I had a very hard time dealing with the coding process of this project, I do think it was worthwhile. For a plethora of the methods used in coding I figured them out on my own with out the help of the internet, but with trial and error. Which took an exceedingly long time, but I eventually got there in the end. I do think that it was helpful that the visual style that I was trying to evoke was so simplified and flat. Since if I wanted to create a more dynamic and innovate webpage design it would have been a lot more difficult and the odds, are I likely wouldn’t have been able to achieve that. Due to the fact I learned coding through trial and error, I was able to pick up knowledge more effectively and therefore definitely have a much better understanding of CSS and HTML operate.
To see the results of learning CSS and HTML, here is a link to my design history essay webpage: