A New Look Is Born

I designed a new look for this site. Here's a breakdown of the process.

Update: This theme is now available in the official WordPress Theme Directory. More info.


If you’re starting a website of any sort, remember this: content first, design second.

You can find an audience with great content and a mediocre design a lot easier than you can with great design and mediocre content. Unless, perhaps, your audience is strictly designers.

I am telling you this now, but one year ago I was telling it to myself. I was setting up this site. I thought about building a custom design then but I didn’t have a lot of free time. I preferred spending that time on content. So instead of starting by getting a design together, I picked my favourite of the default WordPress themes, Twenty Fifteen. I made a few customizations and focused on the habit of publishing content instead of worrying about how it looked.

It looked like this, and it was good enough to get going:

I still wasn’t sure I would build the habit of writing every week. Once the habit was solid and I was publishing regularly, the next step was figuring out how I wanted that content to be presented.

The Concept

I wanted, first and foremost, to switch from a blog-style site to an index-style.

When you hit the homepage, I wanted a simple overview of what was new. I wanted a few titles with summaries and – most importantly – no photos to detract from the topics. I also wanted a few curated lists that only have article titles. I would group them around cross-category sections like ‘best’ and ‘my favourites’ to help discovery of the noteworthy content.

(Lots of my posts are relatively forgettable but that’s okay — it’s part of the habit-building system.)

When you hit an archive page, I wanted a simple list of just titles. Maybe a category or date at the top. And I wanted all links to be underlined, preferably in blue.

That’s what I knew I wanted.

As it turned out, it wasn’t quite enough to get started. If you’re designing a site, more advice: spend more time on research than you think you need.

The First Shot

Some 15 years ago, I started my career as a web designer / front-end dev. And as you can imagine, a lot has changed since then. I thought this would be a good opportunity to learn some of the new tools and update some of my skills.

The first was Sketch. I had always been a Photoshop guy. (Verdict: Sketch is great.)

I picked a colour scheme that I described in my head as “royal / regal / old-British money.” Dark red, dark blue, browns and greys/blacks. Pretty similar to my wardrobe, in fact.

With colours and a concept, I did a first pass:

Oh my. I am rusty. That looks like the site of a domain squatter.

Garbage.

The Second Shot

I paused to rethink my approach and gather some inspiration. I studied a bunch of other sites and themes and inspiration galleries. I made notes and lists of what I liked and what I didn’t.

I added “simple side menu” to the list of things that I wanted. A complicated sidebar screams “I’M A BLOG!” and who actually uses all the category and month archive links anyway? I’m betting a few curated lists will have higher engagement because it removes choice and adds social proof. Not that I care too much about those things here.

I also added “single background colour” and “minimal lines or icons”. At first I thought about an all-grey background similar to a old version of my site from 2005.

I was a 22-year-old with zero-life-experience so I wrote about whatever objects were near me. The design was not unlike Daring Fireball looking back, but I’m pretty sure I didn’t know about that site when I built mine because I was still a Windows fan.

In the end I decided to go with a white or off-white background. I don’t like to read light-on-dark, as evidenced by all of my text editor configs.

All-white backgrounds are some of the hardest to get right and I decided not to use any “horizontal stripes” in the design. So no differently shaded header or footer or shading to distinguish different sections.

With a clearer vision, I came up with the following:

Screenshot from Sketch, where I worked on the index and article page side-by-side.

Better! And as you can see, pretty close to the final version.

Typography

This style relies heavily on the font choice, so I had to put some thought into that.

At first I had intended to keep the fonts from the last theme. They were Noto Sans and Noto Serif. I wanted to carry some elements from the old look through and I also wanted to use Google Fonts so I could easily distribute the theme without worrying about reading font license fine print. Noto fit well.

But I couldn’t shake how, over the past year, the fonts never seemed to match the tone of my content. Or at least, the tone I would like to be using here. In my head it’s something like: modern, authoritative, but not too serious.

I ditched Noto Sans and tried another font called Raleway. I like Raleway for my name because it has a very distinct W with overlapping middle-strokes. And I liked it paired with Noto Serif.

I used those for a while while coding up the design but I craved the simplicity of using a single font. Why use two fonts? I’m not a typography expert, nor do I revel in type. My passion is in keeping things simple.

I decided to use a single font instead.

A single font would have to be a sans-serif. A serif would be odd for all text, given my intent. A sans can be more modern and can work everywhere because a lot of newer sans are also made to be very screen-readable as body copy.

Except Raleway. I find Raleway brutally distracting and eye-wincing as body copy.

So all those fonts went out the window and I implemented a few different choices. In the end, I went with a slightly-boring but solid choice: Roboto.

Raleway & Noto Serif vs. Roboto

I didn’t like the Roboto 700 weight (far too thick for my taste) so I took the 400 and 500 weights. I also added a 300 for the side menu so I could thicken the selected page item without using the 500 weight.

S&L

Simplify, then add lightness is the Lotus Cars philosophy. They aim to build simple cars that don’t weigh much. I kept repeating this to myself as a mantra for this design.

In the font-comparison screenshot above you can see that I lost the header symbol and shortened the tagline.

I kept asking myself, “what can I take out?” The header still seemed unbalanced with a medium-length tagline. Something shorter would be better. I wrote a number of them but settled on the two words that felt the best: “Ever Better.”

It looked right and it sums up what this blog is all about very well. That is, constant self-evaluation to continually improve. If a visitor wants to know more, they’ll click the About link. Bios of a sentence or two, when written well and placed on the front page of a personal site can add authority and context. I think saying less like I do here achieves a different, but still powerful result. A little mystery is a good thing.

The Details

I also added some small touches. For example, the “Ever Better.” tagline is red on the homepage, but when you’re viewing an article, it mutes to grey because the article has a red tagline and I only wanted a single red element on any given page.

There are more that are less design-focused and more personality-focused but I’ll leave those for you to stumble upon.

Simple designs such as this new look can easily come off as cold or sterile or unfinished. The little details are really important if you want to make one of these designs feel more welcoming and intentional.

I imagine I’ll be tweaking the details for a while.

Conclusion

I think it’s a great look. I’m quite happy with the way it turned out, especially given how little time I’ve had to put into it.

I’m going to let it sit for a while, fix the little things that inevitably come up after you launch something, and try to release it for others to use. If you find any bugs or if you’re a designer / front-end dev and you see something I can improve, please get in touch. This is nothing if not a learning experience.

Thanks for reading along this year! I will be honouring your time (and now this design as well) by making my content here ever better.