Web Design Projects

Five Pin Din

Software: XHTML, CSS, PHP, Photoshop CS3, JavaScript

The brief for this project was to create a website based upon an unusual collection. I chose to create my website about the range of musical instruments and equipment we have in the family.

Visit the Five Pin Din website

The design

A CID sheet for the Five Pin Din website (PDF, 259k)

I created a corporate identity for the website, which included a logo and selection of typefaces which would be used on the website. I chose a green colour for the logo, as this is the colour of circuit boards which linked well with the items on the website.

Website final design thumb

For the design of the website, I chose to have the top segment of the page to show pictures of the piece on display, and used a simple JavaScript gallery to show a range of pictures of the products. Below this a 2 column layout would hold the content, with the bottom section allowing the user to navigate to other items in the collection.

Construction

When making the website I used PHP includes for any parts of the website which would be repeated. This technique allowed me to make changes quickly to the website without having to every page.

Testing

The website has been user tested by creating a questionnaire where users would complete scenarios and also give their opinions of the website. It has also had an extensive amount of browser testing done, so that it is viewable to people regardless of which browser they choose to use.

The website in IE7 during the browser test

I have also done an accessibility report on the website, in which I concluded that it met priority 1, level A conformance. This will allow disadvantaged users to be able to use the website regardless of their equipment or disability.