Site design v5

The WordPress theme I designed and built for this site hadn’t really changed for a couple of years, and with its lack of responsiveness was really showing its age – so it was time for a new design.

Since launching paulgalbraith.com three years ago there had been a total of four different designs, some more noticeable than others. For the last year or so I’d been wanting to redesign the site, but never got around to actually finishing it. The main reason being I kept changing my mind about how I wanted it to look and feel – I would get quite far into coding a design when a new idea would pop into my head which I preferred, and the whole process would repeat again.

I do find it incredibly hard to design anything for myself, I think having total freedom can be overwhelming, and is not helped when there are no time limits, which leads to constant changes and more delays.

A few weeks ago I decided I needed to just get the design as it stood out there, regardless of whether I’m totally happy with it, or if it’s completely finished. I wanted to take the approach of not being too precious about the design, and to just launch it, see how it performs and tweak it from there.

Additions and Subtractions

The new site has some big changes and I’ve finally added a proper portfolio section, which is rather basic at the moment, but will be improved as more content is added and the layout is adjusted.

There is also a logo design form, built using Gravity Forms, which is a much better solution than the Google Doc I was using previously.

I’ve also made the decision to remove blog post comments, at least for the time being. There’s no big reason for this, I just felt it was mostly underused and didn’t warrant the time to implement right now.

Layout & Typography

Initially I intended to retain a 2-column layout much like the previous design, at least for when browser windows were at their widest, but in the end I opted for a single column approach. I prefer how clean it looks with all the information being central, with no distractions either side.

In terms of typography, I wanted a change from Helvetica and the small font sizes used in the last version, so instead went for a combination of Proxima Nova, Chaparral Pro and Jubilat at sizes that are easy to read, no matter what device is being used.

Colours

The colour palette used for this new design is not that dissimilar to the previous theme, both being mainly black and white. For this one I’ve added more shades of grey, though not quite 50. I did try a variety of colours overall and also just adding an accent colour, but in the end I felt it overpowered the design. My goal was for the content to be the main attraction, by using large colour images to really contrast against the greys used for the rest of the site.

Versions of header with accent colour.

Versions of the header with an accent colour.

Responsiveness

Making the new theme responsive has been the biggest change. It was something I considered incorporating into the previous design, but thought I may as well wait and build it into this new one.

This was my first stab at responsive web design and overall I’m pretty happy with the outcome. I didn’t take a mobile first approach, or a desktop first one for that matter. Instead I designed and built the site with all sizes in mind, working on individual elements and how they would work best at different widths.

The logical approach for me when deciding on breakpoints was to target when the design would start to break down, I did however try to tie these in with tablet and phone sizes, even if loosely. In addition to global breakpoints, certain items required their own breakpoints, though I tried to use these only when absolutely necessary.

I did find some aspects challenging, such as the main navigation. This has three different versions depending on the width of the browser window, with only one visible at any one time, and the other two hidden. I’m not sure if that’s the best approach, but for the design I wanted I couldn’t see an alternative.

Responsive website shown in browser window, on iPad and iPhone.

A responsive layout, including three different versions of the main navigation.

Overall

I still have many additions and improvements to make, but for now I’m just relieved to have the new design up and running. Older versions of IE struggled with certain aspects of the design, so for versions under 9, I’m serving up a basic layout, to at least allow the content to be readable. I’ve tested the new design across various browsers on Mac and PC but if you spot any major issues please drop me an email to let me know.

About the author

Paul Galbraith is a logo and brand identity designer, working with startups, small businesses and entrepreneurs in the UK, USA and beyond.