2024
Narrative design with hand-coded HTML/CSS.
The task was to design and build a webpage using HTML, CSS, and NoCode tools with a selection of text from 'The Street of Crocodiles'. The website was to be inspired by 'The Street of Crocodiles' with the aim of creating a layout and aesthetic that reflected the tone and atmosphere of the text.
When conducting my research, I looked into the book covers of 'The Street of Crocodiles' to get inspiration for the mood of my design, such as colour scheme and typeface. I also read over the text, which has an eerie, disorientating feel in such a beautiful way. This helped me get an idea of how to approach this design. As one of my first projects, I didn't realise the importance of research which led to little recording of it - however I still like this design, hence it being one of the projects I placed in my portfolio.
For my typeface, I chose Judson - a serif typeface - to give the site a sense of formality and depth.
To reflect the tone of the text, I created a palette of a muted green and orange, with a creamy off-white - reflecting the summertime setting and subtle themes within the extract.
Using Unsplash, I selected a variety of photos in relation to the aesthetic of the extract to give my webpage some visual storytelling.
Using VS Code and GitHub, I structured the page with clear text hierarchy and added relevant HTML elements such as lists and hyperlinks. I then styled the layout in CSS, focusing on spacing, colour balance, and typography to maintain readability and consistency. Below are some screenshots of my code;
Yay, it's finished!
The final webpage combines thoughtful design with functional coding, reflecting both the tone of the literature and the progress I made in learning front-end development. While challenging at first, the project helped me build confidence in coding and understand how design decisions translate into a live, interactive webpage.
Click to view!
This project gave me a valuable introduction to coding and how it connects with design thinking. Although I initially found HTML and CSS challenging, as I learned more, I began to appreciate how structure and styling work together to shape a webpage. Choosing a serif typeface and muted colour palette helped me understand how visual decisions can reflect the tone of literary content. By the end, I felt much more confident in combining design and development, and proud of how the final outcome captured both the atmosphere of the text and my growing technical skills.