I first posted in this blog 14 months ago. In the history of humanity, that’s
not all that long ago, but for me it feels like an age. When I wrote that
original blog post, I was still at university (just). I knew I was going to be
a software engineer, but didn’t have much experience. In particular, I knew
absolutely nothing about web development.
The original design was nothing to write home about. It was fairly plain,
black-and-white, using a fairly standard set of fonts. This was largely a
deliberate decision: back then I knew literally nothing about design.
Essentially all I knew is that I couldn’t get anything to look the way I wanted
it to, so I should do as little as possible.
Over the past year-and-a-bit I’ve extended the design. Just small things,
largely stolen from smarter people than myself. I added some horizontal rules,
and a few splashes of colour. I spent an evening designing a
(less-than-impressive) SVG logo so that the word ‘Lukasa’ wouldn’t be
literally everywhere on the page.
Slowly and inevitably, however, I grew tired of the design. Small things came
to annoy me. Things like the inconsistent spacing, and the bizarre double-rule
at the bottom of most pages that I couldn’t easily get rid of, and the totally
boring font choices. It occurred to me I could do better. So over the last few
weeks I’ve been quietly working on a new design: the one you’re looking at now.
I want to take some time to talk over some of the changes I made and some of
the tech I’m using. I promise, I’ll go back to HTTP for my next post.
The Old
Let’s begin by looking at what I used to have. For those of you who don’t
remember, this is what the front page used to look like:
There is nothing inherently bad about the design of that page. It looks fine,
especially considering the guy who built it didn’t know anything about web
design. But looking at it now, there are some things that drive me crazy about
it. Little things, really, but here’s a list of them:
- The body font is just slightly too small (14px).
- The spacing is inconsistent. Look at the spacing around the horizontal rules
in particular. - The horizontal rules aren’t consistent. Either they should all fade or none
should, not this weird half-assed thing. - There is a poor use of width. This was an attempt to make the site responsive
by simply refusing to get wider than a certain point, instead putting
massive white margins at the side. Not great. - The top header is left-aligned, which is just weird.
- There’s two horizontal rules at the bottom of the page. Why? Because I
sucked at code, that’s why. - While we’re at the bottom of the page, the copyright license at the bottom
is left-aligned for no good reason. - The design is heavy. The biggest problem here is that the headers are just
way too heavy, which totally undermines the otherwise good use of empty
space.
The other page that really drove me nuts was the old ‘About Me’ page. For a
page that was supposed to sell me, it did a truly lousy job. Take a look:
The text was short and didn’t really say anything about me. Let’s not even get
started on the weirdly pretentious idea I had to place a quote beside the body
text. I think I just liked the way it looked. Don’t get me wrong, Neil Gaiman
is a genius and The Sandman is a great work of modern fiction (go read it). But
it looks really out of place there.
The final problem is the tech. I was using the
Skeleton CSS framework (see how much of my
design I ‘borrowed’ from there?). The problem is that Skeleton is essentially
dead and has been for a year. That doesn’t exactly inspire confidence. So it
was time to move to something newer. And shinier.
The New
So what did I want from the new design? Minimalism is still the way I wanted to
go, because it’s the saving grace of bad designers (like myself). Great
designers can do great work using minimalism, but lesser designers can avoid
shooting themselves in the foot. That’s awesome for me. So minimal and
nearly-flat was the way I decided to go.
I also wanted a CSS framework (though I ended up using very little of it, and
could probably have avoided it altogether). Because I really didn’t need much,
I decided to go for small. For that reason, I chose Pure.
The first question was the colour scheme. Fitting with minimalism, I wanted
predominantly greyscale, but with an accent colour I could use to highlight
things. Given the colour used in my logo, there was only one choice: the colour
I’m now calling ‘Lukasa Purple’ (#870e87, if you’re interested). And it would
be used sparingly: in the end, only on the header and the sidebar links (to
suggest ‘clickability’). Finding a sidebar grey that worked with the purple was
a bit of work (big thanks to Andrey Petrov for tips with
that), but in the end I managed to find one I liked.
Next, fonts. I used Google Web Fonts, and basically searched for a sans-serif
that looked good large and at light font weights. I ended up choosing Titillium
Web, which now adorns the headers of my page, looking all sharp, modern and
graceful.
Then I tore everything out. Everything that was in the sidebar came out and I
carefully tried to justify their existence. In the end all the social stuff was
removed entirely (you can still find it on the ‘About Me’) page. On the other
hand, the stuff I liked was accentuated. In particular, the SVG logo became
way larger.
I removed the giant horizontal rule, and replaced the rules between posts with
smaller horizontal rules that attracted less attention to themselves. Their
purpose is not to make the page pretty, it’s to structure it, so they needed to
be less garish than the previous purple ones.
And all of a sudden I found I was nearly done. A few little bits and bobs, like
making the sidebar elements change colour when they get hovered over, and I
was left with what you see now.
Then I went in and rewrote the ‘About Me’ page. The biggest improvement on that
whole page isn’t the new design or the extra detail, it’s the tone. The main
header has changed from “About Me” to “Hi, I’m Cory”. That change in tone from
formal to conversational has an unexpectedly large effect on how the whole page
reads.
Summing Up
Altogether I’m happy with how things turned out. There is less CSS than there
was before, it’s better laid out, it looks cleaner and lighter and the font is
an intelligent size again. There are probably some gaps in the CSS, a few edge
cases I haven’t considered, so if you find one of them please let me know.
Otherwise, let me know what you think of the new design, and stay tuned,
because I’ll go back to my (semi-regular) normal blogging soon!