Nickyb.co.uk v6

After attending @media07 with Norwich Union I found myself rather unhappy with my current website design (Nickyb.co.uk v5). I decided to take what I had learnt at the conference and apply it by revaming my website, improving layout, design, typography and accessability.

One element I really wanted to work on is to come up with a logo I could use from now on with any work that I do. I started by doing some doodles to get ideas and ended up with the sheep you can see in my design. Rather than using just one of my doodles I decided to use the simplified sheep as a simple logo, that is easy to put as a favicon or on any documents that I may produce in the future, and a cartoon sheep for brightening up my content. The cartoon sheep were inspired by a set of Mac icons that were rabbits, taking how the rabbits were presented I drew the cartoon sheep getting them to look very similar.

To get ideas for my new website design/layout I wondered the web looking for websites that I liked the look of. Although this was not reconmended in one of the talks at @media, since I did not have a good stock of leaflets etc for design reference. To stop myself just blatently copying a design and just changing the colours and putting my logo on it, I just sketched the bits I liked so I could stick them together later on.

The main websites I took inspiration from are:

• Elixir - layout ideas, section image overlapping main content area
• Spoiltchild - The use of the two tone green and the highlighting in the main menu at the top of the page
• Stoodeo - The subtle checker background, typography, suggestion of the box

Before I drew up the design I needed to get a colour scheme to work too. during the conference it was mensioned that there are sites where you can find colours that work well together and that have enough contrast to make a design readable/useable. I used COLOURlovers and found a very nice pallet called 'BlueBerryBash' that encompased the kind of colours that I associate with the countryside, that ties in with the sheep I had chosen earlier as my logo. Although I had to add some extra shades to the pallet to allow for more contrast not only assisting in the graphical design but in ensuring the textual contrast was large enough too comply with the WCAG2.0, where text under 18pt has to have a 5:1 contrast too its background.

In the end I came up with the design you see now. In terms of code I produced some PHP that would help me maintain my website without having a CMS system that does not really fit the content I have within my site. The code allows the content page to only specify a few variables, meta data and then finally the content, fitting the site design around it, picking the correct submenu, cartoon sheep etc. I have also taken the opportunity to brush up on some of my previous code, for example the photography gallery had 'script' and 'noscript' elements for each thumbnail to enable graceful failure and a more friendly large image when javascript is turned off so the lightbox script I use would therefore not function. This has now been replaced by DOM Scripting, meaning that screenreaders will no longer read out links to each image twice.

There are still areas of the website I want to tweak such as the Links page, where I would like to put the websites favicon in place of the bullet, but I will work on these small things over time, as I thought getting the new design live and functioning more important. As we were told at @Media "Release in iterations, get the work out there".