For this week we were asked to upload links to our HTML/CSS and Framer Street of Crocodiles webpage builds, even if they were not fully complete. It was clear from my own and other people’s comments that Framer was throwing up some strange issues. As a new tool to all of us this was not totally unexpected, but for me it was a little frustrating. My Framer site was not fully complete at the time of the critique so most time was spent looking at my HTML/CSS version. No major issues came up, with most feedback surrounding giving my content a bit more space to breathe. This involved adding some more margin and padding around images, adding in some more line-height in my body copy and looking at the letter-spacing in my Navigation links.
Adding more margin around my images and line-height to my body copy, were relatively easy tasks. I changed my line-height for my body copy from 1.2em to 1.5em, which is what Google advise in their Material Design as the correct line-height. I also added a 2em top margin to my images to help space them out from the body copy and give them some breathing room.
When looking at my navigation bar text, I couldn’t help but feel the font-size as well as the letter-spacing were too small, especially as I had selected a semi-bold font-weight. I tried making the navigation bar text 1rem, the same as the body copy but this made it too large, especially as my navigation bar is fixed to the top of the viewport. So I decided on a happy medium of 0.85em with 2px of letter-spacing and I was happy with this.
Another change I made after the critique was to my images, it became obvious especially on the class projector screen, that the images were to stretched and the aspect ratio was wrong. Therefore, while it was not ideal, I went back and changed the aspect ratio and made sure the images looked better proportioned. This did make the images larger and take up more space than I had initially intended, but I feel it was the best decision for the overall visual look of the webpage.