IXD 102 – Design History Webpage

The final deliverable of semester one tasked us with writing a 1,500 word essay about a designer of our choice from the list we were given and then using our newly found knowledge in HTML and CSS to create a functional and interactive webpage for the essay to be presented on. The first task was to choose which designer we would be writing about from the following list that was given to us:

• 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

After doing fried research on each designer I made a decision and narrowed my list down to 3 designers and after further research into each of them and their work I decided to go with Josef Müller-Brockman. From what I had learned about him in class I knew that Müller-Brockmann was a Swiss graphic designer, author, and educator, who became a pioneer of the International Typographic and Swiss Style.

I decided to go with Müller-Brockman as I feel his work is still very relevant in design today and it plays a major part in my designs as well, meaning I could give my own personal input on his methods having experimented with them in my work.

I researched into Müller-Brockman further and decided on a number of sections for my essay to help with my research. These sections were

• Introduction
• Background
• Swiss Style
• Poster Work
• Grid Systems
• Conclusion

We got our first 500 words reviewed by Kyle in class, gaining positive feedback on the opening parts of our essay and also ways to improve. He also taught me about the method of Harvard referencing and how to properly use citations for quotes.

Throughout my essay I was able to showcase the work of Josef Müller-Brockman and then link it back to how I use his methods in my work and how it influences me, creating a good balance while also getting input from outside sources through quotes etc.

When I was nearing the completion of my essay I decided to start planning out what I wanted my webpage to look like using Figma as a template. I wanted my website to use colour effectively to help the text stand out and be easy to read and I feel my initial designs achieved this. Creating this template ensured that when it came to creating the webpage using HTML and CSS that I had a guide throughout and I knew what elements to include.

This initial colour scheme was not the one I chose for the final piece, instead using adobe colours to find some complimentary colours that would work well on a web page together and also taking inspiration from this Müller-Brockman poster:

I also used adobe fonts to pick out 2/3 web safe fonts that I could also incorporate into my code.

Creating the Webpage:

After completing my essay the next step was to create the webpage using HTML and CSS, so to begin with I started with a blank HTML document with my essay on it in Visual Studio Code. I then began by adding the simple tags such as heading, paragraph, block quote and sections before adding a CSS document.

Using adobe colours I decided on going with a colour scheme of light/mint green, white and black, using the fonts Contralto for the headings and nav and then study for the paragraphs.  For the CSS I experimented with different weights and styles for the fonts. and changing the padding and margins for different elements such as the horizontal rows I included to break up each section visually.

After having the essay sectioned off with different background colours for the different sections and each one being split up with horizontal rows, I moved on to add images. Using what we had learned about CSS grids I added two images side by side under my poster work section and then by using the export tool on photoshop I was able optimise the images I was using and get them to the correct dimensions, for example the main image underneath the nav which is at full page width.

Using containers I was able to keep my text in the centre of the web page while also keeping it left, aligned. Doing this allowed me to have some useful white space on the webpage which would help break the content up for the user.

After using code from our previous project with Paul, I was able to add social media icons and links to the webpage footer, adding another element of interactivity. I changed the hover colour of these icons to match the colour scheme of the rest of the website.

Group Critique:

The final part of the project consisted of a group critique in which we uploaded our website link to a biro board and got feedback from Kyle and our peers. I enjoy the group critiques as it allows me to get other peoples insights and opinions which could highlight improvements that I didn’t know needed to be made.

My colour scheme was highlighted as positive of my website which I was happy with as I took time to consider what colours would work well together in the design stage, taking inspiration from one of Müller-Brockmans posters.

The main feedback I got from Kyle was to ensure I only used 2/3 fonts to keep it consistent and also to add more images of Müller-Brockmans work in particular his grid systems book.

I implemented these simple changes and now I feel very happy with my final webpage as it achieves its main objectives, to be functional, interactive and easy to use. This project has allowed me to become more comfortable with HTML and CSS when at the beginning I had no idea how to code. I was able to understand and implement difficult elements such as grid images and now I have been able to create a high quality website which matches the theme of my designer.

Final Website: https://taylorj1302.github.io/webessay/webessay1.html