1st February 11

The new Old Guard – Part 1 – Design

Welcome to the new Old guard

I wrote this article about a previous version of Old Guard so a few things mentioned are no longer on the site.

I am really pleased to be launching the fourth version of oldguard.co.uk and I want to use this first article to talk a bit about the old and new sites, as well as the design. There have been quite a few changes – the site has been re-platformed (onto WordPress), there’s new branding and the whole focus and purpose of the site has changed.

A potted history

There have been lots of changes and minor revisions along the way but these are the major versions of of the site:

- V1 – Version one was a full flash site with a few work examples – from an era long gone that is probably best forgotten!

- V2 – Version two was a portfolio with multiple pages, written in HTML this time.

- V3 – The previous generation of Old Guard, version three, was the first time the site was a single HTML page.It was an interesting experiment to have a single, consolidated one page site but it did terrible things to my bounce rate stats! The portfolio was removed and the site acted as a CV webpage, with bio and contact/social links. The site had some great feedback and I want to thank a few of the sites that featured or showcased it: Designer Daily, Specky Boy and Net tuts. Also a massive thanks go to Kyle Fiedler who used the site as an example in this talk about web typography he gave at Harvard!

- V4 – This is it, the fourth version of oldguard.co.uk and it has been completely rebuilt and redesigned. It also has a major addition to the previous version – articles.

Articles

Just what the internet needs, right? Another web design blog! Well, yes and no. I want the focus here to be on quality over quantity. No lists of the top 50 fluorescent pink WordPress themes!

I joined Twitter in January 2007 and started posting useful bits of information and links I found. Usually the 140 characters keeps these brief and snappy, but doesn’t give nearly enough room to tackle bigger subjects. With this in mind I want to start writing some short to mid length articles on subjects that really interest me.

I don’t expect to be updating the article section every day, perhaps only once or twice a month – I really want to write about things:

For random thoughts and links, Twitter is where I will still post everything else.

Trying to make reading easy

I find reading medium to long articles on a desktop computer pretty hard going and usually send most things to Instapaper for reading later on a smaller portable screen, which I find much easier. I wanted to do whatever I could to make the experience of reading on this site as easy as possible. This led me to look very carefully at the type, line length, font size and line height used, which then dictated the grid I have used for layout. I am pleased with the reading experience, although I will probably tweak it a bit over time.

New site, new logo

The new site has also given me the chance to rebrand, which started with a new logo. I have changed logo design a few times over the years and try not to be tied down to a particular design for too long. I wanted to look back and thought it would be fun to pull together a quick timeline of the previous generations of Old Guard logo.

Timeline of Old Guard logos and graphicsTop row: Main logos used since 2005.
Bottom row: Supporting graphics.

Feedback from the previous generation was that it wasn’t hugely clear – I got a lot of people saying ‘what’s dg?’, or ‘is that og?!’. So clarity was key, which brought a change of font. The new logo uses Tungsten by Hoefler & Frere-Jones.

Colours and lines

I have been using the same colour palette of greys and greens since 2005 and wanted a change, so went with the blue and kept the greys. Also, for the first time ever I have started writing a style guide to keep up with all of the choices I have made – more on that in a later post!

Designing for myself

Updating this site has taken quite a while, it’s been more of a hobby than a project, so I did not set a deadline or run it like a normal job – I enjoy tinkering with it a bit too much! There are a few early design ideas for the site over on Dribbble, although not many of those details made the final site.

I was intending to write more about the design, but really all of the decisions I made and the direction I took stem from my initial aim – to make a site where reading is the priority, which led to the site you are looking at now.

Resources