Colour Deficiency

Looking at colour deficiencies is an important factor when constructing the website as there are people who suffer from this disability. Creating a website that caters for this will make it more user friendly for those individuals.  

There are different types of colour deficiency:

• Red/green colour deficiency is the most common found in individuals. This is when they struggle to define the colour red or green. The image below is an example of how individuals with this condition perceive these colours.

• Blue/yellow colour deficiency is a less common form found in individuals.  In this case individuals struggle to define the colour blue and green, yellow and violet. There are several factors that can cause colour deficiency apart from being born with the disability, alcohol, injuries and solvents consumed can cause this.The image below is an example of how individuals with this condition perceive these colours.

• Monochromacy colour deficiency is when individuals cannot see any colours apart from black, white and grey shades. The image below is an example of how individuals with this condition perceive colour.

Looking at these factors it is crucial to only use certain colour combinations in the website in order to make it accessible to everyone. I will take these elements into consideration and find a solution for using red and green for the design of my website. 

Sources

RNIB. (2011). RNIB. Available: http://www.rnib.org.uk/professionals/accessibleinformation/colour/Pages/colour_deficiencies.aspx. Last accessed 28th February 2013.

Genetics Home Reference. (2013). Color vision deficiency. Available: http://ghr.nlm.nih.gov/condition/color-vision-deficiency. Last accessed 28th February 2013.

Colour-Blindness. (N.D.). Color Blindness. Available: http://www.colour-blindness.com/variations/blue-yellow/. Last accessed 28th February 2013.

Unkown, (N.D.), Colorblind apples [ONLINE]. Available at:http://www.bigshotcamera.com/images/fun/projects/optics/colorwheel/colorblind-apples.jpg [Accessed 28 February 13].

Unkown, (N.D.), Color-blindness [ONLINE]. Available at: http://www.colour-blindness.com/wp-content/uploads/total.png [Accessed 28 February 13].

Rough Website Sketch

Website Heat-Map

I have looked at website heat maps in order to have an idea what sections are most important to the audience. 

Plan

Logo: I've decided to keep the logo at the top left hand side as most websites tend to place their logos on this area. Looking at the website heat map this section is one of the most important and first looked at when users visit the webpage. The logos position is also a common one found in most website structures and will therefore be familiar to its users. 

Menu: The menu has been placed on the left side of the layout in order to avoid having many features of the website at the top of the page. 

Video: Video updates have been placed in the centre of the page as that is an important and interesting element to look at. The audience will much rather see images and videos instead of text. 

News/Updates: The new/updates are equally as important as the video updates therefore they have been placed in the centre of the homepage underneath the video. This allows users to watch the video then read the updates that are occurring. 

Facebook/Twitter: The Facebook and Twitter links will be placed at the top left hand side of the page, normally websites place them in areas where they are not in the way i.e. footer. I felt that it is important to have them visible at first glance in order for users to be able to click on it straight away. Placing both logos together will also give the user options as to which social netwroking website they would like to visit. The ability to access different websites from this main one will provide more traffic as users know they will not have to use a search engine to find the Facebook and Twitter page.  

Calendar: An events calendar will be implemented allowing the client to insert event dates for viewers to attend and be notified. 

Analysis

The plan I have made will be taken to consideration when designing the website interface although there will be changes as the client made several requests such has having the menu bar at the top just like in their current website. The next step is to research colour combinations and design the website interface itself. 

Sources

http://latonyarecommends.com. (N.D.). Heat Map. Available: http://latonyarecommends.com/wp-content/uploads/2011/01/Heat-Map_image.jpg. Last accessed 22nd February 2013.

Introduction to the Project

As part of the scripting module it is required for students to construct a website using dynamic scripting techniques covered in the course module. The scripting styles include HTML, CSS, JavaScript, JQuery etc. All these coding styles need to be incorporated to produce a site that is user friendly and interactive. 

For the project we have been asked to reconstruct the website of the Motorsport engineering department of Swansea Metropolitan University. The assignment is a live brief project dealing with a real life client as the end product might be the one used to replace the existing site. 

During the first meeting withe the client there were certain requirements they want to be included in their website. The requirements are listed below:

• Current Team

-Profiles

• History:

-Previous Team Members profiles

• Sponsors page:

-Information about the main sponsors
-Links to their site

• 'Minor Sponsor'

-Other sponsors

• Facebook Feed

-Updates from Facebook on the website

• Present Car

-Development of this years car
-Image of the car, each area of the car provides information about it

• Menu

-Placed at the top of the page

• Press Release

-Articles

• Race Calendar

-Event dates

• Contact Us

-Information on how contact them

Below are different formula websites ranging form proffessional companies and universities including Swansea Metropolitan who take part in formula racing competitions. 

• http://www.smu.ac.uk/monoposto/

• http://www.derby.ac.uk/technology/motorsport/vehicles-and-workshops/formula-renault

• http://www.southampton.ac.uk/performancesports/motorsport/

• http://www.bridgestonemotorsport.com/

• http://www.formula1.com/default.html

• http://www.minimotorsport.com/

• http://antelmotorsport.com/index.html

Looking at the images of the sites they all appear to be structured in the same way this is an element I will take into consideration when designing a website plan. Now that I have some information about the project the next stages are to plan a rough sketch of the site in order to have an idea where elements will be place. A rough HTML and CSS page will be constructed in order to experiment with coding layouts, colour schemes etc...In this project different sources such as websites and books will be used for ideas of coding techniques and structures. Level 4 and 5 lecture tutorials by Adam Shailer will also be used to look back on work that has been covered.