For this project, we were given different designers and topics to choose from to write an essay about, at the same time make our own website for the project.
We could chose from the following to write about:
- 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.
We were given quite a lot of choices, but after doing some light research about each one of them, I chose to continue with Wolfgang Weingart, the father of Swiss Punk.
What really stood out to me with Weingart was the fact that he was a rebellion and a rule breaker to reach his true potential in terms of creativity. I had struggled myself when I grew up attending school being bored and feeling limited doing school work, especially in high school doing art and design classes. Weingart hit a soft spot in my heart, and he was a very interesting man when he lived.
I wanted to know more about him and read how this man, a rebellion by nature, influenced designers even today with his creative and innovative designs. This is why I chose to write about him.
I began with reading about him and doing research and started writing my essay. I watched videos, read interviews, and looked at his designs to get inspiration for what to do for my web essay at the same time, what it would look like. I got inspired by simply looking at his book, when I laid my eyes on it, I knew exactly what colours I would use on the webpage, as well as how to design my header for the website.
The majority of Weingart’s works were in black and white, seeing these colours I knew it would add character to the website and also represent him to a certain degree.
After I had done my fair bit of research and written about 500 words on my essay, I began sketching out layouts and ideas on what to do.
Here are my sketches and ideas, refined to get a better structure for myself and the reader.
After colouring the UI I noticed that it had bled through the paper, I tried my best to save it so it would be readable.
During the sketching process, I made three slightly different layouts. This was for me to see what to change and keep the elements depending on what I liked or disliked about them. I came to a solution quite quickly that I really liked and decided to move on to Adobe XD for the sketches.
For my Adobe XD sketches I played around with the two different background colours that I had in mind, getting an idea of what it would look like and visualizing it. I also experimented with the gradient, if I were to add it or not, I also tried it out when I was making my website since it took a minute to try it out.
After making the prototype on Adobe XD I began making my website. At this point, I had poked into it already without making a proper sketch in Adobe XD, only on paper trying to visualize and see what I was capable of with the three sketch ideas that I had, that version of what I made was later shown in class. I did however not get a lot of feedback on what to change, and I took that as a good sign.
Before I dived into making the real website I was thinking about, I finished my essay and made sure it was done. It helped me to choose what images to add.
Group critique
Whenever we had our group critique, I didn’t have all of my essays finished, and couldn’t properly present what my finished design would look like with a whole lot of the content added. I received positive feedback, from both my tutor and my classmates, which I was happy about, since then I felt like I was working in the right direction.
At the time I had only partly done my website and was still in the design phase using Adobe XD, but at the same time, I coded the website to see what was possible and not.
When I began making the website I had used an early version of a previous exercise done in class, and from there I began to shape my website. I can admit that I did put a lot of water over my head early on thinking I would succeed in adding features using Javascript into my website, which I know very little about. After struggling with it for hours and days, trying to make my ideas come true, I gave up and sought for more simple solutions to add to my website.
While the whole outlay was quite easy to do, the features I wanted was not the easiest to add, with the very little experience I had. The three features I wanted to bring into my design, as mentioned in the sketch were the following:
- The collapsible menu at the top, linking you to certain topics on my website.
- A collapsible menu at the bottom, when clicked on would show my sources for the research and images, which would also scroll down when interacted with.
- An arrow button that would follow you throughout the website, only appearing whenever you had reached a certain point of the website, making it less cluttered.
I always go by a motto, and that’s that google is my best friend, which at this point it very much is. I looked up solutions on how to make these features available using only CSS and HTML, two of them sort of were, except for the arrow. I did a lot of research, a lot of trial and errors to get the desired look of the website. Especially with these three elements. To make the button at the very bottom for sources, I took help from this guide. I also took help from these tools to make a Gradient background as well as a filter for my arrow button on the end of the page, so it would shift colours to my desired colour when hovered. I didn’t have much of a clue how to edit an SVF file so I found a very simple solution after a lot of digging.
The background was after a lot of changing between dark grey and off white, finally finalized to be darker to give the website a little bit more contrast, creating a balance between the colours, making the website more attractive and less straining to look at.
For the graphics, I only made the header myself with illustrator and edited one image that was too long, making it wider using photoshop.
Sketch of my idea.
The finished product in Illustrator
Here is the final version of my website and essay.
https://flinkfeltm.github.io/weingart/weingart.html
I’m very pleased with the outcome of both. But, Just like Weingart himself I’ve never been good at cramming information in my head and later expressing them in school, especially in a language that isn’t my mother language. I felt like it went well, and I’m incredibly pleased with the website and the outcome of it. I learned a lot when I made it, the knowledge I’ll take with me when I make more websites during my free time since it was really fun to do.
It was quite a challenge to get all the pieces to fit and make the website like I wanted it to be, but in the end, it ended up being more than what I expected it to be. I only wished for us to be more knowledgeable before making this project, so we could reach our true potential and make some really fantastic final pieces.
It was also very hard to find concrete information on Weingart unless it was an interview or his own book. Many websites and authors were saying information about him without a source, and it couldn’t be found when I looked for the same information. I’m glad that I chose to research Weingart in-depth like this because he is a genuinely interesting designer that broke the rules the masters had set out. He experimented, played around and got some fantastic results from it. Which is what I want to do, and how I learn, from experimenting and playing around.
Thank you for reading.