The concept behind this HTML5/CSS3 website is based upon the racing circuit spa franchamps in Belgium. This topic was chosen because it allows for multiple types of media, such as images and video, and content which can be presented in many different forms as there are numbers to be presented, history to be looked into and general information to add in to the website. I have tried to split up the information and content to different pages so there isn’t an overload of information or media types on single pages.


Original Design

I went with a simple design which would show off the media and numbers more than anything else. To make the design I looked and found inspiration online and then made a mock-up in Photoshop, once this was done I designed the first page in a full screen view in HTML5 and CSS3, this allowed me to see if my design would work in this situation and then I had the option to go through the other sizes and see how I could make the website design work in each one. The main colours within the design are quite random, as they are nothing to do with the circuit as such, but as they are subtle, they allow for the users to concentrate on the content instead of the look of the design. Although, as mentioned, I have made sure the content is the main aspect, this doesn’t mean that the design hasn’t been through about or designed in a way so people think it looks good. Originally I wanted to use the Belgium national colours so that there was a bit of meaning behind them, however, when I played around with this idea, the colours didn’t work as intended as they are far too bold, when I wanted colours which could be faded in and out of the website to allow me to add pictures but not make them stand out to much. This is mainly shown on the homepage at the top, where transparency has been implemented.

Design Process

  1. To build upon what was mentioned above, the first iteration of the design was made on Photoshop, which can be seen to the right, and I only produced the front page as I felt after I had this I could make each of the other pages straight in the code.
  2. After putting the design into code I went onto thinking of where to add different media, which would both add to the design and be informative at the same time.
  3. One of the main pages I was keen to make was the How to Find Us page, which I felt could be a great place to add a geo location function which would not only say where the person is on the map, but also give directions to the track without the user having to enter any information.
  4. The statistics page was done so that I could present numbers in a nice way and implement lots of hover, transitions and effects which would allow me to add CSS3.
  5. I chose to do the history page as firstly the site felt like it needed a basic informational page, but then it was the perfect place to add video and images to the website in a way which would help the user be informed.
  6. The gallery page was another opportunity to display images and add a hover effect where the user could hover over images to find out where the image is from and what it is showing.

Through all these pages I have been able to display all of the areas which are listed within the coursework outline and I feel I have presented them in a way which is not only a good user experience, but it also looks good.

Smaller Points

During the development there were some problems where I used a way to solve it which probably wasn’t the best.