dougmcdonald.co.uk

Intro

A recent smashing magazine article challenged readers to justify design decisions about one of their websites.

Having very recently released and 'almost' finished version of the site you are currently reading, I opted to take up this challenge and explain to you the justification behind the decisions.

Believe it or not, I didn't just randomly put it together overnight!

Overall Concept

With this being my personal website, I was devoid of client input (except for my inner self!), so without this, I feel it neccassary to explain the 'purpose' behind the site.

It aims to service 4 main functions:

• Blog
• Photo gallery
• CV
• Contact Mechanism

Being a web developer, this site partially forms a psuedo portfolio, with the majority of my work being owned by my employer, destined for intranets or totally invisible to the front end user I don't often get a chance to show of my work, so this site aims to show off certain parts of works I've done in the form of a blog and hopefully provide useful information for others interested in the subjects.

It also forms a mechanism for me to display photographs I've taken, outside of many of the popular sites like picasa, facebook etc. Behind the scenes I was after an easy way to manage my photo's so this is purely driven by file structure and has no database interaction at all.

Beyond that, it's also a cut down CV and information portal, on the 'about' page, which aims to give people a rough feel for what I'm like, what I've done etc

Finally, it forms a contact mechanism to drop me a line, without publishing my email address and gives links to various social networking portals which may well be developed further before finalising the site.

Layout

I have tried to focus on a clean overall layout, by which I mean keeping the elements seperate with little overlap, this is partly because I wanted to keep the site looking functional and partly because I didn't want to depend on fancy images as much as possible.

Because I'm a developer rather than designer, I'm also not too hot on the images front, so I was playing to my strengths with this approach!

I have also aimed to ensure that as much as I could, elements are liquid, by which I mean they should vary depending on the viewport used to display them. Whilst the navigation stays a constant width (because it's image based) the main 'body' area will expand to a percentage of the viewport, allowing larger resolutions to use more space, but whilst maintaining viewability for smaller devices.

I wanted to maintain a good experience on the widest range of user devices possible, including mobile. With this in mind I have ensured the layout renders affectively down to resolutions of 1024x768 pixels.

On the main body area, I have tried to ensure that the margins are consistent around the main elements (such as blog listings) and also tried to increase the whitespace above the 'h2' elements in the blog post bodies to ensure better seperation of sections and more legible results.

Regarding the dougmcdonald.co.uk text in the top right under the navigation, this has intentially been placed out of initial focal area so that the user can see this if they wish, but is not forced to take this in directly, as it's not intended as a logo/branding tool in a visual sense.

Colour

Choosing a colour scheme for my site was a tricky one, part of me wanted to implement 'schemes' and have the user choose, but from personal experience I never use these, so I decided against it!

I have tried to maintain a high contrast colour scheme for all the main content in order to provide a good reading experience as the blog content will be heavily text based.

I opted for a dark colour scheme perhaps being influenced by several other sites I like using dark schemes and added a texture to the background to give some depth to the site and precent it looking as bland as it could have.

The colour choices for the navigation were driven a little by a design to hop on the same bandwagon as some of the popular sites about the 'almost flickr' pink on the 'about' option for example. But mainly to avoid the site looking too plain just dark grey based.

Typography

I have opted to try and keep the number of fonts down (except for special cases, such as the signiture text on the 'about' page) and focus on those which are widely available. Overall the site is based on 'Arial' to give a simple but professional feel.

I have used google webfonts to add some more interest to fonts I wasn't confident would be on client machines. And have used 'Oswald' for many of the lists and for the 'h2' elements you see as headings on the blog entries. This again kept with the professional image I was aiming for accross the site.

The one decision I'm unsure about is the use of 'Damion' for the headers such as the twitter feed. Originally this was designed to keep some 'feeling' to the site and make it feel more personal than just purely professional, but I'm aware it could be a bit confusing.

I have aimed to keep a font hierachy in terms of size, but with some of the varied font-faces this has deviated a little. Certain pages do this better than others.

Imagery

I have tried to keep images as functional as possible within the blog side of the site and whilst I originally aimed to have some abstract representations of each blog post, I ended up going more direct with the imagery. This was aimed to help the user visually identify articles they were after as fast as possible.

Styling

I designed the site around the block of colour denoted in the navigation, this was to be the 'styled' part of the site with the remainder purely being 'content'. I did end up deviating from this a little, but overall this still remains.

I've tried to keep everything as simple as possible, an example of this would be the blog comments and contact form. These simply fade their ajax response into the body in place of the form giving the clear indication that the form has been submitted.

Summary

I've tried to create a site which is visually interesting, but also simple and maintainable by myself. From a technical perspective there are some more interesting aspects than the design aspects, so I will add another article outlining those shortly.

The exercise has been interesting, to question the decisions you made and question why you did things a particular way is something that in general is not done enough. Having a conscious thought process around subconcious design decisions is something which clients expect and if we're prepared to produce work for others we must be prepared to justify why it has been done in a certain way.