Home Page

I have simplified my home page:

Before

After!

I wanted to make it so that the user shouldn't have to scroll to see what the website is about. I also took out the 'splat' definition of colour image because it wasn't a good use of the space.

The only problem with this is that the loss of the scrollbar means that the whole page shifts to the right when you click on a longer page.

I'm still not sure about the background, but without it the page seems boring:

If I had no background image, like this, I would extend the white gradient at the top so that it fills the whole width.

Logo Hovering

For accessibility and usability I have put a text version of the 'home' link in the same div as the logo.
This displays white until it's hovered over and it goes black. Ive also got the logo to animate on hover.

HTML

CSS        

    Normal:

On hover:

                              (animated as well!)

Backgrounds

When I mocked up my design I used a plain grey gradient as the background so that the colours stand out:

Then I experimented with different backgrounds:

I am using the orange lemon one for the home page. The 3 before it I might use for the other pages, however they are linked in the CSS which will be linked to all the pages, so that might be a problem.

I centred the background on the x axis to make it symmetrical.

I might have a red background for the meanings, blue for the science and yellow for the wheel pages, to go with the buttons.