When web design was just beginning, web pages were full of content with many different images, colours and sizing of font which looked very crowed and loud but more modern websites are very minimalistic with little content but still very visually pleasing while still functional. This type of feel was what I wanted to implement on my Street of Crocodiles project. Taking what I had learned with my first mini project with the Baskerville document I began working on my final project for 101.

The first thing I changed was the typeface. I wanted to try and use a mix of two sans-serif fonts that complimented each other well and for the title, headings and nav bar I chose Gill Sans and for the paragraphs with larger content I chose Helvetica. This was because Gill Sans did not work in paragraphs but I liked how Helvetica looks as big chunks of information.

The next step in my process before chosen the colour palette was choosing the images that I would feature on my website. I carried out some research on The Street of Crocodiles to see what type of content would go with the theme and I discovered that it was quite a sad story but was based on a market so I searched ‘Market’ on the https://unsplash.com/ website which allows you to get free, high-quality images. As I knew already I wanted my website to have a black background like many of the more modern website designs, I was looking for colourful images that would stand out against the black. Once I had chosen some photos I opened Figma and started to plan out my idea of how I wanted the website to look. This would be my visual guide so all that I needed to do was experiment with the code to get the outcome I planned, this helped me massively when I got lost because of how hard the code, this wireframe would help me to stay on track.

I wanted the website to have a simplistic feel and decided to just have minimal colour in my fonts other than the blockquote to indicate that it was different from the other pieces of text. I wanted the text to have a fair bit of padding on each side so that the website would run in a narrow line throughout my website. For the first piece of text I picked red because it ties in with the header image right above that features some read close to the bottom. The blockquote was coloured blue to match the image below as it has a lot of vibrant blues in it like the floor and stand. In my idea for the website I had the blockquote inside a red circle but after many attempts to get the circle the right size and the text to line up in side it so in the end I went for a rectangle shape using ‘border-style: double;’ in CSS.

 

Unlike my first website design where the options in the nav bar would open a new page, the selections would now jump to that part of the website remaining on the same page. This interactive element feels a lot nicer than moving to a new webpage and its more efficient for the user.

I had learned how to create rounded images with CSS and decided to implement it in the website even though I had not intended to in my idea layout. I done this by adding a ‘border-radius’ to the images. However it also rounded the header image which I wanted to go edge to edge. I had to add some additional code to separate that image and give it its own properties so that it would remain with hard borders. I feel like the rounded edges give a little more movement to the flow of my website rather than everything feeling so straight up and down.

 

I really enjoyed creating this website as it felt simple and modern like I intended but was also fun to make and learning new code from the previous Baskerville website made this one more visually appealing. I was working on my 102 website at the same time as this and this one is completely different in terms of the idea that I had and how I implemented which was nice because I got to actually create more than one type of layout and design and see them come to life. I prefer the look of this one because of its simplistic feel and the atmosphere the images give to the website.