26th Jul, 2022

Website Redesign Part 1: The start

I'm starting to redesign this website. I like the idea of building in public, and this is a good case for doing so. I've documented progress on other projects before, but I want this to be a series of blog posts, not something tucked away in a project page. There may not be too many interesting things to tell in the process to justify more than a few posts, but at least it will prevent the old "I'm busy with my redesign and do not have time to write" dance from happening.

Why start a redesign?

If you're asking why I started the redesign, here is the story: This morning, at about 5:45am, the cat decided to puke right next to my bed. I woke up and could not get back to sleep. Being the only human awake in the house with nothing to do, it felt right to start a website redesign. This was not an idea I had in my mind at all. I did not think about this in the past days. I thought about various features I wanted to add, but a redesign was never on the table. Yet, it felt like it hat do be done. I opened Figma and started with the home page. By the time the family was awake, I had a first draft that I was happy with.

This might be the first time in human history a website got redesigned because of a puking cat. There's worse stories to tell.

Why I think I did it

But there must be more to the story. This sense of urgency and the excitement I got from the first few hours of working on the new design must have a root somewhere. It's now 10pm and I though about it for the better part of the day and my explanation is as follows:

For the last few weeks, I was obsessed with personal websites, reading blogs and looking at what other people are doing. This priming likely brought "working on website" as a general topic to the front of my mind.

I have been blogging on various platforms and under different domains on and off for the last 13 years. This site grew organically. It started as yet another blog and became my personal website with other things on it. I know have projects on here, a CV, a list of app ideas. I have a lot of other things in mind that I'd like to add to the site. Links or Bookmarks are the one that I planned on adding next. Then there are webmentions and microformats.

There is no reason this would not work with the site as it currently is. When I started building this site, I built is as simple as possible on purpose. I wanted to focus on creating content instead of building the site. I feel this way still. However, because of this, the site felt okay to me at best. The minimalist look has a certain aesthetic to it, but I never felt at home with it. I want that to change.

Feeling the excitement when I redesigned the homepage this morning, when I tweaked it more after work and even looking at it now, I am certain this is the right thing to do. I cannot wait for the page to look how it will look. And I'm happy you're here for the journey, if you want.

Where we stand

Not taking writing this into account, I assume I have spent about 3-4 hours with the redesign up to this point.

I started with adding the content I currently have on my homepage to Figma (cut the text to have a better flow) and adding colours to it.

I wanted to have a page with this photo-colour style for years now, but I could never justify spending money on a photographer, since I do not rely on the site as a portfolio. This morning I realised that my phone could do anything I needed. Placed it in a bookshelf next to the window, pointed a flashlight to the wall to have secondary lighting and used portrait mode. It's not white box quality, but it's good enough for me. That's how I look with less than 5 hours of sleep, if you ever wondered.

The content stayed the same, except for the recent articles and the footer. I did a handful of variants with different colours. Started out with an orange (and a different picture where my arms were cut off on the sides) and landed at the pale rose / orange / neon-green combination.

I will design a few more pages in Figma before starting to code. I tend to get bored of that quickly and want to start building the thing, but I enjoy playing around in Figma and hope that will last a few days. I think I will at least do:

  • Articles List
  • Single Article
  • Project Page
  • CV
  • Content Site

I'm not sure if the notes and article pages should use the same template or if they should differ visually. Will sleep on that.

About the future

With the redesign, I want to change the underlying technology of the site. It currently is built on Jekyll, which worked great and is a lovely project. But I want to learn something new. There is one need I have: I want to be able to use a CMS for managing content on the go. Having to set up the laptop, write something and check it into git feels daunting at times. It makes me not write things I otherwise would have written.

There is a myriad of solutions out there that would fit my needs, but I think I will go with GastbyJS and NetlifyCMS. For one thing, I like writing JavaScript a lot. Secondly, I like the idea of having all my content as markdown files checked into git (as is the case currently) and NetlifyCMS working with that. I heard a lot of good things about CraftCMS as well, but did not look into it. I will do that in the next days, to be sure. Don't think this will be the route to go for me, though.

That's a rough plan, I know. It will get more detailed when we get there.

Building in public

Writing about the progress is a good step, but I want to share actual progress. When the development starts, I will create a new public repository and start deploying from the start. This way, there will always be a latest version of the site to look at.

As for now, the only thing I can offer is the link to the Figma project. Take a look around.

That's it for the first part of the series. Looking forward to this!

© 2024 Chris Jarling