How to design a simple site if you’re a developer
An alternative title for this post is, “How I redesigned my blog without being able to design”.
I’m not saying it looks great, but it’s not terrible and at least one proper web designer said, “I like it”, so I’m going to write down how I did it.
Colour scheme
I have no eye for a good colour scheme so I went to Coolors and handed over the laptop to my daughter who hit space until a colour scheme she liked appeared. She uses colour well and seems to have a bit of built in taste when it comes to it so I was happy to trust her judgment.
After that it was a question of making sure colour contrast wasn’t going to produce anything inaccessible. I use Lea Verou’s contrast ratio checker but there are plenty more available.
Fonts
I spent a bit of time on Niice using a search restricted to images from Fonts In Use for the keywords I felt were a good summary of what I want this blog to be. (To restrict the search enter something like “fontsinuse.com: musical” in the search box and only results from that domain will be returned).
After browsing Niice I found I liked the serif fonts most so headed off to Typecast to find web fonts that were the closest to the ones I had seen. I settled on Merriweather because (a) I like it, (b) it’s designed for readability on screens, and (c) its designer Eben Sorkin deliberately kept the file size down for faster loading in browsers.
After that I wanted to try pairing Merriweather with a sans-serif font to see how it looked. After a lot of Googling (I have no idea how to pair fonts) I came across this page on Typewolf that suggested pairing Source Sans Pro and Merriweather, so I did and I liked it.
Font sizes
I knew before I started that I would be using Tim Brown’s modular scale for heading sizes. The only question was which scale to use. In the end I went to the piano and tried a few out to see which sounded the nicest. I settled on minor seventh, it’s a bit bluesy and sounds quite warm to me.
This was a little bit poncey. You don’t need a piano, just go with something you think looks nice and it will be fine.
Vertical rhythm
The vertical spacing between elements is something you need to get right. Some designers seem to be able to do it by eye, others use the science. I would make a complete mess of it without the science, but thankfully it’s very straightforward. To achieve vertical rhythm in text make sure that every element’s vertical space including line-height, borders, padding and margin are a multiple of the base line-height of a paragraph.
In my case I played with the paragraph line-height in Typecast until it felt comfortable to read (25 pixels at 16 pixel font size) then worked from there.
Because I’m using Modular Scale the larger heading font sizes aren’t exact pixel values so the vertical rhythm is off by just over 1px on the h1 elements and just under a pixel on the h2s. I’m ok with that. If someone zooms in they will see a better scale than if I had rounded the font sizes for the sake of easier calculations on the vertical spacing.
I’ve read a few explanations of vertical rhythm and my favourite is Compose to a Vertical Rhythm by Richard Rutter.
Measure
Measure is another word for line length, and the ideal for reading on the web is alleged to be between 45 and 75 characters. I’ve never seen or heard of any proof for this so I’m taking it on face value, but it looks good to me.
There are bookmarklets and other tools available for testing measure, I just manually inserted asterisks at character 45 and 75 of a few paragraphs and made sure my responsive breakpoints didn’t push the content out either side of that.
This was probably the easiest part of the whole process—measure is either right or wrong and it’s easy to fix if it’s outside the parameters set for it.
Summary
I found the process fairly quick but I would say that if you, like me, really can’t do visual design, only do this if the site you’re working on is a very, very simple site. I have no idea how to apply good graphic or visual design, I just followed some simple rules and applied them to simple content, but I think it turned out ok.
Note from 2024: this website looked like this when this post was written. The designer who said they liked it saw this new design and asked if I was on drugs.
