Redesigning this Website

I enjoy reading about efforts to redesign, so I thought I’d do my own.

I did like this site’s old design. But I could have done better. Here’s a screenshot of the “original”:

screenshot of the original website — The "original"

I started out in Figma with this:

image of my first redesign attempt, with colours, gradients and a vertical navigation bar

It carries over the vertical navigation bar from the original. It was alright, but I didn’t particularly love the colours and fonts. The same, but with solid colours instead of gradients:

further refinement of the first redesign attempt, with solid colours this time

Had a go with a high-contrast/monochrome version of this design. I liked it more.

monochrome version of the first redesign; black background for the page

Getting closer to the new layout. It is somewhat inspired from the website of Collaborative Fund.

another monochrome version of the first redesign, this time with a different font and using a beige colour throughout

this iteration was similar to the one before; the only difference is the navigation bar is now horizontal and positioned at the top of the page — a more sensible layout

Now came the task of translating this design to HTML and CSS. I found it not too difficult a task. It was manageable, especially with help from Figma’s dev tools thingy.

my attempt to translate the previous design to HTML and CSS

a screenshot of Figma's developer tools — Figma's developer tools

Now with padding/margins…

padding and margins added to everything; still the same layout as before

And a mobile layout…

The dark mode colour scheme is the same as I mentioned in this article. It’s a bit like Solarized, but a bit warmer in its colour choice. This also shows the footer thing.

the same web page but now with a dark mode

Light mode colours remained the same as before.

The same design, but starting to make use of accent colours. I chose red, green, and blue by accident. I only realized I had done this later on. But I like it still.

Then the iconography in the footer boxes. I did the web and mail icons myself. The RSS icon was pre-made. These are inline SVGs. I chose to do this so that I could manipulate their colours without fussing around with filters. It will, however, make it much harder to change these icons in the future.

added SVG icons to the footer section of the webpage

Now comes the template file. A fun task.

translating the web page layout to a template HTML file

Pretty close now to the final:

further adjustment of the dark mode, with a very loud green accent

And the final! The difference between this and the screenshot above is the colours. The green is too bright above, a bit of a sore sight for a so-called “dark mode”.

toned down green accent. the final version.

There we are!

I’m happy with this for now, and I hope I won’t bother rewriting this site’s CSS again. It’s a novel thing to do, but a bit draining at times. Which one do you like?

This article was written on 11/08/2023. If you have any thoughts, feel free to send me an email with them. Have a nice day!