I very much enjoyed creating this project, as I had studied some HTML and CSS during the summer break at home, in preparation for the course, and this project was a brilliant opportunity to put into practice what I had learnt.

In this first version of the Women in Design page I firstly focused on applying the correct tags to the text, so that it would display correctly, such as paragraph, heading, article and list tags. I did not encounter any problems while doing this, and picked up these skills quite quickly.

Although this first version is very plain without CSS, I was pleased that it ran correctly and as expected.

During this week, I focused on creating the designs of the pages on Figma for the next week’s class, and addition of CSS to the page.

I used a soft, monochrome colour palette for both of the sites, which would not be straining for the viewer to look at for extended periods of time. For the Street of Crocodiles, I chose images of central European towns, as I did some research on the original book to inform my design choices, and found that it is set in Poland. For the Women in Design site, I used images of Friedländer’s work, and for the other designers, researched their styles, for example, Scher uses a colourful postmodern style, and found images related to these styles. For the Street of Crocodiles, I chose Inknut Antiqua for the headings, as it is a serif font, with uniform but varied stroke sizes creating the feeling of something handmade in a small town, I also used Hepta Slab for the body text, due to its readability, and its similarity to typefaces for book print. For Women in Design, I used Ubuntu for the headings, as it is sleek and rounded, suited the predominant Swiss style of graphic design, paired with the serif typeface Lora for the body text.

After this, I added CSS to the sites, and inserted the images which I used in the Figma file. A problem I encountered was that when the site is viewed in mobile view, the gap between the images was lost, after reviewing the code, I found that I had left a space after one of the CSS tags.

This caused everything after this tag to become void, preventing the images from being formatted correctly. There was also a large gap between the images in desktop view, this was because the images I imported from Figma were around 20 pixels too small, therefore i exported them again in the correct size and added them to the IMG folder.

Finally I created these mobile views in Framer, and added code to format the content as shown here when it becomes smaller than the breakpoint.

I was very pleased with these sites, as they are formatted exactly as I had intended in the Figma files, and I was able to easily deal with all the problems that I faced.

The Street of Crocodiles