Crocodiles website design project

We were given this project to make a website based on Three related sections out of the book The Streets Of Crocodiles Written by Bruno Schulz. For my design, I wanted a simple layout but with added graphics. I didn’t want the website to feel too cluttered and make something within my level of design and coding, so I wouldn’t be too overwhelmed.

I began with doing some basic research about the text we were given to work with, and by so I looked at the book as well as the content of it referred from the internet, as well as the graphics for it. 

The content of the book is according to the internet, not the brightest, so I chose to work with a darker theme for the website, using blue and grey colors, to also match Brunos’ own illustrations that I found. I also looked up what fonts were used when they published the book, which was a Serif typeface, which is what I used for the text and to add some variety I wanted to have Sans-Serif on the titles as well as other text on the websites. 

Sketch and prototype

Whenever I was done doing the research needed, I began with sketching down ideas of what I had in mind and what would work best. I was set on an idea and I came to a conclusion rather quickly when I sketched, from looking at the first and changing certain elements to fit my idea. I also sketched down the information I had gathered from the research to help put the sketch together and made it work. 

After I had my sketches done, I began with prototyping. Since I only had one page, wireframing wasn’t necessary for this project. I used the faithful adobe XD to my help with the prototype and I did a quick sketch before I began with making my website.

I realized when looking over the document we were going to add on the webpage that, I forgot to add an element and did that immediately in XD, which is why it didn’t appear in the sketches. 

While working in XD I was given a better idea of what colors to add, I chose to use a darker grey for the background and changed the hue of the blue, to a more dark turquoise to fit the website better and make it friendlier for the eyes. 

I chose to select a spider image as my placeholder since it was one of the only images I had saved on my computer that wasn’t personal. 

For the images on the website, I had to turn to photoshop for help. The images were either the wrong size, color, etc.

Before

After

The header image before:

and after:

The images I chose to use were drawn by the author of himself, the header image doesn’t have much relevancy to the book, but the other image was made for the book. Hence why I chose to use them.

Making the website

For the code, I chose to use the base we made for the Baskerville website since the layout would be very similar to what we did during class since I wanted my website to be that way.

I began with making my website the way I made it in Adobe XD. 

Along the way to the finished product, I ran into several issues that I had to solve by brute-forcing code into working since it was above my knowledge, which taught me a lot in the end. I had to do a lot of research on how to work certain codes, like how you would implement an SVG into a file from an Adobe document, which was a challenge for me. I also had to figure out a new way to change the color of the SVF using filters. I ended up using filters with the help of this tool to calculate the desired color when hovered over.

There were also a lot of changes during the making of the website, a few elements were changed as well added to make the website a little more interesting and unique. 

Something I found really interesting to make was the two rectangles in the header, as well as designing the text box to float on top of the header image. I also had to learn how to properly use the z-index to properly position everything in the desired way.

In terms of design, I chose to use a lot of gradients and shadows in the background to create a depth-effect in the background, making the website a little bit more gloomy. I used another tool to make the background gradient effect called CSS gradient, which helped me a lot to get the desired background, I also used the tool to create a shadow to the text boxes as well as images. 

Here is my final product.

https://flinkfeltm.github.io/crocoldiles/crocodiles.html

It was a very fun experience and interesting to make, using techniques I wasn’t too familiar with that I now know after a lot of trial and error. There is still a lot for me to learn that I will practice in my free time to be able to create more in the future. I’m very thankful that we were given a project like this for us to learn.

My final design is something I’m very happy with, it took a lot of time and effort, and the outcome was better than what I imagined.