Thursday, 9 December 2010

First Project - Complete

For my project I chose to redesign the website for the Bodega Social Club in Nottingham. This was down to the reasons that it is somewhere I visit quite regularly, and I believe their current site is quite poor.

I decided to stick to a quite simple and organised layout, using only shades of grey, and a shade of purple throughout so not to be too distracting and drawing the attention away from the content of the site.



I wanted to make the title the real stand out part of the website as it is something that is included on every page. I kept the same shape outline as the current one, however, I have used a slightly different font and arranged the text in what I believe to be a more effective way. Due to the only image of the logo I could get being very small, I decided to make it slightly transparent and put it behind the text in a way where it can still be seen and not be too confusing to the user, but still keeping the branding.

The Home page is made up of a short introductory paragraph, along with a javascript image rotator that catches the user's eye and lets them know the upcoming events in a hope to draw them in and continue viewing the rest of the website.

Initially I used a block colour as the background for my site, but by adding a slight texture, it gives the container a sense of depth and provides the content to stand out.



The 'about' page is made up of one box with all the information about the venue, with a image in the bottom corner to break up the text and not to be too overwhelming for the viewer.





I used the same layout for both the 'gigs' and 'club nights' pages. Both pages were required to contain a lot of information, so I used a jQuery accordion technique so that the text is broken up and only certain bits can be viewed at a time. By doing this it doesn't come as too much and risk the user missing certain bits of information, they can easily find the section they want and quickly get the necessary information.



On the 'contact' page, I have kept the amount of text to a bare minimum, as this is the last thing you want when looking for certain contact details. I have used bold headings so the user can see exactly what they need. I have also embedded a Google Map onto the page so the user can get a visual idea of how to find the venue, without having to exit the site and go elsewhere.



The 3rd element of javascript I used was on my gallery page. I created a simple image change when the mouse is hovered over the images to make them appear in colour and when they are clicked on, a small caption comes up telling the user what the picture is of.

I am now going to attempt to validate my site to WC3 standards before submitting it.