Website Design Portfolio

Here are snapshots of some of the websites that I have created. Some are personal, some are professional and some are for organisations that I am involved with. You can click on any thumbnail to load a screenshot.

The site links will take you to the sites in their current state, which may or may not be as they are in the screenshots.

Homepage

This was a total re-design of my site with new XHTML/CSS, graphics and content. I made all the pages fixed with and altered some of the larger pages to fit in with this style. I made the banner from a photograph that I took in America in 2003 and coloured the rest of the site with colours from the photograph. I’ve found this technique creates nice looking websites; there seems little point fretting over colour schemes if you can find a colour scheme in nature that suites your tastes.

A new White Sands style sheet applied to the existing code structure that was created for the design above. Added a further CSS enhancement by defining the menu headers as named divs to make it easy to show or hide them, change their size or alter the graphics.

With the White Sands design getting a bit tired I wanted to do a new design that had stronger graphic design elements; something based around some custom graphics.

However, I’m rubbish at graphic design and everything I tried wasn’t looking great, so, I made a new design centered around a triptych that I made of me being silly with some cherries! I’ve used more textures and flourishes on the whitespace that I have in the past in order to make the design a bit more interesting. I have also done a lot of work recently on the content from a typography point of view, so the site should now have proper curly quotes, apostrophes and dashes throughout.


Jet-pac Industries

www.jet-pac.org

This is a commission that I did for a friend at work, Thomas ‘Jet-pac’ Murphy! Being more into graphic design than web design he made a site mockup in Illustrator which I was then tasked with turning into a website. I wanted, of course, to use CSS/XHTML throughout but this layout was more complicated than anything I had attempted with CSS before. There are lots of overlapping elements and graphical flourishes to be accommodated! I’m very pleased with the final result and I hope Thomas is too; it’s been hard work but I think the finished result looks great and is just about spot on the original brief.


Garforth Kenpo Karate

www.garforthkenpo.co.uk

With the club changing it’s name and becoming independent a new website was in order for 2005! I used much of the content from the previous website but started from scratch with the design, creating both new graphics and CSS. Again, the technique was used of choosing a nice photograph for the banner and then using colours from the photograph for the other elements of the site.


This is a complete re-design of the old site to go live with the new syllabus which we have been working on throughout 2006 and 2007. This new design still has an Oriental flavour but this time has a ‘cherry blossom’ theme running throughout, which is enforced via graphical touches and also the use of colour for the text. I also improved typography throughout the site.

Since I did the original site a couple of years ago both my CSS and graphic design skills have improved considerably, so I think the new site is a big improvement!


Stump Cross Caverns

www.stumpcrosscaverns.co.uk

This is a fairly simple site which I created for my Uncle, who owns these caverns in the Yorkshire Dales. The graphics were all created from a photos which I took when I went up to visit the caves, and I’m particularly pleased with the banner which incorporates the tourist destination sign opposite the caves.


Ron Chapél’s Sub Level 4 Kenpo

This is a design which I created and presented to Dr. Ron Chapél as a gift. Dr. Chapél is a greatly respected Professor of SubLevel 4 American Kenpo. Giving back to and promoting the art is expected of American Kenpo Dan grades, and I thought this was something I could do which may be a little different to normal.