After creating 3 different versions of my Street of Crocodiles single page website (see previous crocodiles post for this), I decided to start fresh and completely redesign my website. I chose an autumnal theme to follow which allowed me to choose suitable photos to match and add a little bit of life to my web page. I was able to do this after lesson 11 in IXD101 as we added grids for photographs in class therefore I was similarly able to do it at home. This has now left me with 4 different versions of The Street of Crocodiles on my GitHub which you can view with the link.

https://github.com/katiedonnelly1/crocodiles/blob/gh-pages/README.md

I took myself off to Adobe Colours to find warm, autumnal colour palettes that I could use for my web page, and I come up with warm brown, bronze / orange tones. I added a full width photograph along the top of my web page, under my navigation bar which was welcoming and gave a little insight into what the webpage was about.

I also used a variation of Baskerville fonts throughout version 4 which is different to my other versions and this definitely brought together all of the headings, paragraph text and blockquotes.

 

Next, I took regular, autumnal photos from Unsplashed.com and brought them into photoshopped to be reworked. Here I ensured they were both square and made up of 340 x 340 px. This allowed me to take what I had learned in class of the grid method and apply it nicely to my webpage underneath my the blockquote. I really like how this broke up the photographs throughout the webpage.

I also added a different coloured background to my last section to again, break up some of the text so it wasn’t just as monotonous and similar to the rest. I used an off-white / buttermilk colour, #F2F0E9, and chose a photo that match this to sit above. I also used another full width photo for this as is showed a contrast before and after in the variation of background colour and made the transition more seamless.

 

Finally, I differentiated the footer from the rest of the page, making it the same burnt orange colour as the header was. This gave my web page a cyclical structure and overall rounded it up well. I also added some SVG icons to the footer and kept them the same colour as the text although they do change to the darker brown colour – the same as the navigational bar – when hovered over. I think this adds a little life to the more ‘boring’ aspects of the website and makes the viewer feel more involved in the decision making process if they were to use said buttons.

 

Overall, I am really proud of the webpage I have created for The Street of Crocodiles. I definitely think it is a big improvement from what I had created before with the images really bringing it to life. I am going to take everything I gave learned during the process and apply it to creating my designer essay web page and hopefully make it just as effective. I like that I have all versions available so that you can click in and out and see a gradual improvement over a few weeks having learned more in class.