Once I completed my essay, I moved onto planning what I wanted my essay to look like digitally. I began with pen and paper and sketched out some quick ideas which I then built on Figma. The basics of each are similar, but I wanted to play around with using different colours and imagery for each one to see if I could present the essay in multiple ways.
Link to sketchbook: https://documentcloud.adobe.com/link/track?uri=urn:aaid:scds:US:5b5eb46e-ced5-440d-a47e-d5fcef806032
When I started working on Figma with these designs, I discovered that some of the elements within the designs didn’t really work, like image sizing and placement. So, I played about with these parts until I found a composition I liked. I wanted to challenge myself to see if I could create different overall looks for my essay. After creating my first design, which I based off what I learned in IxD 101, I explored ways of presenting the different parts of my essay, like quotes and images. My main tool was using Adobe colour to help with my colour palette for each, in an attempt to make the webpage look cohesive. I took a colour from my main image at the top, and based the colours for titles, quotes and background sections off of it. I mainly stayed to the complementary or monochromatic options, as I wanted to have one feature colour and then darker colours for the other elements.
PDF versions: SAUL BASS 1 SAUL BASS 2 SAUL BASS 3 SAUL BASS 4 SAUL BASS 5
At the moment, my favourite designs would be the first two and possibly the last. I like the different approaches I took with the first two, but I’m not sure if the images I chose for the last design work with each other. My thought process was to add a modern touch to my website, using recent imagery from Unsplash. I feel my images for Psycho and Vertigo work, but I struggled to find one for the title. So, with the one I have, I had to make the text very small and I’m not sure if it’s still as clear as the other options. I like the fun element to the second design, particularly the title. Orange and black were a common colour pairing used by Saul Bass in his film poster designs, so I felt this was a fitting colour choice. However, again using Adobe Colour, I was given five colours, and I’m not 100% sure on if the brown colour I used for the background blocks works with the orange and black as well as it should. While the colour palette on my first design are quite dull, my thinking was linking it back to how Hitchcock and Bass regularly worked with black and white, so I decided to use this as my inspiration. I quite like the pop of colour with the small areas of pink throughout the design. My next step is to start building my webpage with HTML and adding CSS.
HTML & CSS:
I found the prices of building my webpage fro my essay a ‘learning as I go’ experience. I based the majority of my HTML off of what I used for my project in my other module. As I worked through my five designs, I became more confident and aware of what I could do on Visual Studio Code. I decided it would be best to keep my designs simple as HTML is completely knew to me. So, my hope was that I could create a simpler design well, rather than attempt a more complicated one, and it not turn out as well as I would want. I feel I completed all the elements, images, background colour, font and navigation quite well for my first attempts. It took me a few attempts to get the sizing of images right, as I had to resize some before I placed them into the HTML and CSS so they matched the padding and margins I had set. Although, I do know some of my spacing and placement in some areas is a bit off, specifically with my quotations.
I created five options for my essay, as I wanted to see how it looked as an actual webpage, and moving throughout the different sections of the page. Below I have attached a link for each version.
Version 1: grayscale
https://ciaraffraser.github.io/saul-bass/saul-bass-essay.html
This was the first page that I built and found it the most challenging and time consuming as I had to figure out all the details of elements like the padding and margins so that the spacing complemented the content. Also, I had to make sure the images fit either inside or outside the paragraph margin, which I had set to 800px.
The two title sequences I looked at are mainly in black and white, so I felt a webpage based off this could work. Choosing my main image of a portrait of Saul Bass, I picked a colour from it and placed it in Adobe colour. I liked the subtle pink tones that I was given as it adds a small pop of colour. I felt this would be best used to highlight the quotes and also provides a visual break. Looking at the layout of my essay, I wanted to break it up so it is easier to follow. To do this, I pulled some images out past the paragraph margin, to take up the whole screen. Similarly, I added background colour changes for some sections.
I feel I work my way through the HTML and CSS quite well, with all the navigation working correctly. I think the spacing in the majority of my essay is good, but there was some areas I struggled to work with, resulting in the gaps and spacing being slightly off. I am pleased with the overall end result of this design, as I feel my colour palette, images and font complement each other. if I was to change one thing, I would rearrange which sections I added background colour to, so the concluding paragraph wasn’t sandwiched between two sections of colour.
Version 2: orange & black
https://ciaraffraser.github.io/saul-bass/saul-bass-essay-2.html
I took a different approach for this design. During my research, a common feature was the use of the colours orange and black in a lot of his work and designs inspired by Bass. So I decided those would be the two main colours for this option. An iconic feature of Saul Bass was his glasses, so I included these in the title design and used text to resemble his face. I kept the same margins and padding which I had previously used in my other version.
I placed the orange into Adobe colour which gave me my colours for the headings, backgrounds and lines. For the navigation bar, I felt the strong contrast of black and white would work well alongside the title and added the orange as the hoover to keep the connection to my chosen colour scheme. The darker pink/brown colour was the colour I chose for the background blocks is the one part I’m not altogether sure of, as I don’t feel like it matches the rest of the webpage. I tried exploring different combinations but couldn’t get one to work better, so I decided to stick with it. I feel like my imagery matches well, especially the Bass and Hitchcock image which works well alongside the orange and black quote.
The layout is very similar to the other versions, as I wanted to have a simple layout I could try to create to my best ability, instead of challenging myself too much too soon. Although, I feel I planned the background colours better as the concluding paragraph in this design fits in better under the image, rather than between two colours. I added more imagery to my layout to try and break the text up more and I feel it does make it easier to read and allows the reader to see what my essay is referring to. As this was my second attempt, I was becoming better equipped with how to work with the HTML and CSS. So, I feel my spacing improved from my last version, but some of the block quotes’ padding is still off. I feel this is something I will learn as I go and become more confident with.
Overall, I do like how the webpage came out and think it shows off Bass’ style within the colours and imagery. I particularly like my design of the title as I feel it engages the reader straight away and I feel I made the correct design choices throughout to make sure all the elements worked with each other. As I said before, if I could alter something, I would try to see if I could find a better colour alternative to the pink/brown backgrounds as something about it feels off to me and I would like to see if I could improve it.
Version 3: simple
https://ciaraffraser.github.io/saul-bass/saul-bass-essay-3.html
I changed my approach for this design, as I wanted to simplify it right down. I wanted to see if I could create a webpage that simply focused on the information. I changed the title layout, not having a large image across the screen, instead having the title first and examples of Bass’ work below. This is where I came up with my colour scheme as I found red was a common colour used. So, using the ink dropper I repeated the previous process of picking a colour and adding it to Adobe colour. I really pulled back on the background colour blocks and lines and relied on images and headings to break up the essay, so it is a lot less busy.
In my previous designs, I kept the alignment to the left for all the headings, but for this one I felt it would suit if I moved them into the centre. This worked well with how I placed the quotes in this version, where I centre aligned them and had a block of colour along the side to highlight it. However, I did this by inserting the quote as an image, so for the larger ones, the resolution isn’t as clear as I hoped it would turn out. I do like the pink colour scheme I used as I feel it brings the page to life with the simple layout. There is a lot of negative space in this design, and I’m not sure if I like it or if it would look better with more colour added, but the aim of this version was to see if my essay and images would suit a simpler layout.
I used a wider range of image sizes and shapes as I felt the square images would coincide with the layout better and keeping images in between the 800px margin worked with this as well. I tried to include images which matched my colour scheme, mostly in black and white or having a hint of the pink/red. One area am not too sure of is the colour for the footer. Similar to version two, I was given this colour on Adobe colour, but I feel it might be a bit too vibrant compared to the rest of the webpage. On the HTML and CSS style, I found this the simplest design as I didn’t have to worry about the spacing between images and coloured backgrounds. It took some trial and error to get the correct sizing for the squared images but I feel they did come out well. For the quotes, I wasn’t sure how to mark up the design I wanted using HTML and CSS, so I resorted to adding them in as images, which meant I lost out on some resolution. I feel my spacing between paragraphs and headings are quite consistent and accurate but could be improved around the images.
Version 4: green
https://ciaraffraser.github.io/saul-bass/saul-bass-essay-4.html
I saw the illustration of Saul Bass during my research and thought it would be a strong image to have at the start of my essay alongside the title. So this was then the basis of my colour scheme and I wanted to use a new colour, so I worked my way through the options until I came across a palette with green in it and decided to go with it. I kept with the simpler layout as I liked how it turned out, changing the colours around in certain places. However, I did resort back to aligning the headings to the left as I preferred it over the centred ones. I feel like the green tones work well with the greyscale of the majority of Bass’ work, particularly the ‘Anatomy of a Murder’ title sequence.
I took a new approach for title the sections where I evaluated the title sequences of ‘Vertigo’ and ‘Psycho’. When I was looking for images on Unsplash, these images came up and it gave me the idea of incorporating recent images and giving my essay a modern feel to it. So instead of having the title sequences across the full screen, I kept them within the margin and had the two larger images with the title across them to help separate the two parts of my essay. I do like how this brings a different vibe compared to my previous designs as it is still obvious what film I am talking about, but using completely new imagery. I also didn’t colour my footer in this design, instead opting for a coloured background for the concluding paragraph. I so like how this turned out as I feel it shows the essay has come to an end and the information at the end isn’t part of the essay content answering the question.
The HTML and CSS is very similar to my third version with changes in colour and new title image, so I didn’t find this side of the building process as time consuming compared to others. For all my designs I kept the font the same as I felt it was the closest one I could find that was similar to fonts used by Bass that would be suitable and legible on a webpage. In terms of spacing and padding, there are some inconsistencies in the latter half of my essay with spaces being bigger above than below the images, whereas I would have liked them to be equal.
Version 5: modern images
https://ciaraffraser.github.io/saul-bass/saul-bass-essay-5.html
This version is the same as the one above, but I changed the opening images and title to match the modern images I included for ‘Vertigo’ and ‘Psycho’. I wanted to see how it would look if I included new images for all three. The link in the title image is to ‘Rear Window’, one of Hitchcock’s iconic films and I feel it indicates an ominous feeling when you look at it. I simply placed the title across the top inline with one of the floors in the tower block.
After completing these designs, which are the options for my final submission, I explored more ‘out-there’ designs which I wouldn’t have the skill set to build using HTML and CSS yet, but would be how I would’ve approached my designs if I was more confident in these new skills…
Link to sketchbook: https://documentcloud.adobe.com/link/track?uri=urn:aaid:scds:US:3bc20c8b-1fa6-4d6f-8c5f-54c225973303
I recreated some of these designs on Figma, some full length and others specific sections so I could digitally visualise how it would look if I did build the webpage.
