IXD101: Adding Finishing Touches to Baskerville and Street of Crocodiles
Week 10 and 11 of class were spent first by exploring Adobe fonts to find some web safe fonts that we could transfer and code into our website to make it more visually appealing. For the Baskerville piece I thought it would be more appropriate to leave the header fonts as the standard Baskerville and then for the body use ‘Mrs Eaves’ as there is a section of the Baskerville website with the same title. In the street of crocodiles piece I decided to follow this same layout as I liked the way both fonts contrasted each other. Adding the fonts to the HTML and CSS code was easy to do, simply selecting the font on adobe, adding it to our web project folder and pasting the link into the HTML and then putting the font name into the CSS.
After changing our fonts we then moved onto sectioning parts of the webpage, adding different colours and visual elements to each one. I did this on both my pieces to add contrast and make it more visually appealing. The process of adding these sections was simple, using the <section> tag to open one and </section> to close a section. Then adding a part in the CSS for a dark and light section, adjusting their colour, margin and padding then adding a div class to the parts of the HTML that I wanted to change the background colour of.
We then looked at image types, optimisation and how to add them to the Baskerville page, starting off by looking at the difference between a jpg, gif, png and svg. This allowed us to see how to get the best quality from our images while keeping their file size low so that as a result they load on the webpage quickly. We linked the images in our markup by using this line as an example: <img src=”img/john-baskerville.jpg” alt=”A portrait of John Baskerville” title=”John Baskerville designed his famous serif typeface in 1757″/>
We would then go on to add a little styling to centre them on the page and use max-width to introduce a simple responsive element to the content. We would use photoshop to get our images to the correct dimensions and then export them, starting off with 1 image then moving onto multiple using a CSS grid as an aid. The Grid was hard to understand at the beginning but slowly but surely I began to understand it and used it on my Street of Crocodiles piece to add these images:
We finished off both websites by adding social media icons and links to the footer, doing so by adding code provided to us by Mr McCormack. He gave us a connect.css file which we then duplicated and added to the css file of both websites. We then changed the hover and background colour of the icons to make them more specific to our website themes.
