A brutal redesign

Duncan Stephen logo and arrow

When I wrote about why it’s time to reclaim our digital lives back in October, it got a pretty good response. It felt like it resonated, and when I looked around I found that other people were feeling the same, and longing for a return to the days when we blogged rather than Facebooked.

I started to experiment with different ways of blogging, with varying degrees of success. I have published almost every day, sometimes multiple times of day. (It has not escaped my attention that very little has had anything like the reaction of that first post I wrote in October.)

Quickly, I realised what I was doing was a bit off, for a few reasons. So I decided to redesign the blog.

I’ll explain some of the technical stuff going on below. But first, here is some of the thinking behind the redesign.

Why redesign?

The way I want to use my blog has changed a lot over the past few months. The old design was not accommodating that properly, and that was stopping me from blogging as much as I wanted, in the way I wanted to. So I have re-thought how different post types are being displayed.

I was getting worried that the articles that I spend rather a lot of time writing were getting lost in the sea of shorter asides and the many links I had begun to post. So the new design gives more visual emphasis to the longer articles, while still accommodating different post types — links, jams (a piece of music I’m particularly digging right now), photos, and so on.

The old design was starting to look really messy with the different types of content I was now posting. It had become ugly and unclear. I had people telling me in person that they couldn’t work out how to comment on some posts. (Commenting was always possible everywhere, but it had become too difficult to find out how for the new post types).

My website design had become quite stripped-back and functional. This appeals to the part of my design brain that says I should remove everything that is not necessary. But that meant it was lacking in character.

Part of my aim with the redesign was to inject some character back in. So there are a few fun and frivolous elements to make things interesting.

I have called the WordPress theme Brutal, partly because I like brutalist architecture, but also because elements of the design are heavily inspired by modernist graphic design of the mid-20th century that often went hand-in-hand with brutalist architecture.

It has taken me much longer than I expected to get this design out there. (In fact, I was thinking about this before #newwwyear, an initiative where people worked on their personal websites over Christmas… no chance for me!)

My first attempt at a redesign went down a path that was a real dead end. But I think it has come together now, and I’m quite pleased with the final result.

There is a lot more work to be done here. But after years of neglecting my own website, I now want to turn it into a proper platform for me to communicate with my friends and the world in the way I want to — not the way Mark Zuckerberg wants me to.

Please let me know if you see anything odd with the new design.

Here’s the science bit

OK, here’s the same story but in a bit more detail.

In recent months I have been experimenting with different post types. I was displaying different types of content in different ways. That kind of worked on the website itself, although the fact that my existing design didn’t really accommodate the new post types very well led to it looking quite messy in certain circumstances.

At first, I used WordPress’s post formats feature. But this was rather limited, and doesn’t appear to have been updated much in the past few years.

So I began using the IndieWeb Post Kinds plugin. This seems to work a bit better, and is at least being actively developed. On the downside, a couple of recent plugin updates have broken the website, which makes me a little apprehensive to continue using it. I am sticking with IndieWeb post kinds for now, but continuing to use WordPress’s post formats in the background.

Because of this mish-mash of solutions, some of the archives now look a bit weird. But I hope to work on fixing this in due course.

This is also an opportunity to pursue implementing more IndieWeb features. I do have some reservations, which perhaps I will elaborate on in a future post. But IndieWeb does at least have the potential to be a good alternative to the increasingly toxic social media platforms.

The increase in frequency of posting overall has also begun to look pretty naff on my social media profiles. Part of my thinking behind blogging more often was to become less reliant on social media services. I wanted to take control of my own content, by publishing on my own website first and foremost, then pushing that out to social media.

I use Jetpack’s Publicise feature to do this. But this is a rather out-the-box solution that doesn’t provide much flexibility. I soon want to look into syndicating content to other platforms in a more thoughtful manner.

The new design uses the Inter UI typeface. It is free, extensive, and is being actively developed. Inter UI is perfect for the modernist aesthetic I was aiming for. I imagine it looking great on road signs, which is a win for me.

I used to use Roboto, which was the closest you could come to a free font that was legible, modernist and attractive. But I would rather not use a font that is effectively the corporate font of Google.

As always with a redesign, I’ve taken the opportunity to learn as well. I’ve learnt some cool CSS. Best of all, I have worked more with SVG, something I’ve been promising myself for years.

There is still lots of work to be done here, but I’m pretty excited to have implemented some of this stuff. I would say it’s a simple life being a geek sometimes, but this has taken several weeks during my spare time, so no.

3 comments

  1. I rather dig the new site design – mostly I read via newsbeuter, unless I’m interested in checking out the photos or something, but I do think this new design of yours is pretty classy

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.