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.  

Buttons

To make the buttons, I originally intended to make 3 images for each of the 3 buttons; a link, hover and active version. Then I found out about CSS sprites. A big image loads, containing buttons or icons used on the website. Then CSS makes the right parts of that image display at the right time, in the right place.

Apple.com sprites.









Part of the Facebook Sprites:

This makes the page load faster, because there are less image requests.

Mine wont be as complicated as these. I will make one image for each button:

Each has a link and a hover state. (I will only need 3)

This CSS shifts the image up, while only showing half of it, to make it look like the button has been pressed in, or is glowing or changed colour.

When I got these buttons onto my page I couldn't work out how to make them links so I put a text link over each button. 

Then I took out the text from the image and restyled the text on the webpage. That's actually worked out better because if images or css is disabled, the site can still be navigated.

Kirsty suggested using complimentary colours for the rollover, which fits in well with my topic and looks nice.

These are the PNGs I'm now using for the buttons:

The top part is the 'link' and the bottom is the 'hover'.

For the 'active' I have used this CSS to make the text on top glow:

So now they look like this:

The text also gets 10% bigger on the hover and active.

Mockup -> Actual Webpage!

This is the mockup I made of the homepage

It has a logo/home button with the 3 buttons for the 3 pages underneath it.  Then I will have a short introduction to the website. The three images and the headings will also link to the science, wheel and meanings pages. The subheadings will be links to anchor points within the 3 content pages (science, wheel and meanings).

After I pitched this mockup I got feedback that the logo should be bigger, to fill the top-left, the most important part of the page. I've also been told that it looks like it's cut off at the top and should be rounded off where the C and the R are.

These are the reworks of the logo that I did, but i couldn't get one that looked as nice as the original so I decided to keep the original logo and use the space to the left and right for the links to the buttons and anchor points within a page.

The anchor links, on the right, will be the same sub-headings from the home-page and will show the different sections of the page you are on. For example if you're on the Science page, the anchor links will  be: light waves, How the eye sees, The colour of objects, Additive/subtractive reproduction of colour.

The 'nav' division is intended to be fixed at the top of the window so that if you've scrolled down a long way and want to go to another page/different part of the current page or the home page, the buttons will always be visible.

Logo will change colour on hover, 

doesnt work on blogger >:(

The actual page made of HTML and CSS 

(screenshot of)

I've made the buttons for the top left. I have 3 Divisions; nav, content and footer. inside the nav div are buttons, logo and anchors divs. I did this so that they would sit nicely at the top. I need to make the rollover versions of the buttons so that they look like they are being pressed in or glowing. I expect i will also change the background image and footer colour but for now they are useful for seeing where the divs are going.

I'm having problems with the margins. I want it to work in the same way as normal websites; where the content is always centred however big the window is but this isn't happening....

Fixed it! 

by containing the nav, content and footer in a wrapper div, and setting it's margins to auto on the left and right

(margin: 0 auto;)

the important parts stay in the middle.