Portfolio · Web Development

There are some examples of my freelance web design and development below, but most of my recent work has been with Kitson Consulting, so you can see some more over on the Kitson portfolio page.


Party Patrol

A module that I completed in second year at Oxford Brookes is 'Multimedia Application Design'. The coursework for this module required us to work with a partner to invent a company then design and build a website with a specific set of features including:

 

As I had experience in design and development but wanted more practice I took on the majority of the work and my partner focused on learning to do animation with JavaScript and HTML5 canvas. I used this project to learn a few new things and brush up on my JavaScript.

I've done quite a lot of Flash animation in the past but I really enjoyed having the chance to re-familiarise myself. The project spec only required about 10 seconds for the splash page, but I got a bit carried away and ended up with about 30. Have fun!

Interface Design Project

One module that I studied at Oxford Brookes was Human Computer Interface. I find it fascinating to consider how every object that we interact with on a daily basis has been designed in some way. Each has the potential to change our lives for better or for worse. There's a documentary I like called Objectified that explores these ideas.

The Objectified documentary logo

The HCI module taught us about user testing methodology, interaction design and iterative prototyping. Our main assignment was to design and prototype a system that allows visitors of a fictional wildlife park to find information and view wildlife webcams easily.

We chose a diverse range of computer users (and non-users) and drew up a questionare to complete with them. We then made a series of protoypes while continuing to test changes with our user group.

Sketch of dialogue box

We decided to do a paper prototype for our first iteration after seeing this video showing how effective and fast it can be compared to implementing one in code. Once we had decided on most of the major features I took it upon myself to learn JavaScript and start building the second prototype in the web browser. We learnt from our mistakes in each prototype and responded to user feedback at each stage.

Click on the image below to play with our third and final prototype for the project. The server we had to use for the project didn't have PHP installed so I used some quick and dirty JavaScipt "includes" to make the site more modular and make development slightly more streamlined.

Screenshot of prototype

New design for this site

My new theme for this site really indulges my love of translusency in web design. I think it really helps my photography to become part of the design without distracting too much from the content. I also didn't want to settle for just one image so I wrote a simple PHP script to load background images at random.

I finally got set up with the excellent SASS and Compass frameworks and used this project to try them out on. They allow me to work far more efficiently and optimise the stylesheets for faster loading.

Before

After